Vue筆記總結

一.生命週期

1. beforeCreate(第一個生命週期):表示實例還沒有創建出來之前會執行他,但data和methods還沒有創建成功
2. created(第二個生命週期):表示data和methods已經初始化完成 若操作data或者m,ethods.最早在created中操作
3. beforeMount(第三個生命週期):表示模板已經在內存中編譯完成,但尚未渲染到頁面中
4. mounted(第四個生命週期):表示模板已經渲染到頁面中,若需要通過插件去觸發某個dom元素,最早在mounted中觸發
5. beforeUpdate(第五個生命週期):表示頁面的數據還沒有刷新,但內存上的數據已經刷新
6. updated(第六個生命週期):表示頁面和內存的數據已經刷新

二.vue-resource.js插件的使用方法
emulateJSON:設置調教的內容的類型是普通表單的數據類型

使用全局過濾器, 進行時間的格式化
Vue.filter(‘dateFormat’, function (dataStr) {
var dt = new Date(dataStr);
// yyyy-mm-dd hⓂ️s
//字符串的方法 : padStart() 用於頭部補全 padEnd() 尾部補全
//參數① : 補全完畢之後字符串的總長度
//參數② : 用來補全的字符串

    let y = dt.getFullYear();
    let m = (dt.getMonth()+1).toString().padStart(2,'0');
    let d = dt.getDate().toString().padStart(2,'0');

    let h = dt.getHours().toString().padStart(2,'0');
    let mm = dt.getMinutes().toString().padStart(2,'0');
    let s = dt.getSeconds().toString().padStart(2,'0');

    //模板字符串的拼接方法
    return `${y}-${m}-${d}  ${h}:${mm}:${s}`

});

//自定義全局的按鍵修飾符  f2: 自定義的名字
Vue.config.keyCodes.f2 = 113;

//全局自定義指令  Vue.directive("指令名稱", {對象})
//注: 定義時, 名稱不需要前綴v-   調用時, 需要加前綴調用
Vue.directive('focus', {
    bind: function (el) {//當元素綁定到元素上時, 會立即執行, 指執行一次
        //參數一 : 永遠是被綁定的元素, js對象
        //在元素剛綁定指令的時候, 只是解析到了內存,還沒載入到dom中去
        //el.focus();
    },
    inserted: function (el) {//代表已經被掛載到dom中, 只會執行一次
        el.focus();
    },
    update(){//更新的時候會觸發, 會觸發多次

    }
})

//全局自定義一個設置字體顏色的指令
Vue.directive('color', {
    bind: function (el, binding) {
        // el.style.color = "red";
        el.style.color = binding.value
    }
})

//定義私有的過濾器 : 採用的是就近原則
filters:{
‘dateFormat’: function (data) {
var dt = new Date(data);
let y = dt.getFullYear();
let m = (dt.getMonth()+1).toString().padStart(2,‘0’);
let d = dt.getDate().toString().padStart(2,‘0’);

            let h = dt.getHours().toString().padStart(2,'0');
            let mm = dt.getMinutes().toString().padStart(2,'0');
            let s = dt.getSeconds().toString().padStart(2,'0');
            return `${y}-${m}-${d}  ${h}:${mm}:${s}====`
        }
    },
    //定義私有的指令
    directives:{
        "fontweight": {
            bind:function (el, binding) {

                el.style.fontWeight = binding.value;
            }
        },