vue筆記

 

 

1.基本綁定：
    new Vue(
        {
            el:'#elID',
            data:{
                // data obj
            },
            computed:{
                // computed obj
            },
            methods:{
                // methods obj
            },
        }
    );
    
2.指令：
    前綴爲v-
    *v-if, v-for, v-bind, v-on...
    *特性插值會轉爲v-bind綁定: href='{{url}}' --> v-bind:href='url'
    
3.數據綁定只接受單個表達式：
    {{number+1}}                                    ok
    {{ok?'yes':'no'}}                                ok
    {{message.split('').reverse().join('')}}        ok
    {{var a=1}}                                        no
    {{if(ok){return message}}}                        no
    
4.過濾器：
    管道式的寫法 --> {{message|capitalize}}
    *能夠串聯: filterA|filterB
    *能夠帶參數: filterA 'arg1' arg2
    
5.修飾符
    前綴爲.
    *v-bind:href.literal='a/b/c'
    
6.縮寫
    v-bind:href='url' --> :href='url'
    v-on:click='dosomething' --> @click='dosomething'
    
7.計算setter
    computed:{
        fullName:{
            get:function(){
                // getter
            }
            set:function(newValue){
                //setter
            }
        }
    }
    
8.Class與Style綁定
    *變量語法：v-bind:class="{'class-a':isA, 'class-b':isB}"        -->        data:{isA:true, isB:false}
    *對象語法：v-bind:class="classObj"                                -->        data:{classObj:{'class-a':true, 'class-b':false}}
    *數組語法：v-bind:class='[classA, classB]'                        -->        data:{classA:'class-a', classB:'class-b'}

9.條件渲染
    *v-if, v-show, v-else
    *<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
    *<h1 v-show="ok">Yes</h1> <h1 v-else>No</h1>
    *show只是簡單的display:none
    
10.列表渲染
    v-for
    *內置變量：{{$index}}
    *用法：v-for='item in items'    
           v-for='(index, item) in items'    *數組則是索引，遍歷對象則是鍵

11.數組變更檢測
    能觸發視圖更新的方法：
    *push, pop, shift, unshift, splice, sort, reverse            // 變異方法
    *filter, concat, slice                                        // 替換數組
    *儘量複用DOM: track-by
        v-for="item in items" track-by="_uid"
        track-by='$index'                                        // 根據index追蹤，不是很明白！...片斷不被移動，簡單地已對應索引的新值刷新,也能處理數據數組中重複的值...
    
    不能檢測到如下變化：
        1.直接用索引設置元素：    vm.items[0]={};                    // vue解決方案：vm.items.$set(0, { childMsg: 'Changed!'}), vm.items.$remove(item)
        2.修改數據的長度：        vm.items.length=0;                // js中常見的清空, vue解決方案：直接用空數組替換
        
12.對象v-for
    內置變量：$key
    
13.值域v-for
    <span v-for="n in 10">{{ n }}</span>

14.內置的過濾器
    filterBy 和 orderBy    
    
15.方法與事件處理器
    ·v-on 監聽DOM事件
        <button v-on:click="greet"></button>
        <button v-on:click="greet('xx', $event)"></button>                // 內聯語句處理器, $event爲內置變量，原生的DOM事件
    ·事件修飾符
        <a v-on:click.stop.prevent='doThis' />                            // 阻止冒泡和默認行爲，修飾符能夠串聯
    ·按鍵修飾符
        <input v-on:keyup.13='submit' >                                    // 鍵盤事件後面可接keyCode
        常見的按鍵有提供別名：
            ·enter
            ·tab
            ·delete
            ·esc
            ·space
            ·up
            ·down
            ·left
            ·right
    
16.表單控件綁定
    ·v-model綁定字段
        <input type="checkbox" id="checkbox" v-model="checked">            // 綁定的值一般是靜態字符串，勾選框是布爾值
    ·參數特性
        lazy        // 延遲到change事件中同步(原爲input)
        number        // 僅容許輸入數字
        debounce    // 延時同步
        
17.過渡
    典型的過渡：
        <div v-if="show" transition="expand"></div>
        須要添加CSS樣式：
            .expand-transition(必須), .expand-enter, .expand-leave
            *若是未設置, 默認爲.v-transition, .v-enter, .v-leave
        同時提供鉤子：
            Vue.transition('expand',{...});
            ·beforeEnter, enter, afterEnter, enterCancelled, beforeLeave, leave, afterLeave, leaveCancelled
        漸近過渡：
            <div v-for='list' transition stagger='100'></div>
            *鉤子stagger, 延時過渡
            
