vue的指令

vue是通过大量的指令来实现的某种功能  指令结构：v-指令名，

注意事项： angular与vue类似，也使用了大量的指令，但是指令以ng-开头，

vue实例化中的this指向当前实例化的vue对象本身，data中的数据和methods中的方法，都挂载在实例化对象上，可直接调用。

1. 条件判断指令

v-if： 值为布尔值，作用：当为true时，该指令所在的标签存在并在页面中显示，当值为false时，该指令所绑定的标签不存在。v-if每次都会重新删除或者创建元素，有较高的切换性能消耗， v-if 与v-else 单指令

v-if,v-else,v-else-if,v-else 多条件

注意：这两种条件判断的指令所绑定的标签，必须连贯起来写，否则就没有效果，会报错

v-show：每次不会重新进行dom的删除和创建的操作，只是切换了元素的display:none样式，有较高的初始渲染消耗，  作用:当为true时，该指令所在的标签存在并在页面中显示和v-if一样的用法，但是当为false时，该指令所绑定的标签存在，但不显示display:none 这个与v-if不一致。

如果元素设计到频繁的切换操作，最好不要使用v-if，如果元素可能永远不会被显示出来被用户看到，则推荐使用v-if

2. 循环遍历指令

v-for: 遍历数组： 数组元素 in 数组名称  或者  （数组元素，索引值） in 数组名称

v-for: 遍历对象：  value in 对象名称/ （value，key） in 对象名称 /  （value，key，index） in 对象名称

3. 事件绑定指令

v-on: 简写为@，执行函数的时候可以不加括号，默认传入的参数是当前事件的本身，不能传递其他的参数

加括号的时候，传入的参数：$event，指向当前事件本身，也可以传递其他的参数

 

事件的修饰符：具有特定功能的属性

.prevent----阻止默认事件的发生

.once------当前事件只执行一次

.stop------阻止事件的传播

.capture-----改变事件传播机制为捕获

.self----只有标签本身才能触发这个事件，避开了冒泡和捕获

4. 双向数据绑定

双向数据绑定：v-model  绑定输入框、下拉列表、单选多选等表单控件

注意事项： v-model 绑定的变量需要先声明

v-model是v-bind:value 与v-on:input 的语法糖

v-model绑定的是单选按钮的值，绑定的值与value属性的值保持一致，所以单选、多选、下拉列表都必须有value属性，这样才会知道选中的是哪个。

<input type="radio" v-model="isMale" value="true">男
<input type="radio" v-model="isMale" value="false">女

默认情况下，输入框中的内容所属的数据类型是字符串

修饰符： .number-----将字符串数字转变成数字类型

.trim  -----去掉字符串中前后的空格

.lazy-----将input事件转换成change事件

5.属性绑定

属性绑定的指令是v-bind： 简写为 ：

：标签的属性名（自定义）=变量名称（data中的变量）

给标签绑定动态的属性，即属性值可以是变量