到了2.0以后，有哪些變化：

在每個(gè)組件模板，不在支持片段代碼

之前:

<template id=”aaa”><h3>我是組件</h3><strong>我是加粗標(biāo)簽</strong></template>

?

現(xiàn)在: ?必須有根元素，包裹住所有的代碼

<template id="aaa"> <div> <h3>我是組件</h3> <strong>我是加粗標(biāo)簽</strong> </div></template>

?

?

2、關(guān)于組件定義

之前:、

Vue.extend 這種方式，在2.0里面有，但是有一些改動(dòng)，這種寫(xiě)法，即使能用，咱也不用——廢棄

?

Vue.component(組件名稱(chēng),{ 在2.0繼續(xù)能用data(){}methods:{}template:});

?

現(xiàn)在: 2.0推出一個(gè)組件，簡(jiǎn)潔定義方式：類(lèi)似于Vue.extend()

var Home={template:'#aaa'};Vue.component('my-aaa',Home);

?

?

3、關(guān)于生命周期

之前:

created： ??????當(dāng)new Vue執(zhí)行后，即實(shí)例已經(jīng)創(chuàng)建時(shí)執(zhí)行

beforeCompile：當(dāng)開(kāi)始編譯HTML頁(yè)面所有的Vue語(yǔ)法之前執(zhí)行

compiled： ????當(dāng)編譯HTML頁(yè)面所有的Vue語(yǔ)法結(jié)束之后執(zhí)行

ready： ??????當(dāng)編譯結(jié)束后把所有元素掛到Dom樹(shù)，即插入到文檔中后執(zhí)行

beforeDestroy : 銷(xiāo)毀之前

destroyed : ????銷(xiāo)毀之后

現(xiàn)在：

beforeCreate 組件實(shí)例剛剛被創(chuàng)建,屬性都沒(méi)有

created ???????實(shí)例已經(jīng)創(chuàng)建完成，屬性已經(jīng)綁定

beforeMount 模板編譯之前，頁(yè)面的｛｛｝｝未替換

mounted 模板編譯之后，代替之前ready ?*

beforeUpdate 組件更新之前

updated 組件更新完畢 *

beforeDestroy 組件銷(xiāo)毀前

destroyed 組件銷(xiāo)毀后

?

4、關(guān)于生命周期v-for

2.0里面默認(rèn)就可以添加重復(fù)數(shù)據(jù)，不需要使用track-by='$index/uid'

去掉了隱式一些變量 ? $index $key

之前: ???????????????????index表示下標(biāo)，val表示當(dāng)前的值

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

?

現(xiàn)在:

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

?

?

5、自定義鍵盤(pán)信息

之前：

?

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

?

?

?

現(xiàn)在:?

Vue.config.keyCodes.ctrl=17

?

?

6、關(guān)于過(guò)濾器，推薦自定義寫(xiě)法

之前:

系統(tǒng)就自帶很多過(guò)濾

{{msg | currency}} {{msg | json}} limitBy filterBy

?

?

到了2.0， 內(nèi)置過(guò)濾器，全部刪除了，

推薦使用lodash 工具庫(kù)

自定義過(guò)濾器——還有 但是,自定義過(guò)濾器傳參變化

之前: {{msg | toDou '12' '5'}}現(xiàn)在: {{msg | toDou('12','5')}}

?

?

7、關(guān)于父子組件直接的數(shù)據(jù)交互

子組件想要拿到父組件數(shù)據(jù): ? 通過(guò) ?props

之前：

子組件可以更改父組件信息，可以是同步 ?sync

現(xiàn)在：

不允許直接給父級(jí)的數(shù)據(jù)，做賦值操作

?

解決辦法：

a). 父組件每次傳一個(gè)對(duì)象給子組件, 對(duì)象之間引用 。將數(shù)據(jù)變成對(duì)象

