14.Vue插件

功能: 用于增强Vue

本质: 包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据

定义插件:

​ 对象.install = function (Vue,options){

​ //1. 添加一个全局过滤器

​ Vue.filter(...)

​ //2. 添加全局指令

​ Vue.directive(...)

​ //3. 配置全局混入(合)

​ Vue.mixin(...)

​ //4. 添加实例方法

​ Vue.prototype.$myMethod=function(){...}

​ Vue.prototype.$myProperty=xxxx

​ }

使用插件: Vue.use(xxx)

plugins.js

export default {
    install(Vue) {
        //定义一个全局过滤器-
        Vue.filter("mySlice", function (value) {
            return value.slice(0, 4);
        })
        //定义自定义指令
        Vue.directive("fbind", {
            //指令与元素成功绑定时(一上来)
            bind(element, binding) {
                element.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element, binding) {
                //自动聚焦
                element.focus()
                console.log(binding);
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value
            }
        })
        //定义混入
        Vue.mixin({
            data() {
                return {
                    x: 200,
                    y: 1000
                }
            }
        })
        //给Vue原型上添加一个方法
        Vue.prototype.hello = () => {
            alert("你好啊!!!!!")
        }
    }
}

School.vue

<template>
  <div>
    <h2>学校名称: {{ name | mySlice}}</h2>
    <h2 @click="showX">学校地址: {{ address }}</h2>
    <button @click="hello">点我测试hello方法</button>
  </div>
</template>
<script>
export default {
  name: "Student",
  data() {
    return {
      name: "广东南方IT-NFIT",
      address: '广东'
    }
  },
  methods:{
    showX(){
      alert(this.x)
      console.log(this);
    }
  }
}
</script>
<style scoped>
</style>

Student.vue

<template>
  <div>
    <h2>学生姓名: {{ name }}</h2>
    <h2>学生性别: {{ sex }}</h2>
    <input type="text" v-fbind="name">
  </div>
</template>
<script>
export default {
  name: "Student",
  data() {
    return {
      name: "呓语",
      sex: '男',
    }
  },
}
</script>
<style scoped>
</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App组件
import App from './App'
//关闭Vue的生产提示
Vue.config.productionTip=false

//引入插件
import plugins from './plugins'
//使用插件
Vue.use(plugins)

new Vue({
    el:"#app",
    render:h=>h(App)
})