vue 指令修饰符及自定义指令

指令修饰符

指令:参数.修饰符 = 值
修饰符是指令的(不是参数的)，如属性是对象的
不同的指令有不同的参数，有的指令也可能没有修饰符，有的指令可能有不同的修饰符
不同的指令可能有相同的修饰符，使用修饰符一定要找 对应指令 下的修饰符
多看api 才能知道有哪些修饰符，修饰符可以连着用， 自定义修饰符可以直接跟在参数，也可以跟在数据后
自定义指令是为了满足千奇百怪的场景需求，这种场景下需要用到自定义指令
解决个性化需求这也是是他存在的意义
自定义修饰符 是自定义的
指令.修饰符
自定义修饰符是为了节省自定义指令的数量提高实用性，在两个功能都类似的情况下只有部分有差异的情况下用修饰符来解决

    <div id="app">
        <!--lazy 取代监听(取代实时更新) lazy失去焦点时才触发(更新)  -->
        <input type="text" v-model.lazy ="val">
        <div>{{val}}</div>
        <hr>
        <input type="text" v-model.number = "val"> + <input type="text" v-model.number = "v2"> = {{val+v2}}
     <!--刷新页面获取的是data数据相加没问题 但是后面值发生改变value返回给data的数据是字符串，这里要转类型-->
    </div>

        let app = new Vue({
            el:"#app",
            data:{
                val:1,
                v2:2
            }
        })

自定义指令

在面试介绍技术时，在工作中介绍项目中 一定要带版本号这个很重要
自定义指令：全局指令，局部指令，区别点在于其写的位置，全局写在配置对象上面
常用的内部指令是在构造器里，进行编程，vue里面写好了的
全局api在构造器外 vue并没有提供给我们的，但是vue给我们提供了接口，我们自定义的

        // 注册一个全局自定义指令 v-focus
        // 自定义不需要加v-  参数1：指令名称 参2：配置对象(方法名不是自定义固定的) 
        Vue.directive("focus",{  //           整个配置对象就是一个生命周期
            // 当被绑定元素插入到 DOM中时触发，
            inserted:function(el){ //el形参 在谁身上绑定谁就是实参
                console.log("我被触发了");
                el.focus();
            }            
        })
        let app = new Vue({
            el:"#app"
        })

    <div id="app">
                            <!-- autofocus页面加载时获取焦点 -->
        <!-- <input type="text" autofocus> -->
        <input type="text" v-focus>
    </div>

钩子函数
bind inserted update componentUpdated unbind 钩子函数,
存在的意义，可以让开发者灵活的控制指令功能的时间 也即是说不同的条件下触发不同的功能
一个指令对象可以提供一下几个钩子函数（均为可选，可写可不写）
bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted: 官 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中) 当被绑定元素插入到 DOM中时触发
update: 所在组件更新的时候调用
componentUpdated : 所在组件更新完成后调用
unbind: 只调用一次，指令与元素解绑时调用

不同的生命周期钩子函数在调用的时候同时会接收到传入的一些不同的参数
所有的钩子函数都有以下参数，比官网解释清晰,通俗
el: 指令所绑定的元素，可以用来直接操作 DOM
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀
value: 指令的绑定值（作为表达式解析后的结果）
expression : 指令绑定的表达式（字符串）
arg : 传给指令的参数，可选
modifiers : 传给指令的修饰符组成的对象，可选，每个修饰符对应一个布尔值
oldValue : 指令绑定的前一个值，仅在update 和componentUpdated钩子中可用，无论值是否改变都可用
vnode： Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行
oldVnode： 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

    <div id="app">
        <div v-prest.inst="5+9"></div>
        <!-- 修饰符 等号后面也可是个对象 -->
    </div>

        Vue.directive("prest",{
            bind(el,{name,value,modifiers,expression,arg,oldValue}){
                // {}里的所有东西在binding对象里 这里解构 直接写，6个常用其他去官网查
                console.log(el)  //输出绑定的dom元素，可用来直接dom操作
                console.log(name) //输出自定义指令的名称 
                console.log("表达式的结果"+value)
                console.log(modifiers); //输出指定以修饰符的 布尔值为true
                console.log("输出字符串形式的表达式"+expression);
                // console.log("参数+"+arg) //传给指令的参数，
            }
        })
        let app = new Vue({
            el:"#app",
            data:{
                istrue:1+2,
            }
        })