插值

1.文本

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

双括号里的内容会由对象msg的属性值更新而更新。

<span v-once> Message:{{ msg }}</span>

v-once使用时，msg的值改变时，不会更新

2.纯HTML

<div v-html="rawHtml"></div>
插入的内容都会被当做HTML，自然不会数据绑定。

注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。

3.属性

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

v-bind用于响应的更新HTML属性

4.js表达式 vue.js支持js表达式的支持。但是每个绑定只能包含单个表达式：

{{number + 1 }}
{{ OK ? 'Yes' : 'No' }}
//这是对的，但是下面的就是错了。
{{ if (oK) {return message} }}

指令

指令都是带有v- 前缀的特殊属性。例如v-if
指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

1.参数 指令用冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<a v-bind:href="url"> </a>

href 就是参数。v-bind指令就是讲href的属性和url的值绑定。 v-on用于监听dom事件

<a v-on:click="doSomething">
这里的参数是监听的事件名（doSomething），为什么我也还不知道，之后补充上来。

2.修饰符 修饰符就是用 . 指明的特殊后缀，用来指明这个指令用过以特殊的方式绑定。
例如：

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

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()或者event.stopPropagation()： 我们再来几个例子

<!-- 阻止单击事件冒泡 -->  
<a v-on:click.stop="doThis"></a>  

<!-- 提交事件不再重载页面 -->  
<form v-on:submit.prevent="onSubmit"></form>  

<!-- 修饰符可以串联 -->  
<a v-on:click.stop.prevent="doThat">  

<!-- 只有修饰符 -->  
<form v-on:submit.prevent></form>  

<!-- 添加事件侦听器时使用 capture 模式 -->  
<div v-on:click.capture="doThis">...</div>  

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->  
<div v-on:click.self="doThat">...</div>

3.过滤器 过滤器常用在{{}}和v-bind表达式。应该被添加在javascript表达式的尾部，由管道浮指示（|） 过滤器一般只用在文本转换。

{{ message | caitalize }}
{{ message | filterA | filterB }}//过滤器可以串联
{{ message | filterA('arg1', arg2) }}//过滤器是 JavaScript 函数，因此可以接受参数
//这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
//或者
<div v-bind:id="rawId | formatId" ></div>

过滤器函数总接受表达式的值作为第一个参数。

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

4.缩写 v-bind缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on缩写：

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>