【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习。
组件模板不再支持片段代码,必须有一个顶级元素包裹,例如:
Vue1.0:
<template>
<h3>h3标签</h3>
<p>p标签</p>
</template>
Vue2.0:
<template>
<div>
<h3>h3标签</h3>
<p>p标签</p>
</div>
</template>
关于组件的定义
Vue1.0:
Vue.component(组件名称,{ //vue2.0能用,但不再那么用了。
//组件内容
})
Vue2.0:
var home={
template:' ' //代替了之前的Vue.extend({})的形式,直接把对象抛出来,就认为成是组件了。
}
生命周期
Vue1.0:
init ×废弃
created
beforeCompile ×废弃
compiled ×废弃
ready ×废弃
beforeDestroy
destroyed
Vue2.0:
- beforeCreate 组件实例刚刚被创建,属性都没有
- created 组件实例创建完毕,属性已经绑定
- beforeMount 模板编译之前 √新增
- mounted 模板编译之后,代替了之前的ready* √新增
- beforeUpdate 组件更新之前 √新增
- updated 组件更新完毕 √新增
- beforeDestroy 组件销毁之前
- destroyed 组件销毁后
循环
Vue1.0:
v-for="(index,val) in array"
需要 track-by="$index"
属性解决添加重复数据问题。
Vue2.0:
v-for="(val,index) in array"
默认可以添加重复数据,必须用:key="index"
属性提高循环性能,对功能没有影响。
自定义键盘事件(以ctrl键为例)
Vue1.0:
Vue.directive("on").keyCodes.ctrl = 17;
Vue2.0:
Vue.config.keyCodes.ctrl = 17;
过滤器
Vue1.0:
- 有很多系统自带过滤器,如:
{{msg|json}}
、{{msg|currency}}
Vue2.0:
- 内置过滤器全部删除,要用的时候需要自己用一些辅助函数解决
组件通信
Vue1.0:
- 子组件利用
sync
(eg::msg.sync="change"
) 可以更改父组件信息
Vue2.0:
- 子级想拿到父级的数据:通过
props
,且不允许更改父组件信息 - 如何改:
- 父组件每次传一个对象给子组件,对象引用。
- 只是追求不报错,可以用
mounted
的钩子函数,改变自身数据
可以单一事件管理组件通信
var Event = new Vue();
Event.$emit('事件名','数据');
Event.$on('事件名',function(){ ... }.bind(this));
动画
transition
不再是属性:transition=“fade”
而是像模板一样的标签
<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素,属性,路由...</transition>
路由
- link 不再是指令,而是标签
Vue1.0:
<a v-link="{path:'/home'}">我是主页</a>
Vue2.0:
<router-link to="/home">我是主页</router-link>
- 路由嵌套
Vue1.0:
var Home ={ //准备组件
template:'<h3>我是主页</h3>'
}
const routes = [ //配置路由
{path:'/home',component:Home},
{path:'*',redirect:'/home'} //重定向
...
];
const router = new VueRouter({routes:routes}); //生成路由实例
//简写成对象的形式 :const router = new VueRouter({routes});
new Vue({ //最后挂到vue上
router,
el:'#box'
});
Vue2.0:
const routes = [ //配置路由
{path:'/home',component:Home},
{path:'/news',component:News,
children:[
{path:'/newsname',component:newsNameDetail},
...
]
},
{path:'*',redirect:'/home'} //重定向
...
];
绑定原生html
Vue1.0:
<span>{{{message}}}</span> //弃用
Vue2.0:
<span v-html="message"></span>
绑定标签属性
Vue1.0:
<span id="{{message}}"></span> //弃用
Vue2.0:
<span v-bind:id="message"></span>
Vue2.0其它改变的地方
- el 属性绑定的元素,限制为一个普通元素,不能再绑定在body、html等元素上
- v-model 增加了
.trim
,.number
等后缀修饰符<input v-model.trim="msg">
-
增加了
directives
属性自定义指令,也可以定义全局的指令
越是迷茫、浮躁的时候,保持冷静和耐心,尤为重要