Vue学习笔记45--插件

插件：用于增强Vue

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

定义插件：install 可传递多个参数

 

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

　　//定义全局过滤器

　　Vue.filter(......)

　　//添加全局指令

　　Vue.directive(......)

　　//配置全局混入

　　Vue.mixin(......)

　　//添加实例方法

　　Vue.prototype.$mymethod= function(){......}

　　Vue.prototype.$myProperty=xxx

}

使用插件：Vue.use()

示例一：

plugins.js

 

// eslint-disable-next-line no-unused-vars
export default
  {
    install (Vue) {
      console.log('install log', Vue)

      // 全局过滤器
      Vue.filter('mySlice', function (value) {
        return value.slice(0, 4)//字符串截取
      })

      // --------------全局自定义指令开始--------------
      Vue.directive('fbindobjall', {
        // 指令与元素成功绑定时(一上来)
        bind (element, binding) {
          console.log('bind fbindobjall')
          element.value = binding.value
        },
        // 指令所在元素被插入页面时
        // eslint-disable-next-line no-unused-vars
        inserted (element, binding) {
          console.log('inserted fbindobjall',)
          element.focus()
        },
        // 指令所在的模版被重新解析时
        update (element, binding) {
          console.log('update fbindobjall')
          element.value = binding.value
          // element.focus()
        }
      })

      // 定义混入
      Vue.mixin({
        data () {
          return {
            x: 100,
            y: 200
          }
        },
      })

      // 给Vue原型上添加一个方法（vm和vc就都能用了）
      Vue.prototype.hello = () => {
        alert('你好vue')
      }


    }
  }

// export default obj  默认暴露

 

Student.vue

<!-- 组件的结构 -->
<template>
  <div class="demo">
    <h3>学校姓名：{{name}}</h3>
    <h3>学校地址：{{ address|mySlice }}</h3>
    <button @click="test()">查询提示</button>

  </div>
</template>

<!-- 组件交互相关的代码(数据、方法等) -->
<script>
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Student',
  data () {
    return {
      name: '高新一小',
      address: '西安/高新一小'
    }
  },
  methods: {
    test () {
      this.hello()
    }
  }

})
</script>

<!-- 组件的样式 -->
<style>
.demo {
  background-color: burlywood;
}
</style>

School.vue

<!-- 组件的结构 -->
<template>
  <div class="demo">
    <h3>学校姓名：{{name}}</h3>
    <h3>学校地址：{{ address|mySlice }}</h3>
    <button @click="test()">查询提示</button>

  </div>
</template>

<!-- 组件交互相关的代码(数据、方法等) -->
<script>
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Student',
  data () {
    return {
      name: '高新一小',
      address: '西安/高新一小'
    }
  },
  methods: {
    test () {
      this.hello()
    }
  }

})
</script>

<!-- 组件的样式 -->
<style>
.demo {
  background-color: burlywood;
}
</style>

App.vue

<template>
  <div>
    <!-- <img src="./assets/logo.png"> -->

    <Student></Student>
    <hr>
    <School></School>

  </div>
</template>

<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
  name: 'App',
  components: {
    Student,
    School
  },
}
</script>

<style>
</style>

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件
import plugins from './plugins'
// 应用插件
Vue.use(plugins)
// 配置提示
Vue.config.productionTip = false

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