原教程：
http://cn.vuejs.org/guide/instance.html
http://cn.vuejs.org/guide/syntax.html
本博文是在原教程的基礎上加上執行個體，并嘗試說明的更詳細。
如圖：（我自己翻譯的中文版，英文版請檢視本博文頂部的，第一個連結）
先建立一個對象（假如是obj），然後将他傳入vue執行個體中，作為data屬性的值，那麼
①obj的值的變化，将影響vue執行個體中的值的變化；
②相反一樣；
③可以在vue執行個體外面操縱obj，一樣對vue執行個體有影響；
④擷取obj.a的值（假如他有這個屬性），可以通過vue執行個體（例如變量vm），vm.a這樣的形式來擷取（他們是等價的，也是綁定的）；
⑤後續添加的數值是無效的
例如：
<div id="app">
{{a}}
</div>
<button onclick="add()">+1</button>
<script>
var obj = {a: 1}
var vm = new vue({
el: '#app',
data: obj
})
function add() {
//vm.a++;
obj.a++;
}
</script>
add函數中兩條語句效果是等價的，都可以讓顯示的值+1
但若将代碼改成這樣：
var obj = {b: 1}
var vm = new vue({
el: '#app',
data: obj
})
function add() {
obj.a = 1;
}
那麼在點選按鈕後，并不會顯示值（沒有綁定）。
注意：即使修改為vm.a=1也是無效的
準确的說，在vue執行個體建立後，添加新的屬性到執行個體上，是不會觸發視圖更新的。
在以上情況下，obj.a === vm.a ，注意，a之前沒有data。
函數：
function test() {
if (vm.a === obj.a) {
console.log("vm.a === obj.a");
其判斷條件是true
在上一篇中，提到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變化時，會觸發回調函數
更多的可以檢視
<a target="_blank" href="http://cn.vuejs.org/api/">http://cn.vuejs.org/api/</a>
搜尋 $ 作為關鍵詞來檢視。
當vue執行個體沒有el屬性時，則該執行個體尚沒有挂載到某個dom中；
假如需要延遲挂載，可以在之後手動調用vm.$mount()方法來挂載。例如：
<button onclick="test()">挂載</button>
function test() {
vm.$mount("#app");
初始，顯示的是{{a}}
當點選按鈕後，變成了1
<!doctype html>
<html>
<head>
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<button onclick="load()">點選挂載表格</button>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #888;
border-top: 1px solid #888;
background: #efefef;
th, td {
border-right: 1px solid #888;
border-bottom: 1px solid #888;
padding: 5px 15px;
th {
font-weight: bold;
background: #ccc;
</style>
var obj = {
grid: [
{id: "id", name: "名字", description: "描述", clickbutton: "點選事件"},
{id: "1", name: "a", description: "amorous", clickbutton: "點選彈窗"},
{id: "2", name: "b", description: "beautiful", clickbutton: "點選彈窗"},
{id: "3", name: "c", description: "clever", clickbutton: "點選彈窗"},
{id: "4", name: "d", description: "delicious", clickbutton: "點選彈窗"},
]
data: obj,
template: '<table><tr v-for="row in grid">' +
'<td>{{row.id}}</td>' +
'<td>{{row.name}}</td>' +
'<td>{{row.description}}</td>' +
'<td><button v-on:click="alert($index)">{{row.clickbutton}}</button></td>' +
'</tr></table>',
methods: {
alert: function (index) {
alert("該行是第" + index + "行")
}
}
function load() {
</body>
</html>
html标簽的純文字顯示／被當做html标簽處理；
插值單次更新；
①使用兩個大括号時，假如字元串内容是html标簽，那麼不會被轉義，而是正常顯示；
②使用三個打括号時，字元串内的html标簽會被直接轉義，
{{html}}
el:"#app",
data: {
html:"<span>span</span>"
螢幕上顯示内容是：
<span>span</span>
如果是三個大括号包含變量名：
{{{html}}}
顯示的内容則隻有
span
③插入内容的資料綁定無效（在沒有使用partials的情況下）
使用兩個大括号或者三個大括号都一樣
例如，将②中的html改為以下值
data: {
html: "<span>span{{val}}</span>",
val: "11"
顯示結果乃是：
span{{val}}
說明沒有綁定資料；
按照說明，使用partials可以綁定
<a target="_blank" href="http://cn.vuejs.org/api/#partial">http://cn.vuejs.org/api/#partial</a>
不過不會用，等研究明白了再說
④禁止在使用者送出的内容上動态渲染，否則會受到xss攻擊
⑤插值也可以用在html标簽的屬性中，例如class，或者id，或者其他。
但是vue.js的指令和特殊特性内是不可以用插值的。
插值的位置，可以使用javascript的表達式，例如：
{{html?html:val}}
el: "#app",
html: "",
val: "11"
例如以上示例，
假如有html值，則輸出hmtl值，否則輸出val值；
也可以輸出字元串，例如改為：
{{html?html:"no words"}}
則輸出no words
但是隻能輸出表達式，不能輸出比如函數，或者直接放個v-for标簽之類的。
但是我推斷後者應該可以，可能是我寫的方法不對。
①簡單來說，在插值中，加入管道符“|”，然後過濾器會生效。
capitalize這個過濾器，會将字元串的首字母大寫
{{{html|capitalize}}}
html: "abc",
輸出值是abc
如果是漢字、數字、或者是本身首字母就大寫了，則無反應。
②過濾器不能充當表達式使用，是以不能在表達式内使用過濾器，隻能在表達式的後面使用。
{{html[0]|capitalize}}
是可以的，會輸出html的首個字母并将其大寫；
但
(html|capitalize)[0]
是會報錯的（不加括号也報錯），說明，不能将過濾器視為表達式的一部分
③過濾器可以加參數。
第一個參數：固定為表達式的值（被過濾目标）；
第二個參數，過濾器後面的第一個單詞；
第三個參數，過濾器後面的第二個單詞，依次類推。
參數加引号則視為字元串，參數不加引号則視為表達式，表達式的值作為參數傳遞給過濾器。
官方例子是：
{{ message | filtera 'arg1' arg2 }}
④過濾器可以自己手寫
①指令（directives）就是特殊的，以帶有字首v-的特性。
簡單粗暴來說，标簽裡v-開頭的就是指令（當然，要vue能支援）。
指令的值限定為 綁定表達式，就是等号後引号裡的。
如：
<div v-if="html">
{{val}}
</div>
<button onclick="test()">消失上一行</button>
vm.html = "";
輸出11
其中<div v-if=”html”>就是指令，
可以通過點選按鈕讓那一行消失（因為html的值被設定為空）
②指令後面可以添加參數：
有些指令（例如v-bind）可以在名稱後等号前，添加一個屬性，這個屬性的作用是響應性的更新html特性。
.white {
background-color: white;
.black {
background-color: black;
<div v-bind:class="bc">背景顔色變化</div>
bc: "black"
vm.bc = "white";
初始情況下，這個div的class和data裡的bc綁定，由于bc的值是black，那麼相當于v-bind所在的标簽的class=”black”，是以初始情況下，背景顔色為黑色。
當點選按鈕後，bc的值被更改為white，那麼相當于标簽的class=”white”，而類white的背景顔色為白色，是以該div的背景顔色變成了白色。
類似的有v-on:click事件，表示監視的是click事件，也可以改為
<div v-on:mouseup="alert">背景顔色變化</div>
表示該标簽當滑鼠彈起的時候，執行methods的alert函數。
③修飾符
修飾符用于表示指令應當以特殊的方式進行綁定。
例如：.literal修飾符告訴指令應當将他的值解析為字元串，而不是表達式
或者是keydown.enter表示按Enter鍵時調用函數
<input v-on:keydown.enter="alert"></input>
④縮寫：
v-on的縮寫是@ shift+數字2
v-bind的縮寫是:就是冒号
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)