【重点突破】—— Vue1.0到Vue2.0的变化

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

前言： 本文参考作者：_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 >弃用

Vue2.0:

<span v-bind:></span>

      Vue2.0其它改变的地方

  • el 属性绑定的元素，限制为一个普通元素，不能再绑定在body、html等元素上

  • v-model 增加了 .trim, .number 等后缀修饰符

    <input v-model.trim="msg">

  • 增加了directives 属性自定义指令，也可以定义全局的指令 

以上是 【重点突破】—— Vue1.0到Vue2.0的变化 的全部内容， 来源链接： utcz.com/z/379812.html

回到顶部