vue指令

标签：vue 绑定 指令 key 修饰符 元素 model class

指令

（1）表单绑定

        v-model :双向绑定

         多个checkbox，v-model="数组"，:value=" "

         单个checkbox,v-model="布尔值"

         应用：爱好选择，购物框选择等

 

        文本框text,textarea，v-model="字符串"

        应用：用户名

 

        多个redio，v-model="字符串”

 

（2）事件绑定

        v-on  

        @click="方法名"    方法在methods对象中定义

        @change=" "，当状态发生改变的时候执行，比如购物车的全选/全不选功能实现需要绑定change事件，而不是click事件

        事件修饰符：

              .stop : 防止冒泡

              .self ：自己执行

              .once ：只执行一次

              .prevent ：禁止默认行为     <a>禁止跳转，表单验证

        按键修饰符：

               @keyup.center

 

（3）列表渲染

         v-for：遍历的对象两种

           把一个数组对应成一组元素，或者遍历一个对象的属性

           v-for="item,index  in intems" :key="index"

           v-for="value,key in object"  :key="key"

       tip:items是源数据，item是被迭代数据元素的别名

 

重点：设置  :key  

           便于跟踪每个节点的身份，从而重新排序现有的元素

           理想的key值是每项都有且唯一的id

 

（4）条件渲染

          v-if：动态的创建和删除元素

          v-show：动态的显示和隐藏元素，相当于display属性

 

（5）class和style绑定

          v-bind:class          :class=" "

 

标签：vue,绑定,指令,key,修饰符,元素,model,class
From： https://www.cnblogs.com/XueTingG/p/17042965.html