Vue基础知识系列(七)自定义指令

自定义全局指令

//使用Vue.directive（）定义全局的指令 v-focus
    /*
    * 参数1：指令的名称，注意，在定义的时候，指令的前面，不需要加v-前缀，但是在调用的时候必须加上v-前缀，也就是变成了v-focus
    * 参数2：是一个对象，这个对象身上，有一些指令相关的函数，通常是一些钩子函数
    * */
    Vue.directive("focus",{
        bind:function (el) { //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
            /*
            在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法是没有作用的，因为，一个元素只有插入到DOM之后，才能回去焦点，inserted是插入到DOM中去，所以需要在那里调用
            但是在这种情况下调用focus，是没有错误的，也是没有效果的
            * */
            el.focus()
        },
        inserted:function (el) { // 插入到DOM中的时候，会执行inserted函数，只触发一次
            el.focus()
        },updated:function () { // 更新的时候，会执行updated，可能会触发多次
        }
    })

脚下留心

• 在自定义全局指令的时候，需要使用Vue.directive来完成，一共有三个，分别是：bind、inserted、updated
• bind: 在自定义样式的时候，放到bind中，只执行一次，在获取焦点的案例上el.focus()这里是没有效果的
• inserted: 插入到DOM中的时候，会执行inserted函数，只触发一次；和行为相关的操作，放到inserted中
• updated: 更新的时候，会执行updated，可能会触发多次
• 在自定义全局指令的时候，function需要传递一个参数，el
• 使用自定义指令的时候，就可以使用DOM方法了，但是仅限于在自定义指令的情况下

自定义私有指令

var vm = new Vue({
        el: "#app",
        data: {
            id: "",
            name: "",
            ctime: "",
            keywords: "",
            list: [
                {id: 1, name: "奔驰", ctime: new Date()},
                {id: 2, name: "众泰", ctime: new Date()},
                {id: 3, name: "奥拓", ctime: new Date()},
            ]
        },
        methods: {
            add() {
                /*
                获取到id和name，直接从data上面获取
                组织出一个对象
                把这个对象，调用数组的方法，添加到data上的list中
                */
                var car = {id: this.id, name: this.name, ctime: new Date()}
                this.list.push(car)
                this.id = this.name = ""
            },
            del(id) {
                var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        return true;
                    }
                })
                this.list.splice(index, 1)
            },
            search(keywords) {
                /*var newList=[]
                this.list.forEach(item=>{
                    if (item.name.indexOf(keywords)!=-1){
                        newList.push(item)
                    }
                })
                return newList*/
                var newList = this.list.filter(item => {
                    if (item.name.includes(keywords)) {
                        return item
                    }
                })
                return newList
            }
        },
        directives:{
            "fontweight":{
                bind:function(el,binding){
                    el.style.fontWeight=binding.value
                }
            }
        }

脚下留心

• 自定义私有指令和自定义私有过滤器类似，在自定义全局过滤器/全局指令时，不需要加s

  在自定义私有过滤器/指令时，需要加s

• 注意自定义指令的参数，第一个参数：形参时必须要传进去的；第二个参数是binding，binding可以有好多参数，比如name、value等

指令的简写方式

在自定义指令的时候，大多数情况下我们只用到了bind和inserted，每次都要写两个比较麻烦。可以使用下面简写的方式，就包含了bind和inserted两种情况
'fontsize':function(el,binding){    el.style.fontSize=binding.value}