【重点突破】—— 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，且不允许更改父组件信息
• 如何改：

1. 父组件每次传一个对象给子组件，对象引用。
2. 只是追求不报错，可以用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 属性自定义指令，也可以定义全局的指令