Vue學習(day3)

快速學習Vue筆記(Day3)

列表渲染

當我們需要將一組數據循環渲染到頁面上的時候，需要用到列表渲染

例如下面，講一段活動列表，渲染到頁面上面：

var list = [
    {
        title:"喫飯"
    },
    {
        title:"睡覺"
    },
    {
        title:"打豆豆"
    }
];

// 列表渲染
new Vue({
    el: ".main",
    data:{
        list:list,
    }
});

v-for指令

根據一組數組的選項列表進行渲染

語法：

value,key in items

value,key of items

事件處理器

當我們需要監聽DOM上面的操作的時候，需要用到事件處理器，例如一個按鈕的點擊事件

v-on指令

用來監聽DOM事件觸發代碼

語法

v-on:eventName="eventHandle"

簡寫語法

@

事件處理函數

寫在Vue對象的methods中進行統一管理

事件對象

在事件處理函數中獲取

內聯事件處理函數執行，傳入事件對象

事件修飾符

事件處理函數只有純粹的邏輯判斷，不處理DOM事件的細節的時候使用

如：阻止冒泡、取消默認行爲、判斷按鍵

事件修飾符的位置

v-on:eventName.修飾符

修飾符

.stop .prevent .capture .self .once

按鍵修飾符

.enter .tab .delete .esc .space .up .dowm .left .right .ctrl .alt .shift .meta .鍵位

條件渲染

根據表達式的值用來顯示或者隱藏元素

v-show指令

元素會被在頁面中，只根據表達式的值進行css切換

語法

v-show="表達式"

自定義指令

除了vue內置的指令之外還可以自己設置指令

選項對象的directives屬性

{
    directives:{}
}

鉤子函數

update被綁定元素所在的模板更新的時候調用

鉤子函數中的參數

el:指令所綁定的元素，可以用來直接操作DOM
binding:一個對象
value:指令的綁定值

計算屬性

爲什麼需要使用計算屬性？模板是爲了描述視圖結構的，模板中放入太多邏輯，導致模板過重且難以維護。

在計算一個計算屬性的時候，Vue.js更新他的依賴列表病緩存結果，只要當其中一個依賴發生了變化，緩存的結果才無效。

語法

在選項對象中{
    ...
    computed:{}
}

day5

由於這幾天都在做同一個項目，所以直接做筆記了

屬性監控

在這節裏面，主要講了一個數據的監控，比如當你的數據發生改變的時候，你需要對他進行實時的保存

語法：

選項對象的directives屬性

{
    watch:{}
}

例如：對list屬性進行監控

new Vue({
    el: ".main",
    data:{
        list:list,
        ....
    },
    // 監控屬性
    watch:{
        list:function(){
            store.save("data",this.list);
        }
    }
}

深度監控

在上面的監控當中，我們可以監控得到list的變化。這裏需要注意的是，list是一個對象數組，這裏監控的只是list內數組，但是對於數組內對象的改變卻無法監控，這個時候就需要深度監控了。如果需要深度監控，需要這樣：

new Vue({
    el: ".main",
    data:{
        list:list,
        ....
    },
    // 監控屬性
    watch:{
        list:{
            handler:function(){
                store.save("data",this.list);
            },
            deep:true
        }
    }
}