（八）傳入的資料繫結
先建立一個物件（假如是obj），然後將他傳入Vue例項中，作為data屬性的值，那麼
①obj的值的變化，將影響Vue例項中的值的變化；
②相反一樣；
③可以在Vue例項外面操縱obj，一樣對Vue例項有影響；
④獲取obj.a的值（假如他有這個屬性），可以通過Vue例項（例如變數vm），vm.a這樣的形式來獲取（他們是等價的，也是繫結的）；
⑤後續新增的數值是無效的
例如：
<div id=>
- {{a}}
- >+1</button>
- obj = {a: 1}
- vm = Vue({
- el: ,
- add() {
- </script>
add函式中兩條語句效果是等價的，都可以讓顯示的值+1
但若將程式碼改成這樣：
var var Vue({
- ,
- data: obj
- function }
那麼在點選按鈕後，並不會顯示值（沒有繫結）。
注意：即使修改為vm.a=1也是無效的
準確的說，在Vue例項建立後，新增新的屬性到例項上，是不會觸發檢視更新的。
在以上情況下，obj.a === vm.a ，注意，a之前沒有data。
函式：
function (vm.a === obj.a) {
- }
其判斷條件是true
（九）Vue例項暴露的介面
在上一篇中，提到vm.a=obj.a這個；然而我們並沒有獲取全部的data這個屬性；
而Vue提供了幾個暴露的介面：
|
介面（假設例項為vm） |
效果 |
|
vm.$data |
是vm的data屬性 |
|
vm.$el |
是vm的el屬性所指向的dom結點 |
|
vm.$watch |
示例： vm.$watch(“a”,function(newVal, oldVal){}) 當data裡的a變化時，會觸發回撥函式 |
更多的可以檢視
搜尋 $ 作為關鍵詞來檢視。
（十一）$mount()手動掛載
當Vue例項沒有el屬性時，則該例項尚沒有掛載到某個dom中；
假如需要延遲掛載，可以在之後手動呼叫vm.$mount()方法來掛載。例如：
<div id=>
- {{a}}
- >掛載</button>
- obj = {a: 1}
- vm = Vue({
- data: obj
- test() {
- );
- }
初始，顯示的是{{a}}
當點選按鈕後，變成了1
（十二）用Vue的v-for寫一個表格
<!DOCTYPE html>
- <html>
- ></script>
- </head>
- >
- >點選掛載表格</button>
- </div>
- obj = {
- , name: , description: , clickButton: },
- , name: , description: , clickButton: },
- {id: , name: , description: , clickButton: },
- , name: , description: , clickButton: },
- {id: , name: , description: , clickButton: },
- vm = Vue({
- data: obj,
- +
- +
- +
- ,
- (index) {
- + index + )
- }
- load() {
- vm.$mount();
- </html>
（十三）資料繫結：
html標籤的純文字顯示／被當做html標籤處理；
插值單次更新；
①使用兩個大括號時，假如字串內容是html標籤，那麼不會被轉義，而是正常顯示；
②使用三個打括號時，字串內的html標籤會被直接轉義，
例如：
<div id=>
- {{html}}
- vm = Vue({
- el:,
- </script>
螢幕上顯示內容是：
<span>span</span>
如果是三個大括號包含變數名：
<div id=>
- {{{html}}}
- vm = Vue({
- el:,
- load() {
- vm.$mount();
- </script>
顯示的內容則只有
span
③插入內容的資料繫結無效（在沒有使用partials的情況下）
使用兩個大括號或者三個大括號都一樣
例如，將②中的html改為以下值
data: {
- html:
- }
顯示結果乃是：
span{{val}}
說明沒有繫結資料；
按照說明，使用partials可以繫結
http://cn.vuejs.org/api/#partial
不過不會用，等研究明白了再說
④禁止在使用者提交的內容上動態渲染，否則會受到XSS攻擊
⑤插值也可以用在html標籤的屬性中，例如class，或者id，或者其他。
但是Vue.js的指令和特殊特性內是不可以用插值的。
（十四）繫結表示式
插值的位置，可以使用JavaScript的表示式，例如：
<div id=>
- {{html?html:val}}
- vm = Vue({
- el: ,
- ,
- }
- </script>
例如以上示例，
假如有html值，則輸出hmtl值，否則輸出val值；
也可以輸出字串，例如改為：
{{html?html:}}
則輸出no words
但是隻能輸出表示式，不能輸出比如函式，或者直接放個v-for標籤之類的。
但是我推斷後者應該可以，可能是我寫的方法不對。
（十五）過濾器
①簡單來說，在插值中，加入管道符“|”，然後過濾器會生效。
例如：
capitalize這個過濾器，會將字串的首字母大寫
<div id=>
- {{{html|capitalize}}}
- vm = Vue({
- el: ,
- ,
- }
- </script>
輸出值是Abc
如果是漢字、數字、或者是本身首字母就大寫了，則無反應。
②過濾器不能充當表示式使用，因此不能在表示式內使用過濾器，只能在表示式的後面使用。
例如：
{{html[0]|capitalize}}
是可以的，會輸出html的首個字母並將其大寫；
但
(html|capitalize)[0]
是會報錯的（不加括號也報錯），說明，不能將過濾器視為表示式的一部分
③過濾器可以加引數。
第一個引數：固定為表示式的值（被過濾目標）；
第二個引數，過濾器後面的第一個單詞；
第三個引數，過濾器後面的第二個單詞，依次類推。
引數加引號則視為字串，引數不加引號則視為表示式，表示式的值作為引數傳遞給過濾器。
官方例子是：
{{ message | filterA 'arg1' arg2 }}
④過濾器可以自己手寫
（十六）指令
①指令（Directives）就是特殊的，以帶有字首v-的特性。
簡單粗暴來說，標籤裡v-開頭的就是指令（當然，要Vue能支援）。
指令的值限定為 繫結表示式，就是等號後引號裡的。
如：
<div id=>
- <div v-=>
- >消失上一行</button>
- </div>
- vm = Vue({
- ,
- data: {
- ,
- val:
- test() {
- vm.html = ;
- </script>
輸出11
其中<div v-if=”html”>就是指令，
可以通過點選按鈕讓那一行消失（因為html的值被設定為空）
②指令後面可以新增引數：
有些指令（例如v-bind）可以在名稱後等號前，新增一個屬性，這個屬性的作用是響應性的更新HTML特性。
例如：
<style>
- .white {
- >
- =>背景顏色變化</div>
- <button onclick=>消失上一行</button>
- vm = Vue({
- el: ,
- test() {
- vm.BC = ;
- </script>
初始情況下，這個div的class和data裡的BC繫結，由於BC的值是black，那麼相當於v-bind所在的標籤的class=”black”，所以初始情況下，背景顏色為黑色。
當點選按鈕後，BC的值被更改為white，那麼相當於標籤的class=”white”，而類white的背景顏色為白色，所以該div的背景顏色變成了白色。
類似的有v-on:click事件，表示監視的是click事件，也可以改為
<div v-on:mouseup=>背景顏色變化</div>
表示該標籤當滑鼠彈起的時候，執行methods的alert函式。
③修飾符
修飾符用於表示指令應當以特殊的方式進行繫結。
例如：.literal修飾符告訴指令應當將他的值解析為字串，而不是表示式
或者是keydown.enter表示按Enter鍵時呼叫函式
<input v-on:keydown.enter=></input>
④縮寫：
v-on的縮寫是@ shift+數字2
v-bind的縮寫是:就是冒號
轉載處：http://blog.csdn.net/sinat_17775997/article/details/52399818