vue2.0 vs vue

vue2.0相比vue1.0 有哪些改变,今天总结了一下

1. vue2.0组件中 template 不在支持代码片段

   //vue1.0组件中template写法
   <template>
       <h3>我是vue1.0的写法</h3>
       <h2>我是vue1.0的写法</h2>
   </template>
   
   
   //vue2.0组件中 template 写法
   //必须有根元素
   <template>
   　　<div>　　
           <h3>我是vue2.0的写法</h3>
           <h2>我是vue2.0的写法</h2>
       </div>
   </template>

    

2. 组件的定义方法

   Vue.extend()    //vue2.0支持这种写法,但是建议---废弃
   
   //在vue2.0中提供了更加简洁的做法
   let demo = {} 

    

3. 生命周期
   
   
   

   vue1.0+	vue2.0	描述
   init	beforeCreate	组件实例刚被创建,组件属性计算之前,例如:data
   created	created	组件实例创建完成,属性已经绑定,但是DOM还未生成,$el属性还未存在
   beforeComplie	beforeMount	模板编译/挂载之前
   compiled	mounted	模板编译/挂载之后
   ready	mounted	模板编译/挂载之后
   --	beforeUpdate	组件更新之前
   --	update	组件更新之后
   --	activated	for keep-alive,组件被激活时调用
   --	deactivated	for keep-alive,组件被移除时调用
   attached	--
   detached	--
   beforeDestory	beforeDestory	组件销毁前调用
   destoryed	destoryed	组件销毁后调用

4. 插值语法
   

   //vue2.0禁止使用{{*}} ,改用v-once
   <div v-once>我只绑定一次   {{msg}}</div>
   
   //vue2.0禁止使用{{{}}} ,改用v-html
   <div v-html>我绑定的是html代码  {{msg}}</div>

    

5.  track-by
   

    track-by="id"    ---><li v-for="(val,index) in list" :key="index">

    

6. 过滤器
   vue 2.0删除内置过滤器   自定义过滤器没变
   
   
   
7. 自定义键盘事件
   

   Vue.directive('on').keyCodes.f1=17;   //vue 1.0
   
   Vue.config.keyCodes.ctrl=17     // vue2.0