b). 只是不報(bào)錯(cuò), mounted中轉(zhuǎn)，將數(shù)據(jù)賦值后更改，不直接更改

?

8、可以單一事件管理組件通信: vuex

在全局定義一個(gè)vue對(duì)象

var Event=new Vue();

?

在發(fā)送出數(shù)據(jù)的組件內(nèi)定義一個(gè)方法，點(diǎn)擊觸發(fā)。調(diào)用vue對(duì)象中的$emit

send(){ Event.$emit ('a-msg',this.a); }Event.$emit(事件名稱(chēng), 數(shù)據(jù))

?

在接收數(shù)據(jù)的組件中調(diào)用調(diào)用vue對(duì)象中的$on進(jìn)行接收數(shù)據(jù)

Event.$on('a-msg',function(a){this.a=a;}.bind(this));Event.$on(事件名稱(chēng),function(data){//data }.bind(this));

?

?

9、動(dòng)畫(huà)過(guò)渡

?之前： transition 作為一個(gè)屬性使用

HTML元素：<p transition="fade"></p>定義CSS：.fade-transition{}.fade-enter{}.fade-leave{}

?

現(xiàn)在：transition 作為一個(gè)組件HTML標(biāo)簽

<transition name="fade">需要運(yùn)動(dòng)的對(duì)象(可以是元素，屬性、路由....)</transition>

?

定義CSS:

.fade-enter{} //初始狀態(tài)，即目標(biāo)元素原本的狀態(tài).fade-enter-active{} //變化成什么樣 -> 當(dāng)元素出來(lái)(顯示)的時(shí)候的狀態(tài).fade-leave{} //離開(kāi)前的狀態(tài).fade-leave-active{} //變成成什么樣 -> 當(dāng)元素離開(kāi)(消失)的時(shí)候的狀態(tài)

?

例子：

?

<transition name="fade"><p v-show="show"></p> </transition>.fade-enter-active, .fade-leave-active{ //定義總的動(dòng)畫(huà)時(shí)間transition: 1s all ease;}.fade-enter,.fade-leave{ //動(dòng)畫(huà)前的狀態(tài)opacity:0;width:100px;height:100px;}.fade-enter-active{ //目標(biāo)元素出現(xiàn)（顯示）時(shí)的動(dòng)畫(huà)opacity:1;width:300px;height:300px;}.fade-leave-active{ //目標(biāo)元素消失（隱藏）時(shí)的動(dòng)畫(huà)opacity:0;width:100px;height:100px;}

?

transition內(nèi)部具備多個(gè)方法函數(shù)：后面跟的·是一個(gè)方法

??@before-enter="beforeEnter" ???????顯示前觸發(fā)

??@enter="enter" ?????????????????????顯示時(shí)觸發(fā)

??@after-enter="afterEnter" ???????????顯示后觸發(fā)

??@before-leave="beforeLeave" ???????消失前觸發(fā)

??@leave="leave" ?????????????????????消失時(shí)觸發(fā)

??@after-leave="afterLeave" ???????????消失后觸發(fā)

方法名不可改變，每個(gè)方法函數(shù)可傳入el值，表示當(dāng)前動(dòng)畫(huà)對(duì)象

例子：

?

<transition name="fade @before-enter="beforeEnter" ></transition>

?

?

methods:{beforeEnter(el){ //定義動(dòng)畫(huà)之前的方法，el表示動(dòng)畫(huà)對(duì)象 console.log('動(dòng)畫(huà)enter之前');},}

?

?

?

如何animate.css配合用？

直接在transition標(biāo)簽內(nèi)調(diào)用animate.css的class樣式

<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight"><p v-show="show" class="animated"></p> //調(diào)用animated</transition>

?

?

當(dāng)一個(gè)transition內(nèi)有多個(gè)元素需要使用動(dòng)畫(huà)時(shí)，使用transition-group，并且使用?:key 標(biāo)注順序

?

例子一：

<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"><p v-show="show" class="animated" :key="1"></p><p v-show="show" class="animated" :key="2"></p></transition-group>

?

例子二：

<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"><p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">{{val}}</p></transition-group>

?

10、關(guān)于路由

基本使用:

1. ?布局

<router-link to="/home">主頁(yè)</router-link> //不再使用a標(biāo)簽<router-view></router-view>

?

2. 路由具體寫(xiě)法

//聲明各個(gè)組件var Home={template:'<h3>我是主頁(yè)</h3>'};var News={template:'<h3>我是新聞</h3>'};//配置路由對(duì)應(yīng)的組件 const routes=[{path:'/home', componet:Home},{path:'/news', componet:News},];//生成路由實(shí)例 const router=new VueRouter({routes //相當(dāng)于routes ：routes });//最后掛到vue上new Vue({router, //相當(dāng)于 router：router el:'#box'});

?

3. 重定向redirect

之前 ?router.rediect ?廢棄了

{path:'*', redirect:'/home'} // *表示任何一個(gè)路由鏈接，當(dāng)找不到路由的情況下也會(huì)跳轉(zhuǎn)到這個(gè)位置

?

?

路由嵌套 : children

<router-link to="/user/username">跳轉(zhuǎn)到子路由</router-link> const routes=[ //配置路由對(duì)應(yīng)的組件 {path:'/home', component:Home},{path:'/user',component:User,children:[ //寫(xiě)在嵌套的路由里面，使用children {path:'username', component:UserDetail}]},{path:'*', redirect:'/home'} //404錯(cuò)誤默認(rèn)跳轉(zhuǎn) ];

?

路由之間的數(shù)據(jù)攜帶：$route.params

<router-link to="/user/strive/age/10">Strive</router-link> //注意鏈接{path:':username/age/:age', component:UserDetail} //使用：表示攜帶數(shù)據(jù)<div>{{$route.params}}</div> //頁(yè)面展示該路由攜帶的數(shù)據(jù)

?

?

路由實(shí)例方法: ?表現(xiàn)為是否產(chǎn)生歷史記錄

router.push({path:'home'}); //直接添加一個(gè)路由,表現(xiàn)切換路由，本質(zhì)往歷史記錄里面添加一個(gè) router.replace({path:'news'}) //替換路由，不會(huì)往歷史記錄里面添加 例子：methods:{push(){ router.push({path:'home'}); },replace(){ router.replace({path:'user'}); }}

?

給路由切換添加動(dòng)畫(huà)：使用animate.css

直接將 <router-view></router-view>放在transition 標(biāo)簽內(nèi)

例子：

<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"><router-view></router-view></transition>

?

11、關(guān)于腳手架

添加路由命令：npm install vue-router --save

main.js文件內(nèi)發(fā)生變化，本質(zhì)上沒(méi)有區(qū)別，其他都一樣寫(xiě)法

?之前：

new Vue({el: '#app',components:{App}})

?

現(xiàn)在：

new Vue({el: '#app',render: h => h(App)})

?

在vue-loader里面為路由添加動(dòng)畫(huà)

1、直接在index.html頁(yè)面引入

2、在main.js頂部引入，直接打包成一個(gè)文件

注意：需要另外按照style-loader ?css-loader兩個(gè)模塊

命令行：npm install style-loader css-loader

并在webpack.config.js文件中配置

{test: /\.css$/,loader: 'style!css' //順序定死的 }

?

例子：

?

import './assets/css/animate.css';

?

?

?

?

12、關(guān)于與后臺(tái)的數(shù)據(jù)交互

推薦使用axios

跟vue-resourse使用方式完全一樣

命令行安裝：npm install axios --save-dev

頁(yè)面引入： ?import axios from “axios”

轉(zhuǎn)載于:https://www.cnblogs.com/zhengweijie/p/6906119.html

總結(jié)

以上是生活随笔為你收集整理的Vue版本过渡变化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。