vue自定义指令与自定义插件

一、自定义指令

vue内置指令：指带有v-前缀的特殊属性
自定义指令：指包含类似组件生命周期钩子函数的特殊对象（钩子函数会接收到指令所绑定元素作为其参数）

javascript 复制代码

const mydirective = {
自定义指令钩子：

// 在绑定元素的 attribute 前，或事件监听器应用前调用
created(el,binding,vnode, prevvnode){}，

// 在元素被插入到 DOM 前调用
beforeMount(el,binding, vnode, prevvnode){}

// 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
mounted(el,binding, vnode, prevvnode){},

// 绑定元素的父组件更新前调用
beforeupdate(el,binding, vnode, prevvnode){},

// 在绑定元素的父组件及他自己的所有子节点都更新后调用
updated(el,binding, vnode, prevvnode){},

// 绑定元素的父组件卸载前调用
beforeUnmount(el,binding,vnode,prevvnode){}

// 绑定元素的父组件卸载后调用
unmounted(el,binding, vnode, prevvnode){}
}

自定义指令钩子函数参数说明：

el :指令绑定到的元素。可以用于直接操作 DOM。

binding :一个对象，包含属性：

value :传递给指令的值。

oldvalue :之前的值，仅在 beforeupdate 和 updated 中可用。无论值是否更改，它都可用。

arg:传递给指令的参数(如果有的话)。

modifiers :一个包含修饰符的对象(如果有的话)。

instance :使用该指令的组件实例。

dir :指令的定义对象。

vnode:代表绑定元素的底层VNode。

prevNode :之前的渲染中代表指令所绑定元素的VNode。仅在 beforeupdate 和 updated 钩子中可用.。

实现：

1.App.js(1.定义指令对象 2.通过directive注册指令（全局注册，局部注册） 3.使用)

ini 复制代码

/**
 * 自定义指令
 *    指令: v-特殊属性
 *          vue内置指令:  v-html  v-text v-pre v-bind v-on v-if v-show
 *    自定义指令: 包含组件生命周期函数的特殊对象
 *               1. 特定对象
 *               2. 组件生命周期函数
 *  
 *   实现:
 *      1. 定义指令对象
 *        const foucs = {
 *              created(el,binding){},
 *              mounted(el,binding){},
 *              unmounted(el,binding){}
 *         }
 *      2. 注册指令
 *          全局注册
 *             指令可以整个应用所有标签使用
 *             const app = creatApp()
 *             app.directive('foucs',focus)
 *          局部注册
 *             只在当前注册的组件标签中使用
 *             const App = {
 *                  components:{}
 *                  directives:{
 *                      foucs:foucs
 *                  }
 *              }
 *
 */

// v-focus自动获取焦点
const focus = {
  mounted(el, binding) {
    el.focus();
  },
};

// v-red使作用的元素内容为红色

const red = {
  mounted(el, binding) {
    el.style.color = "red";
  },
};

// v-color根据指令值，设置指令作用元素内容颜色
const color = {
  mounted(el, binding) {
    el.style.color = binding.value;
  },

  updated (el,binding) {
    el.style.color = binding.value;
  }
}

export default {
//局部注册
  directives: {
    focus,
    red,
    color,
  },

  data() {
    return {
      title: "自定义指令",
      vcolor: "red",
    };
  },

  methods: {
    bindUpdateColor() {
      this.vcolor = "blue";
      console.log(this.vcolor);
    },
  },

  /*html*/
  template: `<div>
                <h2>{{title}}</h2>
                <input type="text" v-focus>
                
                <p v-red>内容</p>

                <p v-color="vcolor">v-color指令内容</p>

                <!--<p v-color="'blue'">v-color指令内容</p>-->

                <button @click="bindUpdateColor">确定</button>
            </div>
            `,
};

main.js

javascript 复制代码

// 使用vue3 ES模块构建版本
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 导入根组件
import App from './App.js'
// createApp(App).mount('#app')
const app = createApp(App)

// v-focus自动获取焦点
const focus = {
  mounted(el, binding) {
    el.focus();
  },
};

//全局注册
app.directive('focus',focus)
app.mount('#app')

二、自定义插件

自定义插件指拥有install()方法的对象，是一种为vue添加全局功能的工具代码。可以在里面注册全局的组件或指令，然后集成到vue全局对象中，全局使用。

install(app, options){}方法参数说明：

app: vue应用实例

options: 可选参数对象

实现：

main.js导入集成插件

javascript 复制代码

// 使用vue3 ES模块构建版本

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import { Myplugin } from "./plugins/MyPlugin.js";

// 导入根组件
import App from './App.js'
// createApp(App).mount('#app')
const app = createApp(App);

app.use(Myplugin); //集成插件
app.mount("#app")

MyPlugin.js定义插件(1.定义插件 2.通过app.use集成插件 3.使用)

javascript 复制代码

export const Myplugin = {
    // app: vue应用实例
    // options: 可选参数对象

    install(app, options) {
      // 封装插件功能
      // 封装全局组件, 封装全局指令

      // 注册组件
      // const ButtonCouter = {
      //  data() {
      //     return {
      //       title: "按钮",
      //     };
      //   },
      //   template: `<button>{{title}}</button>`,
      // }
      // app.component("ButtonCouter",ButtonCouter)

      // 注册组件
      app.component("ButtonCouter", {
        data() {
          return {
            title: "按钮",
          };
        },
        template: `<button>{{title}}</button>`,
      });

      //注册指令
      app.directive("color", {
        mounted(el, binding) {
          el.style.color = binding.value;
        },

        updated(el, binding) {
          el.style.color = binding.value;
        },
      });
 
      //使一个资源可被注入整个应用app.provide()
    },
  };

App.js使用

css 复制代码

export default {
  data() {
    return {
      title: "自定义指令",
    };
  },

  /*html*/
  template: `<div>
                <h2>{{title}}</h2>
                <button-couter></button-couter>
                <p v-color="'blue'">插件定义的指令内容</p>
            </div>
            `,
};