vue2.0中的變化(相對於vue1.0)

vue2.0:
http://vuejs.org/
到了2.0以後,有哪些變化?

0. 在每個組件模板,不在支持片段代碼
組件中模板:
之前:

            <template>
                <h3>我是組件</h3><strong>我是加粗標籤</strong>
            </template>
    現在:  
        必須有根元素,包裹住所有的代碼
        <template id="aaa">
                <div>
                    <h3>我是組件</h3>
                    <strong>我是加粗標籤</strong>
                </div>
        </template>

1. 關於組件定義
Vue.extend 這種方式,在2.0裏面有,但是有一些改動,這種寫法,即使能用,咱也不用——廢棄

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

2.0推出一個組件,簡潔定義方式:
        var Home={
            template:''     ->   Vue.extend()
        };

2. 生命週期
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
現在:

        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

  1. 過濾器
    之前:
    系統就自帶很多過濾
    {{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,時間)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章