Vue基本用法

最新推荐文章于 2023-12-20 20:35:03 发布
最新推荐文章于 2023-12-20 20:35:03 发布
阅读量1k 收藏 3
点赞数
分类专栏： 蜗牛学前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39193977/article/details/116024879
版权

Vue

·Vue的核心思想是只要改变数据，页面就发生变化
1、vue实例

vue 要在body标签里面，引入一对script标签，src="vue.js"导入vue

再引入一对script来new一个vue的实例，使用

<body>
	<div id="app"> 
  	被下面的Vue实例接管
  </div>  

<script src="vue.js"></script>
<script>
    //new 一个Vue对象
    new Vue({
        el: '#app', //el:代表接管的div元素-id是app
        data: {     //data 是对象里面的数据
            sex: 2
        },
        methods: {  //methods：是对象里面的方法
            change: function () {
                alert('打印alert')
            }
        }
    })
</script>
</body>

vue实例关注：

el： vue接管的div元素

注：只能接管一个div，所有需要vue处理，必须写在这个div内。

data：数据

methods：方法

被vue修饰的div，也是在body中，但是必须在vue实例化之前，因为实例化的时候要拿到el： 否则找不到

2、vue的用法
2.1、{{ xx }}直接显示数据

在div标签里，直接{{}}，就能显示在vue里data下定义的数据

{{}}模板语言只能应用于标签中间

<div id="app">
    <div>{{sex}}</div>
    
</div>
2.2、 v-on 指令绑定\绑定事件
<div id="app">
    <div>{{sex}}</div>
    <input type="button" @click="change" value="指令绑定">
    <input type="button" v-on:click="change" value="全写">
</div>

click对应的方法是 vue实例里面的methods的方法

其中 @ 是简写

​ v-on:是全写

2.3、 v-bind 标签属性绑定

v-bind：

加了v-bind:xxx之后，该xxx属性就可以应用data里面的数据

在属性前面写上v-bind，会自动去寻找vue里面是否有url的值

其中，全写 v-bind:

​ 简写 :

<div id="app">

    <a v-bind:href="url">引用data里的url</a>
    <a :href="url">简写</a>

</div>

下面就是，{样式表：条件判断} 如果is_bg是true，就应用bg

就是把true动态化了，可以修改data里的数据来影响样式

class引用data里面的classes

class引用bg和box，以data里面的is_bg is_box为条件

<div id="app">
    <div :class="classes"></div>
	<div :class="{bg:is_bg,box:is_box}"></div>

</div>
2.4、 v-if v-elif-if v-else 条件判断 和v-show

例：接口测试平台，成功 失败，根据后台返回的结果状态。显示对应的文案

其中，phoneNumber是data里面的值

<div id="app">
    <span v-if="phoneNumber==10086">移动公司</span>
    <span v-else-if="phoneNumber==10010">联通公司</span>
    <span v-else>电信公司</span>
    <span v-show="phoneNumber==10086">移动公司</span>
</div>
<script src="./day12/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            phoneNumber: 10010
        }
    })
</script>

v-if 只有符合条件的元素 才加载

v-show就是 如果条件不匹配，就不展示，会自动加上一个display标签

​ 如果条件为False 则对标签增加 display=none

2.5、 v-for 循环

循环列表和循环列表并且展示脚标

<div id="app">
<!--games:['绝地求生','英雄联盟','王者荣耀']-->
    <ul>
        <li v-for="game in games">{{game}}</li>
        <!--    要展示脚标的-->
        <ul v-for="(game,index) in games">{{game}}--{{index+1}}</ul>

    </ul>
</div>

循环字典，展示字典里的value

<div id="app">
<!-- games:{'name':'绝地求生','company':'蓝洞'}-->
    <ul>
        <li v-for="game in games">{{game}}</li>
    </ul>
</div>

循环字典，展示字典里的key,value

<div id="app">
<!-- games:{'name':'绝地求生','company':'蓝洞'}-->
<!--要展示key和value，所有的v-for循环里面，index都是在后面，先是value，后是key-->
    <ul>
        <li v-for="(value,key) in games">{{key}}:{{value}}</li>
    </ul>
</div>

循环 列表里有字典 取出来名字

<div id="app">
<!--games:[{'name': '绝地求生'},{'name':'英雄联盟'},{'name':'王者荣耀'}]-->
    <ul>
        <li v-for="game in games">{{game.name}}</li>
    </ul>
</div>
2.6 v-model 双向数据绑定，就是和value进行绑定
<div id="app">
<!--    v-model  双向数据绑定 输入框-->
    <div>{{input_value}}</div>
    <!--    将输入框的输入数据 和input_value进行了双向绑定，input_value的默认是defaul-->
    <input type="text" v-model="input_value">
    <!--给按钮，绑定了change方法，change方法是将input_value变成厂 value-->
    <input type="button" value="change" @click="change">
    
