在拉钩学习的笔记（二十九）Vue.js的进阶语法

1、自定义指令
    指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装
    当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置
    - 自定义全局指令
        全局指令指的是可以被任意 Vue 实例或组件使用的指令
        Vue.directive('focus', {            // focus 指令的名称 参数二是一个配置对象
            inserted: function(el) {        // el 是设置这个指令的 DOM 元素
                el.focus();                 // 自动获取焦点
            }
        })
        <div id="app">
            <input type="text" v-focus>
        </div>
    - 自定义局部指令
        局部指令指的是可以在当前 Vue 实例或组件内使用的指令
        new Vue ({
            // 省略其他代码
            directives: {
                focus: {
                    inserted (el) {
                        el.focus();
                    }
                }
            }
        })
2、 过滤器
    过滤器用于进行文本内容格式化处理
    过滤器可以在插值表达式和 v-bind 中使用
    - 全局过滤器
        全局过滤器可以在任意 Vue 实例中使用
        Vue.filter('过滤器名称', function (value) {
            // 逻辑代码
            return '处理结果';
        })
        过滤器能在插值表达式和 v-bind 中使用，通过管道符|连接数据
        <div id="app">
            // 在 b-bind 中
            <div v-bind:id="id | filterId"></div>
            // 在差值表达式中
            <div>{{ content | filterContent }}</div>
        </div>
        可以将一个数据传入到多个过滤器中进行处理
        <div id="app">
            <div>{{ content | filterA | filterB }}</div>
        </div>
        一个过滤器可以传入多个参数
        <div>{{ content | filterContent(par1, par2) }}</div>
3、计算属性
    Vue.js 的视图不建议书写复杂逻辑，这样不利于维护
    封装函数是很好的方式，但有时重复的计算会消耗不必要的性能
    计算属性使用时为属性形式，访问时会自动执行对应函数
        computed : {
            result() {
                var sum = 0;
                for(var i = 0; i < this.arr.length; i++) {
                    sum += this.arr[i];
                }
                return sum;
            }
        }
    methods 与 computed 区别：
        computed 具有缓存型，methods 没有；
        computed 通过属性名访问，methods 需要调用；
        computed 仅适用于计算操作；
4、计算属性 案例
    准备一个数组，根据数组数据创建列表；要求：当数值大于 10 时创建li，否则不创建
    以下三种方式： 
        v-if 与 v-for 结合
        v-for 与 methods 结合
        v-for 与 计算属性结合       // 执行效率高 
5、 计算属性的 setter
    计算属性默认只有 getter， Vue.js 也允许给计算属性设置 setter
    computed: {
        getResult: {
            // getter
            get: function() {},
            // setter
            set: function(newValue){}
        }
        // 以下是自己写的案例
        fullname : {
            get() {
                return this.name1 + this.name2;
            },
            set(newValue) {}
        }
    }
6、侦听器
    侦听器用于监听数据变化并执行指定操作
    new Vue ({
        el: "#app",
        data: {
            value: ""
        },
        watch: {
            value (newValue, oldValue) {
                // 逻辑代码
            }
        }
    })
    为了监听对象内部值的变化，需要将 watch 书写为对象， 并设置选项 deep:ture， 这时通过 handler 设置处理函数
    watch: {
        obj: {
            deep: true,
            handler(val, oldVal) {
                console.log(val, oldVal);
            }
        }
    }
    注意： 当更改（非替换）数组或对象时，回调函数中的新值与旧值相同，因为它们引用都是指向同一个数组、对象； 
        数组操作不要使用索引与length，无法触发侦听器函数
        watch: {
            // todos 监听对象的名字
            todos : {
                deep: true,
                handler: todoStorage.set
            }
        }
7、Vue DevTools
    是 Vue.js 官方提供的用来调试 Vue 应用的工具
    （更多工具 => 扩展程序 => 左上 三 => 下 打开谷歌商店 => 搜索Vue.js DevTools（提供方是 https://vue.js.org）
    注意事项： 网页必须应用了 Vue.js 功能才能看到 VueTools；
        网页必须使用 Vue.js 而不是 Vue.min.js；
        网页需要在 http 协议下打开，而不是使用 file 协议本地打开
8、Vue.js 生命周期
    Vue.js 生命周期指的是 Vue 实例的生命周期
    Vue 实例的生命周期，指的是实例从创建到运行，再到销毁的过程
    Vue.js 生命周期函数： 通过设置生命周期函数，可以在生命周期的特定阶段执行功能； 也叫生命周期钩子
    生命周期函数
        创建阶段： 
            beforeCreate：   实例初始化之前调用
            created：       实例创建后调用
            beforeMount：    实例挂载之前调用
            Mounted：       实例挂载完毕
        特点：每个实例只能执行一次
        运行阶段： 
            beforeUpdate：   数据更新后，视图更新前调用
            updated:        视图更新后调用
        特点： 按需调用
        销毁阶段： 
            beforeDestroy:  实例销毁之前调用
            destroyed：     实例销毁后调用