技術標籤：VUEvue.js

Vue.directive 自定義指令的入口

基本使用

app.vue 中設定一個h1標籤

 <h1 v-color='"red"'>自定義指令red</h1>
 <h1 v-color='"orange"'>自定義指令orange</h1>
 <h1 v-size='"60px"'>自定義指令 顯示隱藏</h1>

v-color、v-size 時自定義指令的名稱，red orange 60px 是屬性值

在main.js中設定指令

Vue.directive('color',(el,binding)=>{
  el.style.color = binding.value
})
Vue.directive('size',(el,binding)=>{
  el.style.fontSize = binding.value
})
 

使用自定義指令是必須加上 v-

Vue.directive 接收兩個引數 第一個引數是自定義指令的名稱

第二個引數可以是函式也可以是物件

如果是函式 函式接收2個引數 第一個返回元素名稱 第二個返回一個物件，內部有需要的引數

設定的是<h1v-color='5>3'>自定義指令red</h1>

返回結果

• expression ：是一個表示式，返回的是 設定給自定義指令的值

• modifiers：自定義指令如果有修飾符返回的是 布林值物件<h1v-color.stop.self='5>3'>自定義指令red</h1>

• name：自定義指令名稱

• rawName：設定自定義指令名稱

• value：自定義指令返回值

第二個引數是物件，內部是指令清單的函式鉤子

例：顯示與隱藏的切換

Vue.directive('isshow',{
  bind:(el)=>{
    console.log('bind',el)
  },
  inserted:(el,binding)=>{
    console.log("inserted",el,binding)
    //初始化隱藏
    if(!binding.value){
      el.style.display = "none"
    }
  },
  update:(el,binding)=>{
    console.log('update',el,binding)
    if(!binding.value){
      el.style.display = "none"
    }else{
      el.style.display = "block"
    }
  },
  componentUpdated:(el,binding)=>{
    console.log('componentUpdate',el,binding)
  },
  unbind:(el)=>{
    console.log("unbind",el)
  }
})
 

• bind：只調用一次， 指的是指令第一次繫結到元素的時候呼叫 ----------------- 初始化設定樣式時使用
• inserted：只調用一次，節點插入到父節點呼叫 ------ 有邏輯判斷的時候使用
• update：資料更新是呼叫，在虛擬DOM跟新之前

• componentUpdated：資料跟新是呼叫，在虛擬DOM更新後呼叫

• unbind：指令解除安裝時呼叫

<template>
  <div>
      <h1 v-color='5>3'>自定義指令red</h1>
      <h1 v-color='"orange"'>自定義指令orange</h1>
      <h1 v-isshow="isShow" v-size='"60px"'>自定義指令 顯示隱藏</h1>
      <button @click="show"> 顯示隱藏</button>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        isShow:false
      }
    },
    methods:{
      show(){
        this.isShow = !this.isShow
      }
    }
  }
</script>