Vue.js 基本语法笔记（一）

一.Vue差值操作

1.mustache语法

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

  
  



  
{{message}}
  
{{message}}, 李银河
  
{{firstName + lastName}}
  
{{firstName +' ' + lastName}}
  
{{firstName}} {{lastName}}
  
{{counter * 2}}

2.v-cloak指令与使用

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  
  
  



  
{{message}}
  
{{message}}

3.v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

  
  



  
{{message}}
  

4.v-once指令的使用

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

  
  



  
{{message}}
  
{{message}}

5.v-pre的指令与操作

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

  
  



  
{{message}}
  
{{message}}

  
{{message}}

6.v-text指令与使用

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

  
  



  
{{message}}