Vue.directive、Vue.prototype、Vue.mixin、Vue.use使用示例

这一期 回顾并巩固一下一般不会怎么用到，刚开始学的是也迷迷糊糊的Vue.directive、Vue.prototype、Vue.mixin、Vue.use，这些方法的使用。

• Vue.directive 全局注册指令

注册：

Vue.directive('has',{
    bind() {
      // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
      console.log('bind 调用一次')
    },
    inserted(el,binding,vnode,oldvnode) { //通常用这个就够了
      // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
      console.log('inserted 绑定后执行的逻辑')
    },
    updated() {
      // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
      console.log('updated 项目数据更新时')
    },
    componentUpdated() {
      // 指令所在组件的vnode及其子vnode全部更新后调用
      console.log('componentUpdated')
    },
    unbind() {
      // 只调用一次，指令与元素解绑时调用
      console.log('unbind ')
    }
  })

//每个方法中都有4个参数就不一一填写了，分别是el,binding,vnode,oldvnode

官方介绍
Vue.directive的官方概念

1、vue.directive 有两个参数：id（string）和[definition](function|object)

2、vue.directive有5种钩子函数，分别是：bind, inserted ,update, componentUpdated, unbind

    2.1、bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置

    2.2、inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）

    2.3、update:所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了            
    变化，也可能没有

    2.4、componentUpdate：指令所在组件的vnode及其子vnode全部更新后调用

    2.5、unbind：只调用一次，指令与元素解绑时调用

3、钩子函数参数
    el,binding（name,value,oldValue,expression,arg,modifiers）,vnode,oldvnode

4、动态指令参数

指令的参数可以是动态的，例如，v-myDirective:[argument]="value"中，argument参数可以根据组件实例数据进行更新 

 5、对象字面量

指令需要多个值，可以传入一个js对象字面量，指令函数接受所有合法的js表达式

使用：

<span v-has="data"></span>

• Vue.prototype.fn 全局注册方法

1，在main.js文件中注册

//$formatDate方法名称  main.js文件
Vue.prototype.$formatDate = function(date) {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Intl.DateTimeFormat('en-US', options).format(new Date(date));
};

2，使用实例： 

//使用方法
//1，模板
<template>
    <div>
        {{$formatDate(new Date())}}
    </div>
</template>

//2,script
  mounted() {
    const formattedDate = this.$formatDate(new Date());
    console.log(formattedDate); // 输出格式化的日期
  }

补充一点，可以不写$符号，写$符号只是为了以免本地组件的 方法名冲突。

• Vue.mixin 全局混入

第一种写法：

// 第一种写法
//创建一个单独的 mixis文件
export const mixins = {
  data() {
    return {
      msg: "我是Mixin中的msg",
    };
  },
  computed: {},
  created() {
    console.log("我是Mixin中的created生命周期函数");
  },
  mounted() {
    console.log("我是Mixin中的mounted生命周期函数");
  },
  methods: {
    clickMiXin() {
      console.log("我是Mixin中的点击事件");
    },
  },
};

//main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import { mixins } from "@/mixin/index";
 
Vue.config.productionTip = false
Vue.mixin(mixins);
 
new Vue({
  render: h => h(App)
}).$mount("#app")

第二种方法：

///////////////////////////////////////////////////////////////////////
//第二种写法,直接在main.js文件中写  *如果较多的话，不推荐这么写，整理起来麻烦
Vue.mixin({
  created: function () {
      console.log("全局混入")
    },
  methods: {
    clickMiXin() {
      console.log("我是Mixin中的点击事件");
    },
  },
})

 

• Vue.use()

Vue.use()是什么通过全局方法 Vue.use() 使用插件，Vue.use 会自动阻止多次注册相同插件，它需要在你调用 new Vue() 启动应用之前完成，Vue.use() 方法至少传入一个参数，该参数类型必须是 Object 或 Function。

如果是 Object 那么这个 Object 需要定义一个 install 方法；如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行，当 install 执行时第一个参数就是 Vue，其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法。

简单例子：

const plugin = {
  install() {
    alert("alert弹窗提示")
  },
}
 
// main.js中引入自定义插件
Vue.use(plugin) // 页面显示"alert弹窗提示"

更深入一点例子：

1，定一个组件

<template>
  <div class="loading-box"> 
    Laoding...
  </div>
</template>

2，创建一个index.js，引入刚刚定义的组件，并设置install方法

// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading={
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
  install:function(Vue){
    Vue.component('Loading',LoadingComponent)
  }
}
// 导出
export default Loading

3，在main.js中使用

在 main.js 中引入 上面定义的 index.js，通过Vue.use()方法将Loading注册为Vue的插件

// 其中'./components/loading/index' 的 /index 可以不写，webpack会自动找到并加载 index 。如果是其他的名字就需要写上。
import Loading from './components/loading/index'
// 这时需要 use(Loading)，如果不写 Vue.use()的话，浏览器会报错，大家可以试一下
Vue.use(Loading)


/////////////////////扩充一点/////////////////////////
//如果不使用，上面2的写法，直接在main.js文件中写 也可以，主要的目的就是让他拥有install方法
//示例：
import Loading from './components/loading/index'
Loading.install = function(Vue){
 Vue.component('Loading',LoadingComponent)
}
Vue.use(Loading)

4，使用组件

<template>
  <div id="app">
    <h1>vue-loading</h1>
    <Loading></Loading>  <!-- 组件也可以单标记<Loading/> -->
  </div>
</template>

 //////////////以上说的都是对象方法，需要提供install函数形式，下面列举一个本身就是函数类型的。

1，创建函数

function demo(Vue){
  console.log(Vue)
}
export default demo

2，引入并且use

import demo from './utils/func'
Vue.use(demo) 

好了，今天就先分享到这里吧，等着再有一些时间，或者大部分会踩坑、基础知识模糊的问题，我还会继续分享出来的