vue2.0:
? ? ? ?bower info vue
? ? ? ?http://vuejs.org/
到了2.0以后，有哪些變化?
1. 在每個(gè)組件模板，不在支持片段代碼組件中模板:
? ? ? ?之前:
? ? ? ? ? ? ?<template>
? ? ? ? ? ? ? ? ? ? ? <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(組件名稱,{在2.0繼續(xù)能用data(){}methods:{}template:});2.0推出一個(gè)組件，簡(jiǎn)潔定義方式：var Home={template:''->? Vue.extend()};
3. 生命周期
? ? 之前:
? ? ? ? ?init
? ? ? ? ?created
? ? ? ? ?beforeCompile
? ? ? ? ?compiled
? ? ? ? ?ready√->? ? mounted?
? ? ? ? ?beforeDestroydestroyed
現(xiàn)在:
? ? ? ? beforeCreate組件實(shí)例剛剛被創(chuàng)建,屬性都沒(méi)有
? ? ? ? created實(shí)例已經(jīng)創(chuàng)建完成，屬性已經(jīng)綁定
? ? ? ? beforeMount模板編譯之前mounted模板編譯之后，代替之前ready? *
? ? ? ? beforeUpdate組件更新之前
? ? ? ? updated組件更新完畢*
? ? ? ? beforeDestroy組件銷毀前
? ? ? ? destroyed組件銷毀后
3. 循環(huán)
? ? ? ?2.0里面默認(rèn)就可以添加重復(fù)數(shù)據(jù)
? ? ? ? ? ? ?arr.forEach(function(item,index){
? ? ? ? ? ? ?});
? ? ? ?去掉了隱式一些變量
? ? ? ? ? ? ?$index$key
? ? ? ?之前:
? ? ? ? ? ? ? ? ?v-for="(index,val) in array"
? ? ? ? 現(xiàn)在:
? ? ? ? ? ? ? ? ? v-for="(val,index) in array"
4. track-by="id"變成
? ? ? ? ?<li v-for="(val,index) in list" :key="index">
5. 自定義鍵盤(pán)指令
? ? ? ?之前：Vue.directive('on').keyCodes.f1=17;
? ? ? ?現(xiàn)在:? Vue.config.keyCodes.ctrl=17
6. 過(guò)濾器
? ? ? ?之前:
? ? ? ? ? ? ? 系統(tǒng)就自帶很多過(guò)濾
? ? ? ? ? ? ? {{msg | currency}}
? ? ? ? ? ? ? ?{{msg | json}}
? ? ? ? ? ? ? ?....
? ? ? ? ? ? ? ? limitBy
? ? ? ? ? ? ? ? filterBy
? ? ? ? ? ? ? ? .....
? ? ? ? 一些簡(jiǎn)單功能，自己通過(guò)js實(shí)現(xiàn)
? ? ? ? 到了2.0， 內(nèi)置過(guò)濾器，全部刪除了
? ? ? ? lodash ? 工具庫(kù) ? ? _.debounce(fn,200)
? ? ? ? 自定義過(guò)濾器——還有
? ? ? ? 但是,自定義過(guò)濾器傳參
? ? ? ? ? ? ? ? 之前: {{msg | toDou '12' '5'}}
? ? ? ? ? ? ? ? 現(xiàn)在: {{msg | toDou('12','5')}}
------------------------------------------------------
組件通信:
? ? ? ? vm.$emit()
? ? ? ? vm.$on();
? ? ? ?父組件和子組件:
? ? ? ?子組件想要拿到父組件數(shù)據(jù):
? ? ? ? ? ? ? ? ?通過(guò)? props
? ? ? ? ?之前，子組件可以更改父組件信息，可以是同步? sync
? ? ? ? ?現(xiàn)在，不允許直接給父級(jí)的數(shù)據(jù)，做賦值操作
? ? ? ? ?問(wèn)題，就想更改：
? ? ? ? ? ? ? ? ?a). 父組件每次傳一個(gè)對(duì)象給子組件, 對(duì)象之間引用 √
? ? ? ? ? ? ? ? ?b). 只是不報(bào)錯(cuò), mounted中轉(zhuǎn)
------------------------------------------------------
可以單一事件管理組件通信: vuex
? ? ? ? ? var Event=new Vue();
? ? ? ? ? Event.$emit(事件名稱, 數(shù)據(jù))
? ? ? ? ? Event.$on(事件名稱,function(data){
? ? ? ? ? ? ? ? //data
? ? ? ? ? }.bind(this));
------------------------------------------------------
debounce 廢棄
? ? ? ? ? ?->? lodash
? ? ? ? ? ?_.debounce(fn,時(shí)間)
------------------------------------------------------
注：
?Vue做項(xiàng)目的基本流程：
? ? ? ? 1，規(guī)劃組件結(jié)構(gòu)
? ? ? ? ? ? ? ? Nav.vue
? ? ? ? ? ? ? ? Header.vue
? ? ? ? ? ? ? ? Home.vue
? ? ? ? ? ? ? ? ....
? ? ? ? ?2,編寫(xiě)對(duì)應(yīng)的路由
? ? ? ? ? ? ? ? ?vue-router
? ? ? ? ?3,具體寫(xiě)每個(gè)組件的功能
? ? ? ? ?建議：一些公共文件jQuery，jQuery插件，一般在index.html文件里面引入
? ? ? ? ? ? ? ? ? ? ? main.js? require()/import
搭建項(xiàng)目跳坑：
? ? ? ? eslint no //檢測(cè)代碼編譯規(guī)范
? ? ? ? test no
下載模塊：cnpm install 模塊名
