1, 自定义指令

1.1, 自定义指令

在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令

• 在Vue中，代码的复用和抽象主要还是通过组件
• 通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令

自定义指令分为两种

• 自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用
• 自定义全局指令：app的 directive 方法，可以在任意组件中被使用

自定义局部指令

// MyComponent1.vue
<template>
  <!-- 
        前面学习过各种各样的指令：
            v-html  v-text  v-model  v-if  v-elseif  v-else  v-show  v-for  v-bind   v-on   v-cloak   v-pre  v-once

        组件：
            代码复用

        指令：
            对DOM元素进行底层操作时，可以使用自定义指令

        自定义指令分两类：
            1）自定义局部指令：只能在当前组件中使用
            2）自定义全局指令：在任意组件中使用

        自定义局部指令：
            也是一个配置项，叫directives

     -->
  <div>
      <h1>{{msg}}</h1>
      <hr>
      <h1 v-upper="msg"></h1>
      <hr>
      <h2 v-upper="msg2"></h2>
  </div>
</template>

<script>
export default {
  name: "MyComponent1",
  props: [],
  data() {
    return {
        msg:"hello vue",
        msg2:"abcdef"
    };
  },
  methods: {},
  // 自定义指令是配置在directives选项中的
  directives: {
    // 自定义指令，也是写成函数的形式
    // 使用时，需要以v-打头  v-upper
    // 当使用v-upper时，下面的函数就会执行一次
    // 把字符串中的小写字母变大写
    // upper(element,options) {
    //     // element 表示当前绑定指令的真实DOM节点
    //     // console.log("upper....");
    //     // console.log(element);
    //     // options表示当前指令一些配置项参数（对象）
    //     // console.log(options);

    //     element.innerHTML = options.value.toUpperCase();
    // },
  },
};
</script>

<style lang="less" scoped>
</style>

// MyComponent2.vue
<template>
  <div>
      <input v-focus type="text">
  </div>
</template>

<script>
export default {
  name: "MyComponent2",
  props: [],
  data() {
    return {};
  },
  methods: {},
  directives: {
    // 自定义局部指令
    // focus() {},
  },
};
</script>

<style lang="less" scoped>
</style>

// App.vue
<template>
  <div id="app">
    App
    <!-- 在MyCommont1组件中定义的自定义指令，在其它组件中是不能使用的 -->
    <p v-upper="msg3"></p>
    <hr>
    <MyComponent2></MyComponent2>
    <hr>
    <MyComponent1></MyComponent1>
  </div>
</template>

<script>
import MyComponent1 from "./components/MyComonent1.vue"
import MyComponent2 from "./components/MyComponent2.vue"
export default {
  name: 'App',
  data(){
    return{
      msg3:"abc"
    }
  },
  components: {
    MyComponent1,
    MyComponent2
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

自定义全局指令

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

Vue.config.productionTip = false

// 自定义全局指令
// 第一个参数，表示自定义指令的名字，定义时，不要加v-
// 第二个参数，是一个回调函数
Vue.directive("upper",(element,options)=>{
  element.innerHTML = options.value.toUpperCase();
})

Vue.directive("focus",{
    // 配置钩函数  会在合适的时机，自动调用
    // 当被绑定的元素插入到 DOM 中时……
    inserted(element){
      // element是对应的DOM元素
      console.log("element:",element);
      console.log("inserted........");
      element.focus(); // 自动获取焦点
    }
})

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