Vue.js 使用了基于 HTML 的模版语法，可以声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模版都是合法的 HTML 语法，能够被遵循规范的浏览器和 HTML 解析器解析。

底层的实现上，Vue 将模版编译称虚拟的 DOM 渲染函数，结合响应系统，Vue 能够智能地计算出最少需要渲染多少组件，并且把 DOM 操作次数减少到最少。

插值语法

双大括号插值

是数据绑定最常见的形式，使用 双大括号 进行文本插值。

• 功能： 用于解析标签体的内容（指定标签体的内容）；

• 语法： 如下：

  <span>Message: {{ msg }}</span>
  

  双大括号中的内容需要是 JavaScript 表达式。

  区分 JavaScript 表达式 和 JavaScript 代码（语句）：

  • 表达式：会产生一个值，放在需要使用值的地方；（可以讲表达式看作是特殊的 JavaScript 语句（代码））
    • a
    • a+b
    • demo()
    • x === y ? ’a’ : ’b’
  • 代码（语句）：
    • if() { }
    • for() { }

  并且模版表达式都被放在一个沙盒中，只能访问 全局变量的一个白名单 (opens new window) 例如 Math / Date 。不应该在模版表达式中试图访问用户定义的全局变量。

🌰 例子 / JavaScript 表达式：

{{ number + 1}}
{{ ok ? 'Yes' : 'No'}}

v-html

用于将 html 代码渲染成 HTML 内容。

🌰 例子：

<span v-html="rawHtml"></span></p>

rwaHtml 的内容为 <span style="color: red">This should be red.</span> 。

最好只对可信的内容使用 HTML 差值，否则会容易导致 XSS 攻击。

v-bind:*

HTML 标签的特性（Attribute）并不能使用 双大括号 进行数据绑定，所以可以使用 v-bind 指令。

🌰 例子：

<div v-bind:id="dynamicId">
  ...
</div>

🌰 例子 / 对于布尔类型的特性：

<button v-bind:disabled="isButtonDisabled">
  Button
</button>

只要 isButtonDisabled 就意味着 true 。如果 isButtonDisabled 的值为 null / undefined / false ，那么 disabled 特性不会被包含在渲染出来的 <button> 中。

🌰 例子 / v-bind 使用 JavaScript 表达式：

<div v-bind:id="'list-' + id">
  
</div>

指令语法 v-*

• 功能： 解析标签（包括：标签属性、标签体内容、绑定事件）；当表达式的值发生改变时，将其产生的连带影响，响应式的作用于 DOM。

• 语法： v-bind:href='xxxx' 中的 xxxx 会作为 JavaScript 的表达式解析。

数据绑定

分为两种： 单向和双向；

单向数据绑定

语法： v-bind:href='xxx' 或者简写为 :href ；

特点： 数据只能从 data 流向页面；

双向数据绑定

语法： v-model:value='xxx' 或者简写为 v-model='xxx' ；（默认收集 value 值）

特点：数据不仅能从 data 流向页面，还可以从页面流向 data ；

⚠️ 注意：双向绑定一半应用在表单类的元素（输入类）；

⚠️ 补充内容： el 和 data 的另一种写法：

除了上面在定义 vue 实例时同时指定容器以外，

1. 分析 vue 实例对象：

   

   $ 开头的属性和方法供我们使用。可以在原型中找到 $mount ：

   

2. 所以用 $mount(‘’) 也能指定容器：（ el 的第二种写法）

   v.$('#root');
   

   适合定义 vue 实例后，在考虑置顶哪个容器使用该实例的情况。

除了 data 用对象式写的方法以外，还可以使用函数式的写法：（学习组件时必须使用）

new Vue({
  data:function() {
		return {
      // console.log('@@@',this)
      name: 'simon'
    }
  }
})

不能使用箭头函数（ this 对象会指向 window 对象），使用简写函数也可：

new Vue({
  data(){
    return {
      name: 'simon'
    }
  }
})