數據綁定最多見的形式就是使用 「Mustache」 語法（雙大括號）的文本插值：javascript
<span>Message: {{ msg }}</span>
Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。
經過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上全部的數據綁定：html
<span v-once>這個將不會改變: {{ msg }}</span>
Mustache語法是將數據渲染到模板，可是渲染上去的是純文本，咱們不可以輸出真正的HTML。若是咱們須要渲染一個HTML，咱們須要shi用v-html指令：vue
<div id="box" v-html="msg"></div>
var vm = new Vue({
el:"#box",
data:{
msg:"<h1>血染的風采</h1>"
}
})
血染的風采
mustache 語法不能做用在 HTML 特性上，遇到這種狀況應該使用 v-bind 指令：java
<div id="box" v-html="msg" v-bind:index="msg"></div>
var vm = new Vue({
el:"#box",
data:{
msg:100
}
})
控制檯可看div的index爲101
這一樣適用於布爾類特性，若是求值結果是 false 的值，則該特性將會被刪除：數組
<button v-bind:disabled="isButtonDisabled">Button</button>
// 當isButtonDisabled爲true時，button不能夠點擊，爲false時，disabled這個屬性會刪除，button能夠點擊。
咱們能夠在mustache語法中使用javascript表達式，例如：緩存
<div id="box">{{msg+1}}</div>
var vm = new Vue({
el:"#box",
data:{
msg:100
}
})
101
可是在Mustache語法中不能是同語句。例如：app
{{var a = 1}}
這個語句就不會被執行。異步
指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式（v-for 是例外狀況，稍後咱們再討論）。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。函數
<div id="box" x-if="seen">{{msg}}</div>
var vm = new Vue({
el:"#box",
data:{
msg:"汪派傳人",
seen:false
}
})
汪派傳人
當咱們更改了seen爲false時，div不會被顯示。性能
一些指令可以接收一個"參數"，在指令名稱以後以冒號表示，例如上面哦咱們使用過的V-bind指令。
<button v-bind:disabled="isButtonDisabled">Button</button>
在這裏disabled是參數，告知 v-bind 指令將該元素的 disabled 屬性與表達式 isButtonDisabled 的值綁定。
另外一個例子是 v-on 指令，它用於監聽 DOM 事件：
<a v-on:click="doSomething">
修飾符（Modifiers）是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
<div v-on:click.prevent="a">{{msg}}</div>
在js中，咱們在Vue實例中使用methods屬性使用修飾符
var vm = new Vue({
el:"#box",
data:{
msg:"汪派傳人",
},
methods:{
a:function(){
console.log("執行")
}
}
})
控制檯打印
執行
Vue.js 容許你自定義過濾器，可被用做一些常見的文本格式化。過濾器能夠用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符指示：
<div v-on:click.prevent="a">{{msg|fangfa}}</div>
在js中，咱們在Vue實例中使用filters屬性使用修飾符
var vm = new Vue({
el:"#box",
data:{
msg:"vue.js",
},
filters:{
fangfa:function(value){
console.log(value)
return value.split("").reverse().join("")
}
},
})
sj.euv
過濾器能夠串聯，例如
<div v-on:click.prevent="a">{{msg|fangfa}}</div>
var vm = new Vue({
el:"#box",
data:{
msg:"vue.js",
},
filters:{
fangfa:function(value){
console.log(value)
return value.split("").reverse().join("")
},
fangfa2:function(value){
return value.split("").reverse().join("")
}
},
})
vue.js
過濾器是 JavaScript 函數，所以能夠接收參數：
{{ msg | fangfa('arg1', arg2) }}
這裏，fangfa 被定義爲接收三個參數的過濾器函數。其中 msg 的值做爲第一個參數，普通字符串 'arg1' 做爲第二個參數，表達式 arg2 取值後的值做爲第三個參數。
v- 前綴做爲一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 爲現有標籤添加動態行爲(dynamic behavior)時，v- 前綴頗有幫助，然而，對於一些頻繁用到的指令來講，就會感到使用繁瑣。同時，在構建由 Vue.js 管理全部模板的單頁面應用程序(SPA - single page application)時，v- 前綴也變得沒那麼重要了。所以，Vue.js 爲 v-bind 和 v-on 這兩個最經常使用的指令，提供了特定簡寫：
用一個 : 表示
<!-- 縮寫前 --> <a v-bind:href="url"></a>
<!-- 縮寫後 --> <a :href="url"></a>
用@表示
<!-- 縮寫前 --> <a v-on:click="dianji"></a>
<!-- 縮寫後 --> <a @click="dianji"></a>
<div id="box">
<p>{{reversedmsg}}</p>
</div>
var vm = new Vue({
el:"#box",
data:{
msg:"abcd"
},
computed:{
reversedmsg:function(){
return this.msg.split('').reverse().join('')
}
}
})
dcba
計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 msg 尚未發生改變，屢次訪問 reversedmsg 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。
口說無憑，下面咱們測試一下他是否具備緩存
<div id="box">
<p>{{resversedmsg}}</p>
<p>{{resversedmsg}}</p>
<p>{{resversedmsg}}</p>
<p>{{resversedmsg}}</p>
</div>
var a = 1;
var vm = new Vue({
el:"#box",
data:{
msg:"abcd"
},
computed:{
resversedmsg:function(){
a++;
return a
}
}
})
2 2 2 2
resversedmsg第一次調用時,a++;這時a=2,第二次調用時，結果是2;這就證實了咱們剛說的只有第一次調用時進行計算,而之後的調用由於msg沒有改變，因此直接調用了緩存的數據。
<div id="box">
<p>{{remsg()}}</p>
<p>{{remsg()}}</p>
<p>{{remsg()}}</p>
<p>{{remsg()}}</p>
</div>
var a = 1;
var vm = new Vue({
el:"#box",
data:{
msg:"abcd"
},
methods: {
remsg: function () {
a++,
return a
}
}
})
2 3 4 5
這就說明了 method 相比 計算屬性 來講，假設咱們有一個性能開銷比較大的的計算屬性 A，它須要遍歷一個極大的數組和作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存，咱們將不可避免的屢次執行 A 的 getter！若是你不但願有緩存，請用 method 替代。
Vue 確實提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：watch 屬性。當你有一些數據須要隨着其它數據變更而變更時，你很容易濫用 watch。一般更好的想法是使用 computed 屬性而不是命令式的 watch 回調。
<div id="box">
<p>{{msg3}}</p>
<input type="text" v-model="msg1">
<input type="text" v-model="msg2">
</div>
var vm = new Vue({
el:"#box",
data:{
msg:"abcd",
msg1:1,
msg2:2,
msg3:3,
},
watch:{
msg1:function(val){
this.msg3=val+this.msg2
}
msg2:function(val){
this.msg3=this.msg1+val
}
}
})
然而咱們會發現咱們還能夠用計算屬性來控制msg3的改變
var vm = new Vue({
el:"#box",
data:{
msg:"abcd",
msg1:1,
msg2:2,
// msg3:3,
},
computed: {
msg3: {
function () {
return this.msg1 + this.msg2
}
}
}
})
當咱們使用計算屬性時，計算屬性默認時getter（獲取）,不過咱們有時還須要更改（setter）
computed: {
msg3: {
// getter
get: function () {
return this.msg1 + this.msg2
},
// setter
set: function (newValue) {
this.msg1=newValue
}
}
}
當咱們在控制檯上輸入vm.msg3=100時,msg1也會隨之改變。
雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的 watcher。
var vm = new Vue({
el: '#box',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 若是 question 發生改變，這個函數就會運行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
}
});
在這個實例中，watchers會監聽data裏的question屬性，當question發生改變時，answer會發生改變。使用 watch 選項容許咱們執行異步操做 (訪問一個 API)，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這是計算屬性沒法作到的。