原教程：
http://cn.vuejs.org/guide/instance.html
http://cn.vuejs.org/guide/syntax.html
本博文是在原教程的基础上加上实例，并尝试说明的更详细。
（十）Vue实例的生命周期
如图：（我自己翻译的中文版，英文版请查看本博文顶部的，第一个链接）
（八）传入的数据绑定
先创建一个对象（假如是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>
</div>
add函数中两条语句效果是等价的，都可以让显示的值+1
但若将代码改成这样：
var obj = {b: 1}
var vm = new Vue({
el: '#app',
data: obj
})
function add() {
obj.a = 1;
}
</div>
那么在点击按钮后，并不会显示值（没有绑定）。
注意：即使修改为vm.a=1也是无效的
准确的说，在Vue实例创建后，添加新的属性到实例上，是不会触发视图更新的。
在以上情况下，obj.a === vm.a ，注意，a之前没有data。
函数：
function test() {
if (vm.a === obj.a) {
console.log("vm.a === obj.a");
}
}
</div>
其判断条件是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变化时，会触发回调函数
更多的可以查看
http://cn.vuejs.org/api/
搜索 $ 作为关键词来查看。
（十一）$mount()手动挂载
当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：
<div id="app">
{{a}}
</div>
<button onclick="test()">挂载</button>
<script>
var obj = {a: 1}
var vm = new Vue({
data: obj
})
function test() {
vm.$mount("#app");
}
</div>
初始，显示的是{{a}}
当点击按钮后，变成了1
（十二）用Vue的v-for写一个表格
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button onclick="load()">点击挂载表格</button>
</div>
<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>
<script>
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: "点击弹窗"},
]
}
var vm = new Vue({
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() {
vm.$mount("#app");
}
</script>
</body>
</html>
</div>
（十三）数据绑定：
html标签的纯文本显示／被当做html标签处理；
插值单次更新；
①使用两个大括号时，假如字符串内容是html标签，那么不会被转义，而是正常显示；
②使用三个打括号时，字符串内的html标签会被直接转义，
例如：
<div id="app">
{{html}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html:"<span>span</span>"
}
})
</script>
</div>
屏幕上显示内容是：
<span>span</span>
如果是三个大括号包含变量名：
<div id="app">
{{{html}}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html:"<span>span</span>"
}
})
</script>
<script>
function load() {
vm.$mount("#app");
}
</script>
</div>
显示的内容则只有
span
③插入内容的数据绑定无效（在没有使用partials的情况下）
使用两个大括号或者三个大括号都一样
例如，将②中的html改为以下值
data: {
html: "<span>span{{val}}</span>",
val: "11"
}
</div>
显示结果乃是：
span{{val}}
说明没有绑定数据；
按照说明，使用partials可以绑定
http://cn.vuejs.org/api/#partial
不过不会用，等研究明白了再说
④禁止在用户提交的内容上动态渲染，否则会受到XSS攻击
⑤插值也可以用在html标签的属性中，例如class，或者id，或者其他。
但是Vue.js的指令和特殊特性内是不可以用插值的。
<