【重点突破】—— 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 属性自定义指令，也可以定义全局的指令