自定义指令，全局，局部，注册

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

javascript 复制代码

<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中全局注册指令

javascript 复制代码

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')

javascript 复制代码

《！--在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.局部注册指令（只在当前组件范围使用）

javascript 复制代码

<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取得传入的指令的值

javascript 复制代码

<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>