Vue学习——插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义：
    对象.install = function (Vue,options) {
        Vue.xxx
        Vue.xxx
        ...
    }
使用：Vue.use()

总结：其主要方法的使用是创建一个插件js文件，里面暴露出一个install方法并传入Vue参数，可以实现很多自定义的Vue方法，包括过滤器、mixin混入、自定义指令等，并且可以接收使用者传入的值，总体来说可用性很大，实现方式主要在main.js文件中引入，在vue文件中使用方法即可。

定义的一个过滤器插件

export default {
    install(Vue){
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })
    }
}

在main.js中引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入插件
import plugins from './plugins'
// 引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 应用plugins插件
Vue.use(plugins)
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

在自己的vue文件中使用

<template>
    <div class="blogger">
        <h1>{{msg}}</h1>
        <h2>博主尊称：{{name | mySlice}}</h2>
        <h2>博主性别：{{sex}}</h2>
        <el-button type="primary" icon="el-icon-s-promotion" @click="skip">点我跳转到博主博客</el-button>
    </div>
</template>

<script>

export default {
    name:'Blogger',
    data() {
        return {
            name:'才疏学浅的小缘同学',
            sex:'帅哥',
            msg:'青衫烟雨客，似是故人来',
        }
    },
    methods:{
        skip() {
        window.location.href="https://xiaoyuan.blog.csdn.net/"
        }
    }
}
</script>

<style>
    .blogger{
        text-align: center;
    }
</style>

实现效果，原本应该是才疏学浅的小缘同学过滤为才疏学浅