1-2 基本用法-常用指令
目录：
- 指令概念
- vue中常用指令：v-model、v-for、v-on、v-show/v-if
一、指令概念
1.1、什么是指令？
指令是用来扩展html标签的功能，在vue中，指令都是以 v-xxx的。在vue中常用指令如下：
- v-model：双向绑定数据，一般用于表单元素
- v-for：对数组或对象进行循环操作，使用的是v-for指令
- v-on：用来绑定事件
- v-show/v-if：用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后重新创建
二、vue中常用的指令
1、v-model
作用：双向数据绑定，一般用于表单元素，就是：说data中name值变了，那么v-model值也跟着变化，如果v-model绑定值变化，那么data中的name值也会变化。
<body>
<div id="box">
用户名: <input type="text" v-model='name'> #双向绑定data中name的值
<br>
{{ name }}
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:"#box", //vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是允许的
data:{
name:'' //如果在div容器中使用name变量，那么必须在data中需要定义，即使是空值，也不能省略，不然会报错
}
});
</script>
</body>
2、v-for
对数组或对象进行循环操作，使用的是v-for，不是v-repeat。
注：
- 在vue1.0中提供了隐式变量，如$index,$key
- 在vue2.0中去除了隐式变量，已经被废除。
<body>
<div id="box">
<ul>
<!-- 普通循环 -->
<li v-for="value in arr">{{value}}</li>
<li v-for="value in user">{{value}}</li>
<!-- 键值循环 -->
<li v-for="(v,k) in arr">{{k}}={{v}}</li>
<li v-for="(v,k) in user">{{k}}={{v}}</li>
<!--可以直接循环包含重复数据的集合-->
<li v-for="value in arr2">{{value}}</li>
<!--可以通过制定:key属性绑定唯一key，一般绑定索引，当更新新元素时可重用元素，提高效率-->
<li v-for="(v,k) in arr2" :key="k">{{v}}</li>
<!--通过对象取值-->
<li v-for="user in user2">
{{user.id}},{{user.name}},{{user.age}}
</li>
<!--通过对象取值，并加上索引-->
<li v-for="(user,index) in user2">
{{index+1}},{{user.id}},{{user.name}},{{user.age}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:"#box",
data:{
arr:[12,4,5,6,78],
user:{id:9527,name:'帅高高',age:22},
arr2:[12,4,5,6,12],
user2:[
{id:9527,name:'帅高高',age:22},
{id:1001,name:'傻逼鸿',age:28},
{id:1002,name:'林海真丑',age:30},
]
}
});
</script>
</body>
3、v-on
用来绑定事件，用法：v-on:事件="函数"。
<body>
<div id="box">
<!--不传参数，可以直接写函数名show，可以不用写成show()-->
<button v-on:click="show">点我</button>
<button v-on:click="add()">向数组中添加一个元素</button>
<br>
{{arr}}
<hr>
<button v-on:mouseover="show">鼠标经过</button>
<button v-on:dblclick="show">鼠标双击</button>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:"#box",
data:{
arr:[12,34,45,23,5]
},
methods:{ //定义函数
show:function() {
console.log("show方法");
},
add:function() {
//console.log(this); //this表示当前vue实例，this其实就等于 vm
//console.log(this === vm); //测试结果为true
this.arr.push(66); //this或者vm，访问当前实例中的成员
this.show(); //调用show方法
}
}
});
</script>
</body>
4、v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后重新创建，与angular中类似。
<body>
<div id="box">
<!--通过定义函数方式调用-->
<!--<button v-on:click="change">显示/隐藏</button>-->
<!--直接赋值操作,v-on:click 等同于 @click-->
<button @click="flag=!flag">显示/隐藏</button>
<hr>
<!-- 直接通过true或者false显示-->
<!--<div style="width: 100px;height: 100px;background-color: red" v-show="true"></div>-->
<!--通过变量来控制-->
<div style="width: 100px;height: 100px;background-color: red" v-show="flag"></div>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:"#box",
data:{
flag:true
},
methods:{ //定义函数
change:function() {
this.flag = !this.flag;
}
}
});
</script>
</body>
浙公网安备 33010602011771号