Vue.js中原生指令的总结（代码）

目录：

v-text v-html v-show/v-if v-for v-bind/v-on v-model v-once

1、v-text

给标签绑定需要显示的内容

new Vue({
 el: '#id',
 template: `<p v-text="'value:'+val"></p>`,
 data: {
 val: '123'
 }
})// 等同于 ： template: `<p>value:{{val}}</p>`

2、v-html

当绑定的值作为HTML的值显示，而不是字符串(类似于将innerText转为innerHtml)

new Vue({ el: '#id',
 template: `<p v-html="val"></p>`,
 data: {
 val: '<span>123</span>'
 }
})

3、v-show与v-if

接收一个boolean变量，判断该节点是否显示。
区别：
v-show:即在节点上加上一个display:none
v-if:判断该节点是否存在,false时节点不存在,会引起DOM节点重绘

new Vue({
 el: '#id',
 template:
 `<p>
 <span v-show="active"></span>
 <span v-if="active"></span>
 </p>`,
 data: {
 active: false,
 text: 0 
 }
 // <span v-if="active"></span>
 // <span v-else-if="text === 0"></span>
 // <span v-if="active"></span>})

4、v-for

对数组(或对象)进行循环

new Vue({
 el: '#id',
 template: 
 `<p>
 <ul>
 // 遍历数组 
 <li v-for="(item,index) in arr" :key="item">{{item}}</li>
 </ul>
 <ul>
 // 遍历对象 
 <li v-for="(val,key,index) in obj1" :key="key">{{key}} : {{val}}</li>
 </ul>
 </p>`,
 data: {
 arr: [1, 2, 3],
 obj1: {
 a: '123',
 b: '456'
 c: '7'
 }
 }
})

4、v-bind与v-on

v-bind：单向绑定数据
v-on：绑定事件

// v-bind<p v-bind:class="val"></p>// 简写方式:<p :class="val"></p>// 其中val是data中的数据

// v-on<p v-on:click="clickButh"></p>// 简写方式:<p @click="clickButh"></p>// 其中clickButn是methods中的方法

5、v-model

双向绑定数据

new Vue({
 el: '#id',
 template: 
 `<p>
 <input type="text" v-model="val">
 </p>`,
 data: { val: '111'
 }
})

6、v-once

只绑定一次，当绑定的数据发生改变时，节点上的数据不会再改变

new Vue({
 el: '#id',
 template: 
 `<p v-once >Text: {{val}}</p>`,
 data: {
 val: '111'
 }
})