到了Vue2.x有哪些变化？—— 知识点
2017-03-19 本文已影响1013人
108N8
1. 关于模板：在每个组件模板中（template），不在支持片段代码。
个人理解：在template中必须有有一个根元素（root element）来包裹住所有代码。也就是template标签只能有一个亲儿子。
<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标签和span标签。报错如下图：
应该改成如下：
<template id="testMsg">
<div>
<h3>我是组件msg</h3><span>我是span</span>
</div>
</template>
2. 关于组件的定义 ：利用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. 生命周期（钩子函数）
beforeCreate => 组件实例刚刚被创建，属性和方法都没有；
create => 属性和方法已经绑定成功，但DOM还没有生成；
beforeMount => 模板编译之前；
mounted => 模板已经编译完成，类似之前的ready,就是模板引擎数据有没有展示；有用
beforeUpdate => 组件（数据）更新之前，用于监测实例内的变化；有用
updated => 组件更新完毕;
beforeDestroy => 组件销毁之前; this.$destroy();
destroyed => 组件销毁之后;
<body>
<div id="app">
<input type="button" value="更新数据" @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 = '点击了数据更新吧'
},
destroy(){
this.$destroy();//销毁组件
}
},
beforeCreate() {
console.log('vue刚刚被创建');//还没有属性和方法
},
created() {
console.log('vue实例已经创建完成');//属性和方法已经绑定成功，DOM还没有生成
},
beforeMount() {
console.log('模板编译之前');
},
mounted() {
console.log('模板已经编译完成');//类似之前的ready,就是模板引擎数据有没有展示
},
beforeUpdate() {
console.log('组件更新之前');
},
updated() {
console.log('组件更新完毕');
},
beforeDestroy() {
console.log('组件销毁之前');
},
destroyed() {
console.log('组件销毁之后');//组件销毁之后，更新数据就无效了
}
});
</script>
页面效果如图：
4. 循环（v-for）
在Vue1.x中默认不能添加重复数据，需要在此元素上添加“track-buy="$index"”，但是在2.x中是不需要的，默认就可以重复添加。
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"用唯一标识key，来提升循环性能 -->
{{ 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把所有系统内置的过滤器都删除。但是可以直接展示json数据
<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数据展示如图：
注：可参考lodash工具库。
自定义传参的方式发生变化了（函数传参的方式），参数在括号内{{ 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('参数a：'+ a +' 参数b：'+b);
return n<10?'0'+n:''+n;
})
var vm = new Vue({
el: '#app',
data:{
msg: 18
}
});
</script>
效果如下图：
请看下回
