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;
            }
        },