vue自定义指令

app.vue
<template>
  <div class="">
    <!-- 自定义指令全局
    <input v-focus type="text" name="" id=""><br>
    自定义指令局部
    <input v-focus2 type="text" name="" id=""><br> -->
    <span v-color="corlor">修改指令的值1</span><br>
    <span v-color="corlor1">修改指令的值2</span>
  </div>
</template>

<script>
export default {
  data(){
    return {
      corlor:'red',
      corlor1:'blue'
    }
  },
  directives:{
    // focus2:{
    //   inserted(el){
    //     el.focus()
    //   }
    // },
    color:{
      //inserted只会在页面加载的时候将值渲染上去
      inserted(el,binding){
        el.style.color=binding.value     
      },
      //update会在值修改的时候渲染上去
      update(el,binding){
        el.style.color=binding.value 
      }
    }
  }

}
</script>

<style>

</style>

index.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// //全局指令
// Vue.directive('focus',{
//   inserted(el){
//     //el就是绑定的元素
//     //实现一进入就获取聚焦
//     el.focus()
//   }

// })

new Vue({
  render: h => h(App),
}).$mount('#app')