自定義指令-基本使用：

{
  data(){},
  methods: {},
  directives: {
    focus: { // 自定義指令名
        inserted(el){ // 固定配置項 - 當指令插入到標籤自動觸發此函式
            el.focus()
        }
    },
  },
}

自定義指令-傳值和更新

目標: 使用自定義指令, 傳入一個值

需求: 定義color指令-傳入一個顏色, 給標籤設定文字顏色

main.js定義處修改一下

directives: {
  "color":{
    inserted(el, binding){ // 插入時觸發此函式
      el.style.color = binding.value;
    },
    update(el, binding){ // 更新繫結的變數時觸發此函式=》手動更新
      el.style.color = binding.value;
    }
  }
}
 

Direct.vue處更改一下：

<p v-color="theColor" @click="changeColor">使用v-color指令控制顏色, 點選變藍</p>

<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>

總結: v-xxx, 自定義指令, 獲取原生DOM, 自定義操作

axios請求

 async loadData(){
       const res= await axios.get("http://.......")
      //  console.log(data);
    }
  },
 created(){
    this.loadData()
  }