Vue版本过渡变化
到了2.0以后，有哪些變化：
之前:
<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)，這種寫法，即使能用，咱也不用——廢棄
?
Vue.component(組件名稱,{ 在2.0繼續(xù)能用data(){}methods:{}template:});?
現(xiàn)在: 2.0推出一個(gè)組件，簡(jiǎn)潔定義方式：類似于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 : 銷毀之前
destroyed : ????銷毀之后
現(xiàn)在：
beforeCreate 組件實(shí)例剛剛被創(chuàng)建,屬性都沒(méi)有
created ???????實(shí)例已經(jīng)創(chuàng)建完成，屬性已經(jīng)綁定
beforeMount 模板編譯之前，頁(yè)面的｛｛｝｝未替換
mounted 模板編譯之后，代替之前ready ?*
beforeUpdate 組件更新之前
updated 組件更新完畢 *
beforeDestroy 組件銷毀前
destroyed 組件銷毀后
?
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、自定義鍵盤信息
之前：
?
Vue.directive('on').keyCodes.ctrl=17;?
?
?
現(xiàn)在:?
Vue.config.keyCodes.ctrl=17?
?
6、關(guān)于過(guò)濾器，推薦自定義寫法
之前:
系統(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(事件名稱, 數(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(事件名稱,function(data){//data }.bind(this));?
?
9、動(dòng)畫過(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)畫時(shí)間transition: 1s all ease;}.fade-enter,.fade-leave{ //動(dòng)畫前的狀態(tài)opacity:0;width:100px;height:100px;}.fade-enter-active{ //目標(biāo)元素出現(xiàn)（顯示）時(shí)的動(dòng)畫opacity:1;width:300px;height:300px;}.fade-leave-active{ //目標(biāo)元素消失（隱藏）時(shí)的動(dòng)畫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)畫對(duì)象
例子：
?
<transition name="fade @before-enter="beforeEnter" ></transition>?
?
methods:{beforeEnter(el){ //定義動(dòng)畫之前的方法，el表示動(dòng)畫對(duì)象 console.log('動(dòng)畫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)畫時(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. 路由具體寫法
//聲明各個(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:[ //寫在嵌套的路由里面，使用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)畫：使用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ū)別，其他都一樣寫法
?之前：
new Vue({el: '#app',components:{App}})?
現(xiàn)在：
new Vue({el: '#app',render: h => h(App)})?
在vue-loader里面為路由添加動(dòng)畫
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é)
- 上一篇： 上手Caffe（一）
- 下一篇： vue2.0的学习