18.組件
    ·建立組件：        var c = Vue.extend({
                        template:'<div>A custom component!</div>',
                    });
    ·註冊組件:        Vue.component('my-component', c);                    // 若是名字是myComponent, html中必須寫成my-component
    ·使用組件：        <div id='app'><my-component></my-component></div>    // html
                    new Vue({el:'#app'});                                // js
                    
    *註冊可縮寫爲    vue.component('my-component',{
                        template:'<div>A custom component!</div>',
                    });
    局部註冊：
        var c = Vue.extend({});
        var parentComponent = Vue.extend({
            components:{
                'my-component': c,
            }
        });
    組件選項：
        var c = Vue.extend({
            data:function(){
                return {a:1};
            }
        });
        
    is特性：
        *table中限制其餘的節點不能放置其中
        <table>
            <tr is='my-component'></tr>
        </table>
            
    Props:
        props用以從父組件接收數據:         
            使用：
                Vue.component('child',{
                    props:['msg'],
                    template:'<span>{{msg}}</span>'
                });
            聲明：
                <child msg='hello!'></child>            // 字面量語法
                <child v-bind:msg='parentMsg'></child>    // 動態語法
            *若是props是myMsg, html中須要用my-msg(即：camelCase - kebab-case, 由於html的特性是不區分大小寫)
            *字面量和動態語法稍有不一樣
                <comp some-prop="1"></comp>        // 傳遞了一個字符串 "1"
                <comp :some-prop="1"></comp>    // 傳遞實際的數字
    
    Props綁定類型：
        <child :msg="parentMsg"></child>        // 默認爲單向綁定
        <child :msg.sync="parentMsg"></child>    // 雙向綁定
        <child :msg.once="parentMsg"></child>    //單次綁定
        *若是prop是一個對象或數組，是按引用傳遞。無論使用哪一種綁定方式，都將是雙向綁定
    
    Props驗證：
        props:{            // 此時props是一個對象
            propA: Number,
            propB:{
                type: String,                    // 類型(原生構造器：String, Number, Boolean, Function, Object, Array)
                required: true,                    // 是否必須項
                default: 'thyiad',                // 默認值(若是是Object, 默認值需由一個函數返回)
                validator: function(value){        // 驗證
                    return value === 'thyiad';    
                },
                coerce:function(val){
                    return val+'';                // 將值強制轉換爲字符串
                    return JSON.parse(val);        // 將JSON字符串轉換爲對象
                }
            }
        }
    
    父子組件通訊：
        this.$parent        // 子組件訪問父組件
        this.$root            // 訪問根實例
        this.$children        // 父組件的全部子元素
        *不建議在子組件中修改父組件的狀態
        
    自定義事件：
        $on()                // 監聽事件
        $emit()                // 觸發事件
        $dispatch()            // 派發事件，沿着父鏈冒泡
        $broadcast()        // 廣播事件, 向下傳遞給全部的後代
        使用：
            子組件中綁定函數派發事件：
                methods:{
                    notify:function(){
                        this.$dispatch('child-msg',this.msg);
                    }
                }
            父組件中定義事件：
                events:{
                    'child-msg':function(msg){
                        this.messages.push(msg);
                    }
                }
            *更直觀的聲明方式：
                <child v-on:child-msg='handleIt'></child>        // 直觀的爲父組件定義事件(child-msg), 而且觸發父組件的handleIt函數, 子組件只關注觸發事件
        
    子組件索引：
        <child v-ref:profile></child>
        var child = parent.$refs.profile;
        
    使用Slot分發內容：
        單個Slot:
            父組件的內容將被拋棄，除非子組件包含<slot>.
            若是隻有一個沒有特性的slot, 整個內容將被插到它所在的地方, 替換slot.
                父組件：
                <child>
                    <p>parent content</p>
                </child>
                子組件模板：
                <div>
                    <h1>child content</h1>
                    <slot>
                        若是父節點沒有設置內容，這裏纔會被顯示
                    </slot>
                </div>
        命名Slot：
            父組件模板：
                <child>
                    <p slot='one'>One</p>
                    <p slot='two'>two</p>
                    <p>Default A</p>
                </child>
            子組件模板：
                <div>
                    <slot name='one'></slot>
                    <slot></slot>                    // 默認slot, 找不到匹配內容的回退插槽, 若是沒有默認的slot, 不匹配內容將被拋棄
                    <slot name='two'></slot>
                </div>
        
        動態組件：
            能夠在不一樣組件之間切換：
                new Vue({
                    el:'body',
                    data:{
                        currentView:'home',
                    },
                    components:{
                        home:{},
                        posts:{},
                        archive:{},
                    }
                });
                父組件：
                    <component :is='currentView' keep-alive></component>        // component是Vue保留的元素
                    *keep-alive用來把切換出去的組件保留在內存中, 能夠保留它的狀態避免從新渲染
            activate鉤子：
                用以在切入前作一些異步操做：
                    activate:function(done){
                        var self = this;
                        loadDataAsync(function(data){
                            self.someData=data;
                            done();
                        });
                    }
            transition-mode
                指定列兩個動態組件之間如何過渡：
                    <component :is='currentView' transition='fade' transition-mode='out-in'></component>
                    *默認進入與離開平滑地過渡, 能夠指定另外兩種模式：in-out, out-in (先進入or先離開)
            
        組件和v-for:
            <child v-for='item in items' :item='item' :index='$index'></child>
            *由於組件的做用域是孤立的, v-for裏的item沒法直接傳遞給組件, 必須像上面同樣使用props傳遞數據
        
        異步組件
        資源命名約定
        遞歸組件
        片斷實例
            *推薦模板只有一個根節點(使用template選項時)
        內聯模板
            組件把它的內容當作它的模板
            <child inline-template></child>
            *不推薦
        
19.深刻響應式原理
    ·如何追蹤變化
        *使用Object.defineProperty設置getter/setter
    ·變化檢測問題
        *不能檢測到對象屬性的添加或刪除
        *vm.$set('b', 2);
         Vue.set(object, key, value);
    ·初始化數據
        *推薦在data對象上聲明全部的響應屬性
    ·異步更新隊列
        *默認異步更新DOM, 下次事件循環時清空隊列, 執行必要的DOM更新
        *Vue.nextTick(callback);
    ·計算屬性的祕密
        *計算屬性是有緩存的, 除非顯示設置爲不緩存
            computed:{
                attr:function(){
                    return Date.now()+this.msg;
                }
            }
            TO:
            computed:{
                attr:{
                    cache: false,
                    get: function(){
                        return Date.now()+this.msg;
                    }
                }
            }
            *但只是在JS中訪問是這樣的, 數據綁定還是依賴驅動的。