Vue.js学习笔记六——按键修饰符与自定义指令和钩子函数的基础用法

1. 按键修饰符

关于事件绑定机制需要知道的一点是：在Vue.js中，使用事件绑定机制为元素绑定指定处理函数的时候，如果加了小括号，就可以传递参数了。

1.2 为输入框添加按键事件

<label>name：<input type="text" class="form-control" v-model="name" @keyup.enter="add"/></label>

这里为input标签绑定了一个按键弹起事件，同时指定按回车键的时候，触发add方法

1.2 常用的按键修饰符

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

2. 自定义按键修饰符

Vue并没有为所有的键盘按键都提供修饰符，这时候，我们可以根据按键的码值，来自定义一个修饰符，也就是给码值去一个别名，因为，直接使用码值虽然很方便，但是不容易记忆

定义：Vue.config.keyCodes.按键名 = 对应按键的码值;

例如：定义F2键的按键修饰符

            Vue.config.keyCodes.f2 = 113;

使用：

<label>name：<input type="text" class="form-control" v-model="name" @keyup.f2="add"/></label>

3. 自定义指令

在Vue中，所有的指令在调用的时候，都以v-开头

3.1 定义全局自定义指令

语法：使用directive定义指令

Vue.directive('focus',{
     inserted: function (el) {
		// 聚焦元素
		el.focus()
	}
});

参数：

1. 参数一，指令的名称。注意，在定义参数名称的时候，不需要加 v-  ，但是再调用的时候需要加v-前缀

2. 参数二，是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定阶段执行相关操作

定义指令的几个常用钩子函数：

1. bind：每当指令绑定到元素上的时候，会立即执行一次这个bind函数，只执行一次。在这里可以进行一次性的初始化设置。

                 一般用于初始化样式等。

// 定义颜色的指令
Vue.directive('color',{
    bind:function(el){
    	el.style.color="red";
    }
});

2. inserted：表示元素插入到DOM树中的会执行inserted函数，只会触发一次 (仅保证父节点存在，但不一定已被插入文档中)

                         一般用于绑定和js行为相关的操作。

// 自定义获取焦点指令
Vue.directive('focus',{
    inserted: function (el) {
		// 聚焦元素
		el.focus()
	}
});

3. update：当vNode更新的时候会执行update，可能会触发多次

注意：

1. 每个钩子函数，第一个参数都是el，表示被绑定了指令的那个元素，是一个原生的JS对象，所以可以调用一些原生的JS方法，例如：el.focus()

2. 在元素刚绑定了指令的时候，还没有插入到DOM中，这时候，调用focus没有效果，因为一个元素只有在插入了DOM中之后，差能获取焦点，然而即使在bind中调用了focus，也不会生效，同时也不会报错

例如：

<label>搜索：<input type="text" class="form-control" v-model="keywords" id="search" v-focus/></label>


// 自定义获取焦点指令
Vue.directive('focus',{
    inserted: function (el) {
		// 聚焦元素
		el.focus()
	}
});

3.2 定义私有的自定义指令

1. 定义：同过滤器，在VM中定义，关键字directives

new Vue({
        	el:"#app2",
        	data:{
        		dt:new Date()
        	},
        	methods:{},
        	filters:{
        		dateFormate:function(dateStr,partten='yyyy-mm-dd'){
        			var d = new Date(dateStr);
		    		var y = d.getFullYear();
		    		var m = (d.getMonth() + 1).toString().padStart(2,'0');
		    		var d1 = d.getDate();
		//  		return y + '-' + m + '-' + d1;
					if(partten.toLowerCase() == 'yyyy-mm-dd'){
						return `${y}-${m}-${d1}abc`;  // 模板字符串
					}else{
						return `${y}:${m}:${d1}abc`;  // 模板字符串
					}
		        }
		    },
		    directives: {
		    	'fontweight' : {
		    		bind: function(el,binding){
		    			console.log(binding.value);
		    			el.style.fontWeight=binding.value;
		    		}
		    	}
		    }
        });

注意：

1. 定义的指令名称要全部小写，因为我将fontweight写成fontWeight或者fontW均报错了，根据报错信息，我估计是Vue会将指令名称全部转换成小写，所以最好定义的时候用小写

 

4. 钩子函数

4.1 钩子函数的一般用法见上面

4.2 钩子函数的参数

1. el：第一个参数，表示指定所绑定的元素，可以用来直接操作DOM

2. binding：第二个参数，一个对象，包含如下属性

• name：指令名，不包括 v- 前缀。

Vue.directive('color',{
    		bind:function(el,binding){
    			el.style.color="red";
    			console.log(binding.name);
    		}
});

• value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

一个用binding参数的实例

// 根据标签中传递过来的颜色值来改变样式

<input type="text" class="form-control" v-model="keywords" v-color="'green'"/></label>
               
Vue.directive('color',{
    		bind:function(el,binding){
    			//el.style.color="red";
    			console.log(binding.name); // 输出 指令的名字：color
    			console.log(binding.value); // 输出指令传递的值：green
    			console.log(binding.expression);// 输出指令传递的表达式：'green'
    			// 设置样式
    			el.style.color=binding.value;
    		}
    	});

注意：v-color="'green'" 表示给指令传递的参数是green。其中'green'的引号不能省略，如果省略的话，就表示green为一个变量了，加上引号就表示一个字符串。

3. 钩子函数的简写

在很多时候，我们可能会想在 bind 和 update 时触发相同行为，而不关心其它的钩子，这时候可以省略掉bind或者update

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

等同于
Vue.directive('color-swatch', function (el, binding) {
  bind: functon(el,binding){
      el.style.backgroundColor = binding.value
  },
  update:function(el,binding){
       el.style.backgroundColor = binding.value
  }
  
})