//1.自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
// 名称 = 键盘码;
//2.使用 Vue.directive() 定义全局的指令
//其中 参数1 是指令的名称,注意在定义的时候,指令的名称前面不需要加 v- 前缀
//但是调用时必须加v-前缀调用非
//参数2 是一个对象 这个对象身上有一些指令相关的函数,这些函数可以在特定的阶段执行相关的操作
Vue.directive('focus', {
bind: function (el) {//每当指令被绑定到元素上的时候,会立即执行这个bind函数 只执行一次
//注意:在每个函数中,第一个参数永远是 el 表示被绑定了指令的那个元素,这个el参数是一个原生的js对象
//在元素刚绑定指令的时候还有没有插入到DOM中去 这个时候调用 focus没有作用
//因为一个元素只有插入到Dom之后,才能获取焦点
// el.focus();
},
inserted: function (el) {//表示元素插入到DOM中的时候,会执行inserted函数
el.focus();
//和js行为有关的操作 最好在inserted 去执行
},
updated: function () {//当VNode更新的时候 会执行updated,可能会发生多次
}
})
//自定义一个设置字体颜色的指令
Vue.directive('color',{
//样式只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去 这个元素肯定有这样一个内联样式
//将来页面肯定会显示到页面中去,这时候 浏览器肯定会解析 样式 应用给这个元素
bind:function(el,binding){
el.style.color = binding.value;
//和样式相关的操作 一般都可以在 bind 中执行
}
})
Vue-动画
猜你喜欢
转载自www.cnblogs.com/qq166607/p/12325914.html
今日推荐
周排行