Vue阶段 - 指令自定义，修饰

指令修饰符 / 自定义指令

指令修饰符

• 注意： autofocus 无法在苹果的移动端生效

<input type="text" autofocus >

• 不同的指令下，有不同的修饰符，需要使用是时，查看文档
• 具体内容查看api 或 自定义指令的具体实现
• 有些指令没有修饰符

格式：指令名称：参数.修饰符 = 值

• .number

<input v-model.number="age" type="number">"

将 msg 的内容转为有效的数字

• .lazy

<input v-model.lazy="msg">

取代 input 监听 change 事件，改为失去焦点后触发

• .trim

<input v-model.trim="msg">

输入首尾空格过滤

<div id="app">
        <input type="text" v-model.lazy="val">
        <div>{{val}}</div>

        <input type="text" v-model.number="num1"> + <input type="text" v-model.number="num2"> = {{num1+num2}}
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                val:1,
                num1:2,
                num2:3
            }
        })
    </script>

自定义指令

1. 全局指令
   先创建然后添加到实例化
2. 局部指令
   直接在实例化的区域内创建

钩子函数

存在的意义 :

可以让开发者灵活控制 指令功能 执行的时间 不同的条件下 触发不同的功能

• bind :
  只调用一次，指令第一次绑定到元素时调用。可以进行一次性的初始化设置

• inserted :
  在绑定元素插入父节点时调用，保证父节点存在（可以没有插入文档中）

• updata :
  所在组件的 VNode 更新时调用，但是可能发生在 VNode 更新之前
  指令的值可能发生了改变，也可能没有

• componentUpdata :
  指令所在组件的 VNode 及其子 VNode 全部更新后调用，即可多次调用

• unbind :
  只调用一次，指令与元素解绑时调用

钩子函数 - 参数

钩子函数会被传入的参数
注意： 除了 el 之外其余的属性均为只读属性

• el: 指令绑定的元素，用来直接操作 DOM
• binding: 一个对象，包含属性如下

 - name: 指令名，不包含 v-
 - value: 指令的绑定值 拿到 “isDrag” 的数据，存什么不重要，只要最后的结果
 - oldValue: 指令绑定的前一个值（update 和 componentUpdated 中可使用）
 - expression: 字符串形式的指令表达式 isDrag = !isDrag
 - arg: 传给指令的参数，可选 类似数组中的 argument
 - modifiers: 包含修饰符的对象

• vnode: 编译生成的虚拟节点
• oldVnode: 上一个虚拟节点

/*
	bind(el, binding) {
		let {arg,expression,value} = binding;
		{arg,expression,value} 对 binding 的解构赋值
	}
*/ 
bind(el, {arg,expression,value}) {
    // console.log(el) // 事件对象（事件源）
    console.log("参数" + arg) // 自定义指令的参数存储位置
    console.log(modifiers) // 自定义修饰符的 属性属性值 
    console.log("表达式（指令名）" + expression + "（完整的字符串不是结果）")
    console.log("表达式的结果" + value) // 自定义指令的属性值
    el.addEventListener("mousedown", function (e) {
    	console.log(e); // 事件对象（存储当前事件的所有信息）
		e.preventDefault(); // 阻止默默事件
    });
}

自定义指令方法

• 创建时不需要加 v-
• 参数1: 指令名称
• 参数2: 配置对象（方法名不是自定义的）

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<div id="app">
	    <!-- 自动获取 焦点 
		    苹果 手机不生效
	    -->
	    <!-- 
	    	<input type="text" autofocus >
	    -->
    	<input type="text" v-focus >
    </div>

	<script>
	        Vue.directive("focus",{
            // 绑定元素插入 DOM 中时触发
            inserted:function(el){
                console.log("元素正在加载");
                el.focus();
                /**
                 * 设定触发条件
                 * if(){
                 *  el.focus()
                 * }
                 * */ 
            }
        });

        // 一个实例化对象就是一个生命周期
        let app = new Vue({
            el:"#app"
        })
        
        let app2 = new Vue({
           // 只能在app2 调用 就是局部
           el:"#app",
			inserted:function(){
           		console.log(24+"这个是数字怎么样")
			} 
        })
    </script>

自定义修饰符

• 应用场景：面对总体功能大致相同的需求，( 略微的个性化需求 )
  节省指令的定义数量 ，提高适用性

<div id="app">
		<div class="box2" v-drag:fn.limit="isDrag"></div>
		<button @click="isDrag = !isDrag">{{isDrag}}</button>
    </div>
   <script>
        Vue.directive("drag", {     
            // 只能触发一次
            bind(el, {arg,expression,value}) {
                // console.log(el) // 事件对象
                console.log(modifiers) // limit 存放在 modifiers 对象这里
                console.log("参数" + arg) // 自定义指令的参数存储位置
                console.log(modifiers) // 自定义修饰符的 属性属性值 
                console.log("表达式（指令名）" + expression + "（完整的字符串不是结果）")
                // 自定义指令的属性值 isDrag 存储的内容
                console.log("表达式的结果" + value)
            },
            // 可以触发多次的函数 （数据更新之后调用）
            componentUpdated(el, { value }) {
                el._value = value;
            }
        });

        let app = new Vue({
            el: "#app",
            data: {
                // sure : -1,
                isDrag: false, // button 来操作 isDrag
                fn:"ss"
            }
        })
    </script>