vue中的自定義指令directive

vue中的自定義指令

註冊一個局部指令

	<template>
	  <div>
	    <h1>{{name}}</h1>
	    <p @click='updateEl'>更新</p>
	   <input type="text" v-focus>
	  </div>
	</template>
	
	<script>
	export default {
	  data () {
	    return {
	      name: '初始化'
	    }
	  },
	  methods:{
	    updateEl(){
	      setTimeout(()=>{
	        this.name = '初始化數據'
	      }, 3000)
	    }
	  },
	  directives: {
	    'focus': {
	      inserted: (el) => {
	        // el指的是當前綁定的元素
	        console.log('被綁定元素插入父節點時調用')
	        el.focus()
	      },
	      bind: (el,binding) => {
	        console.log(binding, '鉤子函數的參數')
	        // 只調用一次, 指令第一次綁定到元素時調用, 用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作
	        el.value = '你好'
	      },
	      update: () => {
	       // 被綁定元素所在的模板更新時調用, 而不論綁定值是否變化。通過比較更新前後的綁定值, 可以忽略不必要的模板更新,當上面更新數據改變時會觸發這個事件
	       console.log('我在的組件更新了！')
	      },
	      componentUpdated: () => {
	        // 被綁定元素所在模板完成一次更新週期時調用
	        console.log('我在的組件完成一次更新更新週期時調用')
	      },
	      unbind: () => {
	        // 元素解除綁定時調用
	        console.log('我和指令解除綁定了')
	      }
	    }
	  }
	}
	</script>
	<style scoped  lang="scss">
	</style>

註冊全局的指令

可以把這段代碼寫在main.js中

Vue.directive('fontcolor',{
  inserted: (el)=> {
    el.style.color = 'orange'
  }
})

在組件中調用

 <span v-fontcolor>全局</span>