前言： 本文参考作者：_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 ×废弃createdbeforeCompile ×废弃compiled ×废弃ready ×废弃beforeDestroydestroyed
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属性自定义指令，也可以定义全局的指令