模板语法

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

在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

#文本

数据绑定最常见的形式就是使用‘Mustache’语法（双大括号）的文本插值

<span>message:{{message}}</span> //最简单的插值应用

Mustache会代替对应数据对象上的message属性多对应的值。无论何时只要message的值改变了，插值的内容也会跟着更新。

<span v-once>{{once}}</span>

once指令，只会在第一次渲染的时候有效，后面once的值变化都不会影响插值的更新

#纯HTML

双大括号只会讲数据解析成纯文本，而非HTML。想要输出正在的HTML，要用v-html指令

<div v-html="html"></div>

被插入的值都会被当做HTML，数据绑定将会失效。
注意：站点上动态渲染html是非常危险的，因为很容易被XSS攻击，请给可信任内容提供插值，切勿为用户提供内容插值

#属性

Mustache不能在HTML属性中去使用，应该使用v-bind。

<span v-bind:class="red">hello Vue!</span> //添加class属性

这对布尔值也有效

<button v-bind:disabled='result'>Button</button>//如果result等于false，disabled属性就会被移除

#使用javascript表达式

在模板中可以使用js表达式

{{number + 1}}
{{ok ? 'yes' : 'no'}}
{{msg.split(',').reverse().join(',')}}
<p v-bind:id="'item' + id"></p>

以下几种情况不会成功，因为他们都不是表达式

{{var a = 1}}//这是语句
{{if(ok){code}}};//流程控制语句，可用三目运算代替

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量

指令

指令（Directive）是带有V-前缀的特殊属性。

#参数

一些指令可以接受一个参数，在指令后一冒号指明

<p v-bind:id='id'>1111</p>//用相应的更新HTML属性
<p :id='id'></p>//简写
<p v-on:click='fn'>1111</p>//监听dom事件
<p @click='fn'>1111</p>//简写

#修饰符

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

<form v-on:submit.prevent="onSubmit"></form>

过滤器

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式
2.0废弃了了1.0的原生过滤器

{{ message | capitalize }}
new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

官方中文API

Vue