模板语法、动态参数、计算属性与侦听器

vue允许将DOM与Vue实例数据进行绑定

All Vue.js templates are valid HTML 

Vue compiles the templates into Virtual DOM render functions.

如果不用模板，则需要直接编写渲染函数并需要JSX的支持。

 “Mustache” syntax (double curly braces):

<span v-once>This will never change: {{ msg }}</span> //v-once阻止插值更新

The double mustaches interprets the data as plain text, not HTML.

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

The contents of the span will be replaced with the value of the  rawHtml property

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive:

动态ID：<div v-bind:id="dynamicId"></div>

动态按钮：<button v-bind:disabled="isButtonDisabled">Button</button>

每个绑定都只能支持单个JS表达式，即比较简单的表达式，条件，循环也不行

{{ ok ? 'YES' : 'NO' }}/{{ number + 1 }}表达式不能出现用户定义的全局变量，一般是data中的property

Directives are special attributes with the v- prefix. 

Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for）

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

一些指令可以携带参数，用冒号分隔，如v-bind:title = ''message"

动态参数：从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<span v-bind:[dynamicArg]="dataProperty"></span> // dynamicArg是通过JS表达式求出的html属性名

上述的dynamicArg会被浏览器强制转换为dynamicarg,即避免大写

dynamicarg不仅可以是一个JS表达式也可以是一个data property,其值是html属性名

 “Mustache” syntax 不仅可以应用在data property上，还可以应用在conputed property上.computed property 也可以通过vm.propertyName获取，并且是实时响应。

Computed Caching vs Methods

 “Mustache” syntax 还可以应用在methods上,此时在模板中不要忘记方法后面的()

 the difference is that computed properties are cached based on their reactive dependencies. 

 When you have some data that needs to change based on some other data, it is tempting to overuse watch -

Computed Setter

computed: {  fullName: {    // getter    get: function () {      return this.firstName + ' ' + this.lastName    },    // setter    set: function (newValue) {      var names = newValue.split(' ')      this.firstName = names[0]      this.lastName = names[names.length - 1]    }  }} when you run vm.fullName = 'John Doe', the setter will be invoked and vm.firstName and vm.lastName will be updated accordingly.

上面的代码表明computed的property(fullName)也可以有多个property，但只能时get和set,名字是固定的，默认是get（平时写的都是就是set，只是省略了set的匿名函数）。set只能自己设置且只接收一个参数。

Watch option

watch option is most useful when you want to perform asynchronous or expensive operations in response to changing data.

watch可以异步监视，computed只能同步监视