1. 關(guān)于模板：在每個組件模板中（template）谦炬，不在支持片段代碼。
個人理解：在template中必須有有一個根元素（root element）來包裹住所有代碼节沦。也就是template標(biāo)簽只能有一個親兒子键思。
<body>
<template id="testMsg">
<h3>我是組件msg</h3><span>我是span</span> <!-- 此處是錯的在2.x中 -->
</template>
<div id="app">
<my-msg></my-msg>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
Vue.component('myMsg',{
template: '#testMsg'
});
var vm = new Vue({
el: '#app',
});
</script>
注意上面的模板（template）中，有兩個根元素h3標(biāo)簽和span標(biāo)簽散劫。報錯如下圖：
應(yīng)該改成如下：
<template id="testMsg">
<div>
<h3>我是組件msg</h3><span>我是span</span>
</div>
</template>
2. 關(guān)于組件的定義 ：利用json格式來代替extend定義組件稚机。比較簡潔。
<body>
<template id="home">
<div id="box">
<h3>我是組件msg</h3><span>我是span</span>
</div>
</template>
<div id="app">
<my-msg></my-msg>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var Home = { //2.0定義一個組件获搏，用一個json
template: '#home'
};
var vm = new Vue({
el: '#app',
components: {
'myMsg':Home
}
});
</script>
3. 生命周期（鉤子函數(shù)）
beforeCreate => 組件實例剛剛被創(chuàng)建，屬性和方法都沒有失乾；
create => 屬性和方法已經(jīng)綁定成功常熙，但DOM還沒有生成；
beforeMount => 模板編譯之前碱茁；
mounted => 模板已經(jīng)編譯完成裸卫，類似之前的ready,就是模板引擎數(shù)據(jù)有沒有展示；有用
beforeUpdate => 組件（數(shù)據(jù)）更新之前纽竣，用于監(jiān)測實例內(nèi)的變化墓贿；有用
updated => 組件更新完畢;
beforeDestroy => 組件銷毀之前; this.$destroy();
destroyed => 組件銷毀之后;
<body>
<div id="app">
<input type="button" value="更新數(shù)據(jù)" @click="update" />
<input type="button" value="銷毀組件" @click="destroy" />
{{ msg }}
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
msg: 'Vue2.x 生命周期'
},
methods: {
update(){
this.msg = '點擊了數(shù)據(jù)更新吧'
},
destroy(){
this.$destroy();//銷毀組件
}
},
beforeCreate() {
console.log('vue剛剛被創(chuàng)建');//還沒有屬性和方法
},
created() {
console.log('vue實例已經(jīng)創(chuàng)建完成');//屬性和方法已經(jīng)綁定成功茧泪，DOM還沒有生成
},
beforeMount() {
console.log('模板編譯之前');
},
mounted() {
console.log('模板已經(jīng)編譯完成');//類似之前的ready,就是模板引擎數(shù)據(jù)有沒有展示
},
beforeUpdate() {
console.log('組件更新之前');
},
updated() {
console.log('組件更新完畢');
},
beforeDestroy() {
console.log('組件銷毀之前');
},
destroyed() {
console.log('組件銷毀之后');//組件銷毀之后，更新數(shù)據(jù)就無效了
}
});
</script>
頁面效果如圖：
4. 循環(huán)（v-for）
在Vue1.x中默認(rèn)不能添加重復(fù)數(shù)據(jù)聋袋，需要在此元素上添加“track-buy="$index"”队伟，但是在2.x中是不需要的，默認(rèn)就可以重復(fù)添加幽勒。
Vue2.x中去掉了嗜侮，隱式的變量（$index、$key等）啥容，用的時候需要自己定義锈颗，類似原生js中的arr.forEach(function(val,key){});
<body>
<div id="app">
<input type="button" value="添加一個" @click="add" />
<ul>
<li v-for="(val,key) in list" :key="key"> <!-- :key="key"用唯一標(biāo)識key，來提升循環(huán)性能 -->
{{ val }} => {{ key }}
</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
list: ['red','green','blue','pink']
},
methods: {
add() {
this.list.push('buy');
}
}
});
</script>
頁面效果如圖：
5. 自定義鍵盤指令
綁定在 Vue.config上了
Vue.config.keyCodes.xxx = xxx;
<script type="text/javascript">
Vue.config.keyCodes.ctrl = 17;
var vm = new Vue({
el: '#app',
methods: {
change() {
alert('改變了');
}
}
});
</script>
6. 過濾器
Vue2.x把所有系統(tǒng)內(nèi)置的過濾器都刪除咪惠。但是可以直接展示json數(shù)據(jù)
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
msg: {
a:1,
b:2,
c:3
}
}
});
</script>
json數(shù)據(jù)展示如圖：
注：可參考lodash工具庫击吱。
自定義傳參的方式發(fā)生變化了（函數(shù)傳參的方式），參數(shù)在括號內(nèi){{ msg | touble(1,2)}}
<body>
<div id="app">
{{ msg | touble(1,2)}}
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
Vue.filter('touble',function (n,a,b) {
console.log('參數(shù)a：'+ a +' 參數(shù)b：'+b);
return n<10?'0'+n:''+n;
})
var vm = new Vue({
el: '#app',
data:{
msg: 18
}
});
</script>
效果如下圖：
請看下回
