1：v-text
用法：
<p v-text="message"></p>
功能类似于 <p>{{message}}</p>。区别是：当我们网速很慢或者javascript出错时，页面中会显示{{xxx}}。Vue指令v-text,就是解决这个问题的。
2：v-html
用法：
<span v-html="messageHtml"></span>
如果想要插入html标签，用v-text是输不出来的。这时候我们就需要用v-html标签了。双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。
需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
3：v-show 和 v-if
用法：
<p v-show="isTrue"> </p>
<p v-if="isTrue"> </p>
作用都是判断html中的DOM是否加载或者显示。
v-if 和 v-show 的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：控制的是css的display属性，可以使客户端操作更加流畅。
4：v-for
用法：
<div v-for="item in items">
{{ item.text }}
</div>
v-for就是解决多次渲染的数组，如：数组，对象等。项目中需要哪个html标签渲染，v-for指令就放在哪个标签上。
5：v-on
用法：
<div v-on:click="function()"> </div>
v-on 就是事件监听器，监听DOM事件触发一些js代码。
v-on的缩写： @ ，如： <div @click="function()"> </div>
还有一些修饰符:
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
6：v-bind
用法：
给img标签绑定src：
<img v-bind:src="imageSrc">
v-bind 的缩写语法：
<img :src="imageSrc">
作用：动态地绑定一个或多个特性，或一个组件 prop 到表达式，在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
注意此时 class 和 style 绑定不支持数组和对象
7：v-model
用法：
<input type="text" v-model="modelText">
v-model 实现数据双向绑定，一般绑定在表单元素上，在表单控件或者组件上创建双向绑定。
8：v-pre
用法：
<span v-pre>{{ message }}</span>
在模板中跳过vue的编译，直接输出原始值。如：以上标签输出的结果是 {{message}}
9：v-cloak
用法：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
10：v-once
用法：
<span v-once>This will never change: {{msg}}</span>
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
网友评论