Vue指令

vue指令

vue属性的应用

el属性 指定控制区域

data属性 指定数据

methods对象 在该属性中定义当前vue实例中所有可用的方法

插值表达式 和 v-cloak的使用

如果网速较慢 script包 请求速度较慢会出现 插值表达式(如下图)

此时服务器会一直请求vue-2.4.0.js

通过v-cloak 及添加样式 来隐藏请求过程(如下图)

使用v-cloak指令能够解决插值表达式闪烁的问题

v-text

此时v-text与v-cloak没有太大差别 都会覆盖原有元素中的内容

区别
1. 默认v-text没有闪烁问题
2. v-text会覆盖元素中原本的内容  但是插值表达式只会替换自己的占位符  不会把整个元素的内容清空

v-html

v-html指令能识别 html 样式

v-bind

v-bind 是vue中 提供的用于绑定属性的指令

v-bind 中可以写合法的JS表达式(如下图)

注意: v-bind:指令可以简写为 :要绑定的属性(如下图)

v-on

vue中 提供了v-on: 事件绑定机制

注意: v-on:指令可以简写为 @要绑定的事件

事件修饰符(可串联)

1. 使用 .stop 阻止冒泡
   
2. 使用 .prevent 阻止默认事件
   
3. 使用 .capture 添加事件侦听器使用时间捕获模式 / 实现捕获触发事件的机制
   
4. 使用 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 / 实现只有点击当前元素时候，才会触发事件处理函数
   
5. 使用 .once 事件只触发一次 / 只触发一次事件处理函数
   
   .self 和 .stop 的区别 : .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为

v-model(唯一双向数据绑定指令)

使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定

注意 v-model 只能运用在表单元素中 如 input(radio text address email) select checkbox textarea

v-for 和 key属性

v-for循环普通数组如下图

v-for循环对象数组如下图

v-for循环对象如下图

注意: 在遍历对象身上的键值的时候, 除了有 val key , 在第三个位置还有一个索引

v-for迭代数字如下图
in 后面我们放过 普通数组，对象数组，对象， 还可以放数字
注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始

v-for循环中key属性的使用如下图

注意: 
1.  v-for 循环的时候，key 属性只能使用 number 获取string
2. key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值

在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值