js原生代码 关于有一定的参考价值，有需要的朋友可以参考一下

  本篇文章给大家带来的内容是关于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: `
`,
data: {
 val: '123'
}
})// 等同于 ： template: `  value:{{val}}
`

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

new Vue({ el: '#id',
template: `
`,
data: {
 val: '123'
}
})

  接收一个boolean变量js原生代码，判断该节点是否显示。

  区别：

  v-show:即在节点上加上一个display:none

  v-if:判断该节点是否存在,false时节点不存在,会引起DOM节点重绘

new Vue({
el: '#id',
template:
 `
 
`,
data: {
 active: false,
 text: 0 
}
//  
//  
//  })

  4、v-for

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

new Vue({
el: '#id',
template: 
`
 // 遍历数组 
{{item}}
  
  
// 遍历对象 
{{key}} : {{val}} 
`,
data: {
 arr: [1, 2, 3],
 obj1: {
  a: '123',
  b: '456'
  c: '789'
}
}
})

  v-bind：单向绑定数据

  v-on：绑定事件

// v-bind

// 简写方式:  
// 其中val是data中的数据
// v-on  
// 简写方式:  
// 其中clickButn是methods中的方法

  双向绑定数据

new Vue({
el: '#id',
template: 
`
 
`,
data: {  val: '111'
}
})

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

new Vue({
el: '#id',
template: 
`
Text: {{val}}
`,
data: {
 val: '111'
}
})