Vue2(笔记30) - 脚手架 - 插件

插件

Vue的插件功能可以整合之前所有的全局配置，也支持传参，使用起来比较强大；

Vue 的插件，本质上是一个 对象；要求这个对象中，必须包含 install() 方法；

第一步：定义一个插件文件；

pubPlugin.js （名字随便取的）

export default {
    install(Vue,x,y,z){
        console.log('插件就绪',x,y,z)
        // 全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,5)
        })
        // 全局自定义指令
        Vue.directive('fbind',{
            bind(element,binding){
                element.value = binding.value
            },
            inserted(element){
                element.focus()
            },
            update(element,binding){
                element.value = binding.value
            }
        })
        // 全局定义混入
        Vue.mixin({
            data(){
                return{
                    year:2023
                }
            }
        })
        // 全局定义原型方法
        Vue.prototype.hello = ()=> console.log('欢迎学习Vue！');
    }
}

提示1：定义插件的固定语法： ​​install(Vue){}​​，所有的配置都写在这个方法里，这个方法默认参数是 Vue 构造函数，等于把整个 Vue 都给了，所以可以干什么事情；

提示2：之前学到的 过滤器、自定义指令、混入和原型方法都可以写在插件里；

第二步：在mian.js 中引入并使用；

import Vue from 'vue'
import App from './App.vue'
import pubPlugin from './pubPlugin'  // 引入插件
Vue.config.productionTip = false
Vue.use(pubPlugin,100,200)           // 使用插件

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

提示1：引入插件的方法  import xxx from './xxx' ；

提示2：使用插件的方法  Vue.use(xxx) ，有几个插件就调用几次；

提示3：使用插件可以传参，默认第一个参数是 Vue；

第三步：在各子组件中调用插件的能力；

​在子组件中分别应用插件的各项能力。

在 school.vue 中使用插件能力：

<template>
    <div class="demo">
        <h2>学校名称：{{ name | mySlice}}</h2>
        <h2>学校地址：{{ address }}</h2>
        <h2>学年：{{year}}</h2>
    </div>
</template>

<script>
export default {
    name: "schoolInfo",
    data() {
        return {
            name:"51cto.com",
            address:"北京",
        };
    }
};
</script>

提示1：在 name 上使用管道过滤器，只显示 name 的前5位字符；

提示2：使用混入属性 year ，显示学年信息；

看下效果：

提示1：插件中的 console.log 执行了，“插件就绪”；

提示2：学校名称 51cto.com 通过管道过滤器只显示了前5个：51cto

提示3：混入的属性 year 也显示了；

在组件 student.vue 中使用插件的能力：

<template>
    <div class="demo">
        <h2>学员名称：{{ name }}</h2>
        <h2>学员年龄：{{ age }}</h2>
        <input type="text" v-fbind:value="name">
        <button @click="hello">点击按钮欢迎</button>
    </div>
</template>

<script>
export default {
    name: "studentInfo",
    data() {
        return {
            name: "Jack",
            age: 18,
        }
    }
};
</script>

提示1：给 input 上绑定自定义事件，自动获取焦点；

提示2：点击按钮执行 hello 方法；

看下效果：

刷新页面时，input 获取到焦点，点击按钮，输出欢迎语；

写个 plugin.js ，把若干方法整合到一起并应用全局，增强了Vue的实用性；

插件总结：

功能：用于增加Vue；

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

定义插件：

对象.install = function(Vue,options){
  Vue.filter(...)
  Vue.directive(...)
  Vue.mixin(...)
  Vue.prototype.$myMethod = function(){...}
  Vue.prototype.$myProperty = xxx
}

引入插件：

import xxx from './xxx'

使用插件：

Vue.use(xxx)