<!--        双向绑定 单选框  将选择框的value和sex的值进行了双向绑定-->
    <div>{{sex}}</div>
    <input type="radio" value="1" name="sex" v-model="sex">男
    <input type="radio" value="2" name="sex" v-model="sex">女
    
<!--        双向绑定 列表，复选框-->
    <div>{{movies}}</div>
    <input type="checkbox" value="钢铁侠" v-model="movies">钢铁侠
    <input type="checkbox" value="特斯拉" v-model="movies">特斯拉
    
<!--        双向绑定，下拉选择框-->
    <div>{{movie}}</div>
    <select v-model="movie">
        <option disabled value="">请选择</option>
        <option value="钢铁侠">钢铁侠</option>
        <option value="战狼">战狼</option>
    </select>

    <div>这里是movie：{{movie}}</div>
    <select v-model="movie">
<!--    v-model movie就是 将movie和option的value进行了双向数据绑定-->
<!--    需求是展示name到页面，将id作为value，value必须用 :value，这样才能-->
<!--    和option.id绑定(：是v-bind的简写，这样能应用data里面的数据)-->
        <option disabled value="">请选择</option>
        <option v-for="option in options" :value="option.id">{{option.name}}</option>
    </select>
</div>

data:{
    input_value:'default',
    sex:2,
    movies:['钢铁侠','战狼'],
    movie:'',
    options:[{"name":"战狼","id":1},{"name":"特斯拉","id":2},{"name":"钢铁侠","id":3}]
        },
methods:{
    change:function () {
    this.input_value = 'change value'
           }
    }
2.7、filter 过滤器
<script>
    new Vue({
      el:"#app",
      filters:{
        func:function(){	
        }
      }
    })
    默认将 | 左侧count传递给右侧的方法
    {{count|filterFunc}}

    可以传多个参数
    {{count|filterFunc("test")}}

    func:function(value,test){

    }
</script>
2.8、VUE的生命周期

mounted–>常用钩子–>完成初始化数据

<script>
    new Vue({
        el:'#app',
        data:{
            msg:''
        },
        mounted:function () {
            //钩子函数就是预留的 在各个节点的时候运行的，做修改用的
            //获取到数据源，导致了页面的msg的变化
            this.msg = '获取到后台数据'
            console.log('mounted')
        }
    })
</script>
2.9、$refs

a)、获取标签

<div ref="test"></div>

this.$refs.test // 获取到标签  可以理解为 document.getElementbyID 获取的是标签对象

b)、获取组件

<test ref="a"></test>
this.$refs.a.xxxx // 可以获取组件中的data声明的数据

console.log(this.$refs.a.number)

一个例子

<div id="app">
<!--  div里面的都是父组件，引用的别的组件都是子组件-->
  <test ref="a"></test>
  <test ref="b"></test>
  <div>父组件-{{count}}</div>
  <input type="button" value="test" @click="change">
</div>

<script src="vue.js"></script>
<script>
  //实例化一个子组件，test是子组件的名字，template是子组件的写法
  Vue.component('test',{
    template:'<div>子组件-<span @click="add">{{number}}</span></div>',
    //子组件的data数据的写法
    data:function () {
      return{
        number:0
      }},
    methods:{
      add:function () {
        this.number++
      }
    }
  })
  new Vue({
    el:'#app',
    data:{
      count:0
    },
    methods:{
        change:function () {
          // 可以获取到当前页面的所有使用了refs的标签
          // console.log(this.$refs)
          // 将两个子组件写了ref标签-ref='a'，那么$refs.a就是第一个组件
          // $ref.b就是b组件，$ref.b.number就能拿到b组件的number的值
          console.log(this.$refs.a.number)
          console.log(this.$refs.b.number)
          this.count = this.$refs.a.number+this.$refs.b.number
        }
    }
  })
</script>

c)、组件化时，如果一个元素是由多个标签组成，内部的标签，想组件化不可以直接使用，需要用is属性指定组件

比如，表格就是多层级标签组成的，内部的行、列要使用组件，需要声明

    <table border="1">
        <thead>
            <th>id</th>
            <th>method</th>
            <th>状态</th>
        </thead>
        <tbody>
<!--            <tr-demo></tr-demo>-->
            <tr is="tr-demo"></tr>
        </tbody>
    </table>


    Vue.component('tr-demo',{
        template:'<tr><td>1</td><td>post</td><td>失败</td></tr>'
    })
    new Vue({
        el:'#app'
    })
