Vue 知识整理—03-指令3

一：v-on的缩写和事件修饰符

事件修饰符：

    . stop 阻止冒泡

    . prevent 阻止默认事件

    . capture 添加事件侦听器时使用事件捕获模式

    . self只当事件在该元素本身（比如不是子元素）触发时触发回调

    . once 事件只触发一次

二：v-model和双向数据绑定

v-bind只能实现数据的单向绑定，从 M 到 V ，v-model 可以实现数据的双向绑定，表单元素和 Model中的数据

   注意：v-model 只能运用在表单元素中

                {   input（radio ，text ，address ，email 。。。）     select      checkbox     textarea}

三：v-bind 属性设置样式

~~~ vue中通过属性绑定（v-bind：）为元素设置 class 样式

   ---使用 class 样式

1. 直接传递一个数组

2. 数组中使用三元表达式

3. 在数组中使用对象代替三元表达式（数组中嵌套对象）

4. 直接使用对象

~~~ vue中通过属性绑定（v-bind：）为元素绑定 style 行内样式

   ---使用内联样式

1. 直接在元素上设置 : style  

2. 将样式定义到 data 中，直接引用到 : style 中

3. 在 : style 中通过数组，引用多个 data 上的样式对象

四：v-for 的四种使用方式（与key属性）

1. 根据一组数组或对象的选项列表进行渲染。

2. v-for 指令需要使用 item in items 形式的特殊语法，

3. 是源数据数组 /对象

4. 当要渲染相似的标签结构时用v-for

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)    

• 变量数组和对象

• 数组 语法： v-for="(item,i) in list"

• 对象 语法： v-for=“(v,k,i) in obj”

• 补充 ： 在每一项数据 追加一个属性 :key=“唯一标识” 建议如果有ID使用ID没有考虑索引

        

            
            
            
for="item in list">{{item}}
            

            
for="(item,index) in list">{{item}}----{{index}}
            
            

            
            
            
for="value in per">{{value}}
            

            
for="(value,key) in per">{{value}}----{{key}}
            

            
for="(value,key,i) in per">{{value}}----{{key}}--{{i}}