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