Vue指令(复习用)

总结一下vue的一些指令

1.v-text: 把内容已文本形式展现,偏向于文本的

2.v-html: v-text是把所有的都以文本的形式展现,而v-html能够解析里面的标签

3.v-cloak: 这个指令是用来保持在元素上直到关联实例结束时进行编译(通常我们的数据都是以{{}}的形式渲染出来的,那么这样的渲染与v-html和v-text有什么区别呢?在网络不好的情况下,我们用{{}}的形式渲染会出现闪现{{}},再出现数据,所以将这个指令放在要渲染的标签的父元素上就可以,还要记得写样式display:none当然你可以放在刚开始vue定义的范围的标签上,以达到防止闪烁的效果)

4.v-pre: 主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译

<div>
    <span v-pre>{{msg}}</span>  //这条语句不进行编译
    <span>{{msg}}</span>
</div>

5.v-once: 只会渲染一次，之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能

6.v-if: 实现根据条件渲染

7:v-else: v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

8.v-else-if: 可以链式的使用多次

9.v-show: 也是实现根据条件渲染。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不存在dom中，但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。一般:如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

10.v-for: 根据遍历数组来进行渲染

11.v-bind: 简写(’:’)，动态的绑定一个或者多个特性，常用于动态绑定href,src,class和style等

12.v-model: 实现数据的双向绑定
修饰符:
(1).lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步
(2).number
自动将用户的输入值转化为数值类型
(3) .trim
自动过滤用户输入的首尾空格

13.v-on: 简写(’@’)，主要用来监听dom事件
事件修饰符:
.stop 阻止事件继续传播(阻止冒泡)
.prevent 事件不再重载页面
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 阻止浏览器的默认行为