返回列表

转载:vue1.0到vue2.0的变化

默认分类 2019/06/13 09:37

原文:https://blog.csdn.net/qq_40776187/article/details/84852548

1、组件模板不再支持片段代码,必须有一个顶级元素包裹,例如:

version1.0:

<template>
  <h3>h3标签</h3>
  <p>p标签</p>
</template>

version2.0:

<template>
  <div>
     <h3>h3标签</h3>
    <p>p标签</p>
  </div>
</template>

2、 关于组件的定义。

version1.0:

Vue.component(组件名称,{//vue2.0能用,但不在那么用了。
  //组件内容
})

version2.0:

var home={
  template:' '  //代替了之前的Vue.extend({})的形式,直接把对象抛出来,就认为成是组件了。
}

3、 生命周期。

version1.0:

(1)init
(2)created
(3)beforeCompile
(4)compiled
(5)ready
(6)beforeDestroy
(7)destroyed

version2.0:

(1)beforeCreate  组件实例刚刚被创建,属性都没有
(2)created  组件实例创建完毕,属性已经绑定
(3)beforeMount  模板编译之前
(4)mounted   模板编译之后,代替了之前的ready*
(5)beforeUpdate  组件更新之前
(6)updated    组件更新完毕
(7)beforeDestroy  组件销毁之前
(8)destroyed 组件销毁后

4、 循环。

version1.0:

v-for="(index,val) in array"

需要track-by="$index"属性解决添加重复数据问题。

version2.0:

v-for="(val,index) in array"

默认可以添加重复数据,:key="index"属性提高循环性能,对功能没有影响,一般情况下用在大型项目中。

5、 自定义键盘事件。(以ctrl键为例)

version1.0:

Vue.directive("on").keyCodes.ctrl = 17;

version2.0:

Vue.config.keyCodes.ctrl = 17;

6、过滤器。

version1.0:有很多系统自带过滤器,如:{{msg|json}}、{{msg|currency}}。
version2.0:内置过滤器全部删除,要用的时候需要自己用一些辅助函数解决。

7、 组件通信。

version1.0:子组件利用sync(eg: :msg.sync="change")可以更改父组件信息。
version2.0:子级想拿到父级的数据:通过props,且不允许更改父组件信息。

如何改: a)父组件每次传一个对象给子组件,对象引用。 b)只是追求不报错,可以用mounted的钩子函数,改变自身数据。

8、 可以单一事件管理组件通信

var Event = new Vue();
Event.$emit('事件名','数据');
Event.$on('事件名',function(){ ... }.bind(this));

9、 动画。

transition不再是属性:transition="fade"

而是像模板一样的标签

<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素,属性,路由...</transition>

10、 路由.

布局的改变:

version1.0:

<a v-link="{path:'/home'}">我是主页</a>

version2.0:

<router-link to="/home">我是主页</router-link>

路由写法的改变:

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'
});

路由嵌套:

const routes = [   //配置路由
  {path:'/home',component:Home},
  {path:'/news',component:News,
  children:[
    {path:'/newsname',component:newsNameDetail},
    ...
  ]
 },
 {path:'*',redirect:'/home'}   //重定向
   ...
];


>> 留言评论