深海鱼0110
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue遍历数据（数组、字典）
tangyuan的博客
03-31 2723
数组：遍历其中数据 <li v-for="item in items"> {{ item.message }} </li> 数组：遍历数据及索引 <li v-for="(item,index) of items"> {{ item.message }} + {{ index }} </li> 字典：键 值 索引 <li v-for="(value,key,index) in object"> {{ value }} {{key}}
Vue中用v-for遍历一个字典数据，把字典里的value传给input标签的placeholder
qq_46034741的博客
04-13 2342
​ 属性，使用了 Vue.js 的属性绑定语法。然后，我们将字典中的值。​ 属性就被设置为相应字典中的值了。
前端基础-vue（条件循环）
zhb的博客
04-29 449
HTML部分 <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue条件循环语句</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&g...
vue 字典配置_Vue 数组 字典 template v-for 的使用
weixin_39846612的博客
12-31 885
1 2 3 4 5 6 7 8 9 10 11 v-for 循环12 13 {{ characters[0] }}14 {{ characters[1] }}15 {{ characters[2] }}16 17 18 ...
Vue JavaScript 遍历 对象 数组 集合 字典 的Demo
bakelFF的博客
04-24 2302
遍历对象 //forin循环 let objs = [{ id: 1, name: 'object1' }, { id: 2, name: 'object2' }, { id: 3, name: 'object3' }] for (var obj in objs) { console.log('
vue的基本用法与常见指令
10-19
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧
cdn模式下vue的基本用法详解
10-17
主要介绍了cdn模式下vue的基本用法，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
VUE脚手架具体使用方法
10-16
主要介绍了VUE脚手架具体使用方法，vue-cli这个构建工具大大降低了webpack的使用难度，小编觉得不错，下面就一起来了解一下具体使用方法
vue2路由基本用法实例分析
11-20
本文实例讲述了vue2路由基本用法。分享给大家供大家参考，具体如下： Vue-router 是给Vue.js 提供路由管理的插件，利用hash 的变化控制动态组件的切换。以往页面间跳转都由后端MVC 中Controller 层控制，通过<a> ...
vue组件化中slot的基本使用方法
12-29
前言 slot可以在子组件中开启插槽，在父组件引用该组建时，可以定义这个插槽内要展现的功能或模块，下面话不多说了，来一起看看详细的介绍吧 ...父组件.vue 这是父组件的slot替代内容！ ​ <s
vue中的循环对象属性和属性值用法
10-14
主要介绍了vue中的循环对象属性和属性值用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue遍历数据及字典的方法
weixin_30362801的博客
10-16 1759
数组：数值<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> 数组：数值加索引<ul> <template v-for="(item,index) of items"> ...
数据字典前端渲染过程中v-for和v-if同时使用的问题
a451387526的博客
02-02 347
数据字典前端渲染过程中v-for和v-if同时使用的问题
vue学习：v-for遍历
daokoi的博客
03-23 1205
vue学习：v-for遍历 遍历数组：v-for=“item in items” 遍历数组+索引：v-for="(item,index) in items" 遍历对象值：v-for=“value in object” 遍历对象键+值：v-for="(key,value) in object" 遍历对键+值+索引：v-for="(key,value,index) in object" 可以缩写为：v-for="(k,v,i) in object" <div id="app"> <
22 Vue3中使用v-for遍历对象
最新发布
Python私教
12-20 1213
使用v-for遍历对象在真实的开发中比较少见，了解即可。对象我更喜欢统一称之为字典，假如你哪天发现我在某个前端的教程中把对象叫做字典，请你知道这两个是同一个玩意儿。所谓字典，就是一种key-value类型的结构的统称。比如，用户信息中有name表示姓名，age表示年龄，gender表示性别，这里的name，age，gender叫做key，他们记录的值，比如张三，22，男则叫做value。现在我们学习一下，如何使用v-for去遍历一个字典。
剑指offer:旋转数组的最小数字
weixin_37963567的博客
11-09 85
题目：把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。 输入一个非递减排序的数组的一个旋转，输出旋转数组的最小元素。 NOTE：给出的所有元素都大于0，若数组大小为0，请返回0。 public static int minNumberRotateArray(int[] array){ if(array.length==0){ return Integer.MAX_VALUE; } ...
Vue常用命令(基础语法词典)
weixin_59457130的博客
10-20 275
自己用来查阅的,实在是记不住,只能回头翻翻(学到新的就会更新) vue基础-插值表达式 声明式渲染/文本插值 语法:{{ 表达式 }} <template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age>=18 ? '成年了':'未成年'}}</h3> </div> </te.
Vue中v-for的使用
狂想曲
11-03 2180
v-for遍历数组和对象 用v-for进行遍历Vue实例中的数据，有多少个数据需要遍历，那么Vue就会帮我们创建多少个对应的标签的。 v-for遍历数组： 用v-for遍历数组，可以拿到数据的下标值和元素的值。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device.
Vue 数组 字典 template v-for 的使用
weixin_30642267的博客
08-11 1137
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="vue...
Vue基本使用
05-30
以下是 Vue 的基本使用方法： 1. 引入 Vue.js 库 ```html <script src="https://cdn.jsdelivr.net/npm/vue"> ``` 2. 创建 Vue 实例 ```javascript var app = new Vue({ // options }) ``` 在实例化 Vue 时，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值