来个网站好人有好报/郑州网站策划

让输入框自动获取焦点(每次刷新自动获取焦点）

<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:{// 这里同样也有个形参elinserted(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>