Vue 常用系统指令

v-cloak

• 该指令不需要 表达式，可以解决插值表达式 闪烁 问题。
• 这个指令会在 Vue 实例编译结束时，从绑定的 HTML 元素上移除；该指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 CSS:

  
  
  1.  `/*通过属性选择器设置其隐藏*/`
  2.  `[v-cloak] {` 
  3.      `display: none;`
  4.  `}`
  
  

  HTML:

  
  
  1.  `<div id="app">`
  2.      `<h2 v-cloak>{`
  3.       `{ msg }}</h2>`
  4.  `</div>`
  
  

  JS:

  
  
  1.  `var vm = new Vue({` 
  2.      `el: "#app",`
  3.      `data: {` 
  4.          `msg: 'v-cloak'`
  5.      `}`
  6.  `})`
  
  

v-text

• 可以将一段文本渲染到指定的元素中，类似于 innerText ，不会解析文本中的标签。
• 与插值表达式不同，该指令渲染的数据会覆盖原本的内容。
• v-text 指令只能在双标签中使用，没有闪烁问题。

  
  
  1.  `<p v-text="msg">这里的内容会被覆盖</p>`
  
  

  注： 使用 vue 指令时，插值表达式的 “{ {}}” 需要省略。

v-html

• 将一段文本渲染到指定的元素中，其中的内容会被当做 HTML 进行解析，若没有 HTML 则与 v-text 和 “{ {}}” 作用相同。
• 插值表达式和 v-text 会将数据解释为纯文本，而非 HTML 。

  
  
  1.  `<p v-html="msg">这里的内容会被覆盖</p>`