兄弟最近特別煩，工資越來(lái)越高做的事情越來(lái)越簡(jiǎn)單，學(xué)的東西都不用到項(xiàng)目中去，你說(shuō)煩不煩？最近，在網(wǎng)上找資料的時(shí)候，看到一篇不錯(cuò)的文章。尼瑪？點(diǎn)擊頭像一看，這尼瑪就傻眼了，90后，女的，博客的內(nèi)容是webpack+vue.js+node.js前端全棧。羞愧的我，立馬關(guān)閉了網(wǎng)站，好好沉思下自己接下來(lái)該做些什么。

vue2.0相對(duì)比vue1.0有很多屬性、詞匯都進(jìn)行改變，詞匯更語(yǔ)義話、屬性更加簡(jiǎn)介，方便了。

1、生命周期

生命周期就是創(chuàng)建VUE實(shí)例開(kāi)始到結(jié)束這一過(guò)程，以下圖很好反應(yīng)了VUE實(shí)例的生老病死。

生命周期

2、組件

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 js 特性擴(kuò)展。這里的組件分兩種，全局組件和局部組件。

全局組件：

全局組件

局部組件：

局部巨劍

3、指令

vue2.0有很多都有自己的指令，v-for循環(huán)dom元素、v-if判斷dom元素、v-show顯示隱藏dom元素，大家有木有發(fā)現(xiàn)一些規(guī)律呢？是的，沒(méi)有錯(cuò)，它們都有相同的共性，那就是操作dom元素用的，你也可以自定義指令，自定義方法如下，以代碼的形式列出來(lái)。

<input v-focus="{age:56}" />

Vue.directive("focus", {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????inserted:function(el,value){? ? ? ? ? //el當(dāng)前元素，value獲取當(dāng)前對(duì)象，inserted（鉤子函數(shù)，當(dāng)元素插入的時(shí)候） ????????????el.value=value.value.age;? ? ?//console.log(value.value.age)? ? ? ? ? ? ? ? 打印出要傳入的對(duì)象值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } );

默認(rèn)情況下，input的value值為傳入對(duì)象age的值。

4、過(guò)濾器

vue1.0上自帶了很多過(guò)濾器，orderBy按大小排序，filterBy篩選出關(guān)鍵詞，lowercase字母轉(zhuǎn)換成小寫，這些在vue2.0上統(tǒng)統(tǒng)都沒(méi)有了，在vue2.0上可以通過(guò)自定義過(guò)濾器實(shí)現(xiàn)，減輕的代碼，讓框架更加的便捷。

<div>{{footHeight | noPx}}</div>? ? ? ? ? ? ? ? ? ? ? ?

Vue.filter("noPx",function(value){???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ????????var val = parseInt(value);? ? ? ? //value是footHeight的值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return val;? ? ? ?//返回的值，就是footHeight屬性的值 。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })

var vm = new Vue({ el:"#app", data:{ footHeight:'350px' } })

5.路由

vue2.0路由功能比vue1.0簡(jiǎn)化了太多了，vue2.0也更容易實(shí)現(xiàn)單頁(yè)面應(yīng)用。1.先配置入口文件（app.vue）的菜單組件及其樣式結(jié)構(gòu)，router-link組件進(jìn)行跳轉(zhuǎn)（渲染出來(lái)就是a標(biāo)簽），router-view切換路由顯示的位置。

入口文件

2.創(chuàng)建一個(gè)專門存放路由配置(routerConfig.vue)的信息文件，要導(dǎo)入進(jìn)來(lái)的文件，導(dǎo)出router配置。path入口文件中router-link跳轉(zhuǎn)的鏈接地址，component要導(dǎo)入進(jìn)來(lái)的組件。

路由配置

3.main.js的配置，首先還是要導(dǎo)入路由的配置文件，然后掛載到VUE實(shí)例上。路由就是這么配置的，是不是so easy，是不是媽媽在也不用擔(dān)心你的學(xué)習(xí)了。這里有幾點(diǎn)要注意，一、router 和 routes 千萬(wàn)不要搞反了，不記得就去找資料，我都搞懵幾次。? ? ?二、跳轉(zhuǎn)帶參數(shù)，<router-link :to="{path:'/menuOne',query:{id:123}}" />? 接收? this.$route.query.id。? 有同學(xué)會(huì)問(wèn)，vue 路由跳轉(zhuǎn)后 怎樣去掉指定的組件？ ? ? ?<banner v-if="$route.path!=='/menuOne'" />//這里做了一個(gè)判斷，獲取的路徑為' /menuOne '時(shí)候，為false隱藏

，main.js

7、動(dòng)畫

Vue過(guò)度(動(dòng)畫)，本質(zhì)走的是CSS3：transtion，animation，下面做了個(gè)很簡(jiǎn)單的過(guò)渡顯示隱藏動(dòng)畫。借鑒博客：vue2.0動(dòng)畫

過(guò)渡動(dòng)畫