插件定义
插件通常用来为 Vue 添加全局功能。
插件的功能范围没有严格的限制——一般有下面几种:
添加全局方法或者 property。如:vue-custom-element
添加全局资源:指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
——以上内容摘至 Vue 官网
定义插件
plugins.js文件内容
export default {
install(Vue){
//全局过滤器,只保留value的前三位
Vue.filter('defineSlice',function (value) {
return value.slice(0,3)
})
//定义全局指令,在bind指令所实现的内容基础上,增加自动获取焦点的功能
Vue.directive('definebind',{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})
//定义混入
Vue.mixin({
data(){
return {
province:"hubei",
city:"wuhan"
}
}
})
//给Vue原型上添加一个方法(vm和vc就都能用了)
Vue.prototype.hello_world = ()=>{alert('你好,世界!')}
}
}
使用插件
1. 注册插件
main.js文件内容
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from "./plugins"
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用(使用)插件
Vue.use(plugins)
//创建vm
new Vue({
el:'#app',
render: h => h(App)
})
注意:
(1). 先在main.js文件中使用import plugins from "./plugins"语句导入插件plugins
(2). 再使用Vue.use(plugins)进行全局注册插件
- City.vue 组件使用插件 definebind 指令
City.vue组件内容
<template>
<div>
<h2>城市名称:{{name}}</h2>
<input type="text" v-definebind:vaule="name">
</div>
</template>
<script>
export default {
name:'City',
data() {
return {
name: 'wuhan'
}
}
}
</script>
注意:
在组件内部具体使用插件定义的功能时,需要使用v-definebind的形式,与 Vue内置的v-bind指令是同样的使用方法,切记不能直接通过definebind的形式使用。
- Province.vue 组件使用插件 defineSlice & hello_world 方法
Province.vue组件内容
<template>
<div>
<h2>省份名称:{{name | defineSlice}}</h2>
<button @click="test">点我测试插件实现的hello_world方法</button>
</div>
</template>
<script>
export default {
name:'Province',
data(){
return {
name: 'hubei'
}
},
methods: {
test(){
this.hello_world()
}
}
}
</script>
注意:
页面上展示的省份名称是被defineSlice截取过的,最终只展示前三个字符:‘hub’
点击button按钮,会弹框提示:你好,世界!
小结
1.因为plugins.js文件中定义了mixin混合,且整个plugins.js是在main.js文件中进行了全局注册
所以每个组件的data 配置项下都会有province:“hubei”, city:"wuhan"两个属性值,如果相同的属性名,则以组件内部自定义的为准。
2.插件本质是用于增强Vue,包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
插件的使用步骤如下:
- 定义插件
- 注册插件
- 使用插件
最后: 可以在公众号:伤心的辣条 ! 自行领取一份216页软件测试工程师面试宝典文档资料【免费的】。以及相对应的视频学习教程免费分享!,其中包括了有基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等。
我推荐一个【Python自动化测试交流群:746506216】,大家可以一起探讨交流软件测试,共同学习软件测试技术、面试等软件测试方方面面,助你快速进阶Python自动化测试/测试开发,走向高薪之路。
喜欢软件测试的小伙伴们,如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一 键三连哦!