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

posted @ 2018-12-08 15:45  柳洁琼Elena  阅读(347)  评论(0编辑  收藏  举报