让输入框自动获取焦点(每次刷新自动获取焦点)
<template> <div> <h3>自定义指令</h3> <input ref="inp" type="text"> </div> </template> <script> export default { mounted(){ this.$refs.inp.focus() } } </script> <style> </style>
1.全局注册指令
在main.js中全局注册指令
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 全局注册指令 // 第一个参数是指令名,第二个参数是指令的配置项(在配置项里可以写指令相关的钩子,相关的生命周期函数) Vue.directive('focus', { // inserted会在指令所在元素被插入到页面时触发 inserted(el) { // el就是指令所绑定的元素 el.focus() } }) new Vue({ render: h => h(App), }).$mount('#app')
《!--在input标签中写上自定义指令 v-自定义的指令名 --> <template> <div> <h3>自定义指令</h3> <input v-focus ref="inp" type="text"> </div> </template> <script> export default { // mounted(){ // this.$refs.inp.focus() // } } </script> <style> </style>
2.局部注册指令(只在当前组件范围使用)
<template> <div> <h3>自定义指令</h3> <input v-focus ref="inp" type="text"> </div> </template> <script> export default { // mounted(){ // this.$refs.inp.focus() // } directives:{ // 指令名:指令的配置项 focus:{ // 这里同样也有个形参el inserted(el){ el.focus() } } } } </script> <style> </style>
封装一个指令v-color
自定义指令 v-color ,然后在h1标签中写入v-color指令,但是如果指令颜色写固定为red的话,每个使用该指令的标签都是同样的颜色。
希望标签是不同颜色,将该自定义指令传入不同的值,在data中定义不同的值。
但是自定义指令中是拿不到传入指令的值的,所以必须通过另一个配置项binding,通过binding.value取得传入的指令的值
<template> <div> <!--相当于给两个指令传入不同的值 --> <h1 v-color="color1">指令的值1测试</h1> <h1 v-color="color2">指令的值2测试</h1> </div> </template> <script> export default { data(){ return{ color1:'red', color2:'green' } }, directives:{ color:{ //1.inserted提供的是元素被添加到页面中的逻辑,直接修改数据是无法改变颜色的 // el形参表示的是传入的dom元素 inserted(el,binding){ // console.log(el,binding.value); // 如何拿到传递的不同的值?在binding配置对象中通过binding.value中拿到所对应的变量值 // binding.value就是指令的值 el.style.color = binding.value }, // update(el,binding){ // el.style.color = binding.value // } } } } </script> <style> </style>