Vue插件寫、用詳解（附demo）
Vue插件
1、概述
簡單來說，插件就是指對Vue的功能的增強或補充。
比如說，讓你在每個單頁面的組件里，都可以調(diào)用某個方法，或者共享使用某個變量，或者在某個方法之前執(zhí)行一段代碼等
2、使用方法
總體流程應(yīng)該是：
【聲明插件】——【寫插件】——【注冊插件】——【使用插件】
寫插件和聲明插件是同步的，然后注冊到Vue對象中（不用擔心重復(fù)注冊），最后在寫Vue組件的時候使用寫的插件
聲明插件
先寫一個js文件，這個js文件就是插件文件，里面的基本內(nèi)容如下：
/* 說明：
* 插件文件：service.js
* 作者：王冬 QQ：20004604
* */
export default {
install: function (Vue, options) {
// 添加的內(nèi)容寫在這個函數(shù)里面
}
};
其中install的第一個參數(shù)Vue表示的是Vue的實例，第二個參數(shù)表示的是一些設(shè)置選項。
Vue實例好理解，就是Vue對象。
而options設(shè)置選項就是指，在調(diào)用這個插件時，可以傳一個對象。
例如這個對象有一個屬性float，然后在寫插件的一個方法/變量時，我需要輸出一個數(shù)字，然后寫一個if判斷語句，
假如options.float為true時，輸出浮點數(shù)；
假如為false或undefined（即沒傳參）時，輸出為整數(shù)。
具體怎么添加，之后再說。
注冊插件
如果使用過Vue-router，就很好理解，通過import引入后，然后通過 Vue.use(插件名) 注冊插件；
例如，我們通常在main.js里引入各種東西，并且組件的根實例也在這里
//main.js
import Vue from 'vue'
import App from './App.vue'
//關(guān)鍵是這兩行
import service from './service.js'
Vue.use(service)
new Vue({
el: '#app',
render: (h) => h(App)
})
如代碼中注釋所說，關(guān)鍵是通過import導(dǎo)入service文件，然后在創(chuàng)建根組件之前，讓Vue對象通過use方法來注冊插件service。
通過這樣簡單的兩步，就可以使用插件了。
3、寫插件、使用插件
按照官方文檔，寫插件有四種方法，先給出官方的代碼：
//以下內(nèi)容都是添加到上面install的函數(shù)里面的
// 1. 添加全局方法或?qū)傩?
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 注入組件
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4. 添加實例方法
Vue.prototype.$myMethod = function (options) {
// 邏輯...
}
先給出最常用的：【4. 添加實例方法】的寫法和使用方法
3.1【添加實例方法或?qū)傩浴?/strong>
1、核心思想：
通過prototype來添加方法和屬性。
2、寫：
//讓輸出的數(shù)字翻倍，如果不是數(shù)字或者不能隱式轉(zhuǎn)換為數(shù)字，則輸出null
Vue.prototype.doubleNumber = function (val) {
if (typeof val === 'number') {
return val * 2;
} else if (!isNaN(Number(val))) {
return Number(val) * 2;
} else {
return null
}
}
3、用：
假設(shè)有這樣一個組件：
<template>
<div>
{{num}}
<button @click="double">點擊后讓左邊的數(shù)字翻倍</button>
</div>
</template>
<script>
export default{
data(){
return {
num: 1
}
},
methods: {
double: function () {
//這里的this.doubleNumber()方法就是上面寫的組件里的方法
this.num = this.doubleNumber(this.num);
}
}
}
</script>
我們便可以通過點擊button按鈕，讓num的值，在每次點擊都翻倍了。
4、假如添加的是屬性：
例如：
Vue.prototype.number = 1;
會發(fā)生什么事情呢？
1、不管是【按值傳遞類型】還是【按引用傳遞類型】，該變量都不會被不同組件所共享，更準確的說，假如有A、B兩個組件。A組件里的number數(shù)值改變，B組件里的number數(shù)值是不會跟著改變的。因此不要想著引用這樣一個變量，然后修改了A中的值，B里也自動跟著改變了；
2、當組件里沒有該屬性時，調(diào)用時，顯示的是通過插件獲取的值；
當組件里有該屬性時，調(diào)用時，顯示的是組件里該屬性的值；
由此而推，函數(shù)也是這樣的，組件里的同名函數(shù)總是會覆蓋插件提供的函數(shù)。
也就是說，當插件提供一個屬性時，組件里沒這個屬性，就用插件的屬性；組件有，就用組件自己的。
3.2【添加全局方法或?qū)傩浴?/strong>
1、核心思想：
就是給Vue對象添加一個屬性。
初次接觸很容易和上面3.1弄混，實際上，3.1是給組件里使用的，而3.2是給Vue對象使用的。
例如，假如添加一個方法test()，那么：
通過3.1添加，是在組件里，通過this.test()來調(diào)用
通過3.2添加，是在外面，通過Vue實例，如Vue.test()來調(diào)用
2、寫：
//放在哪里參考上面
Vue.test = function () {
alert("123")
}
3、用：
//注意先導(dǎo)入Vue對象才能使用 Vue.test()
使用時會執(zhí)行對應(yīng)的方法，比如這里就是alert彈窗
4、其他：
別問我如果和Vue本身屬性同名會發(fā)生什么事情，我沒試過=.=
3.3【注入組件】
1、核心思想：
就像寫Vue組件時，那樣寫，方法名保持一致，其會在執(zhí)行組件對應(yīng)的方法名之前執(zhí)行。
2、寫：
例如：
Vue.mixin({
created: function () {
console.log("組件開始加載")
}
})
然后這里的代碼會在每個組件（包括根組件）的created執(zhí)行之前執(zhí)行。
可以自行在每個組件的created方法里寫一段console.log來查看測試
可以和【實例屬性】配合使用，用于調(diào)試或者控制某些功能
// 注入組件
Vue.mixin({
created: function () {
if (this.NOTICE)
console.log("組件開始加載")
}
})
// 添加注入組件時，是否利用console.log來通知的判斷條件
Vue.prototype.NOTICE = false;
【注入給非Vue實例本身就有的方法】：
假如是寫給例如methods屬性的某個方法，例如以下注入：
Vue.mixin({
methods: {
test: function () {
console.log("mixin test");
}
}
})
那么，組件里若本身有test方法，并 不會 先執(zhí)行插件的test方法，再執(zhí)行組件的test方法。
而是只執(zhí)行其中一個，并且優(yōu)先執(zhí)行組件本身的同名方法。這點需要注意
3、用：
不需要手動調(diào)用，在執(zhí)行對應(yīng)的方法時會被自動調(diào)用的（并且先調(diào)用插件里的，再調(diào)用組件本身的）
4、其他：
1、如果同時有多個插件注入一個方法（例如created，那么會先執(zhí)行先注入的那個方法，再依次執(zhí)行后注入的，最后執(zhí)行組件本身的）
2、注意，像methods屬性下的方法，并不會在組件注入后每個都執(zhí)行，而是只執(zhí)行一個，并且優(yōu)先執(zhí)行組件本身的。
3.4【添加全局資源】
1、核心思想：
添加方法和正常添加方法類似，甚至幾乎一樣。
可以添加【自定義指令】、【過濾器】、【過渡等】，這里以【過濾器】為例
2、寫：
例如：
//時間格式化過濾器，輸入內(nèi)容是number或者Date對象，輸出是YYYY-MM-DD HH-MM-SS
Vue.filter('formatTime', function (value) {
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
})
3、用：
和正常使用一樣用就行了，so easy。例如：
{{num|formatTime}}
4、其他：
可以用這個找各種有意思的功能，作為插件寫好，然后需要的地方導(dǎo)入就行，超級方便！
4、示例demo
附一個有簡單功能的示例demo，提供參考使用
/* 說明：
* 插件demo，供學習使用
* 本頁面用于提供各種處理服務(wù)
* 作者：王冬 QQ：20004604
* */
export default {
install: function (Vue, options) {
// 1. 添加全局方法或?qū)傩?
// 略
// 2. 添加全局資源
// 時間格式化過濾器，輸入內(nèi)容是number或者Date對象，輸出是YYYY-MM-DD HH-MM-SS
Vue.filter('formatTime', function (value) {
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
})
// 2. 添加全局資源
// 添加注入組件時，是否利用console.log來通知的判斷條件，也是組件實例屬性
Vue.prototype.NOTICE = true;
// 3. 注入組件
// 注入組件，插件加載開始前提示
Vue.mixin({
created: function () {
if (this.NOTICE)
console.log("組件開始加載")
},
methods: {
test: function () {
console.log("mixin test");
}
}
})
// 4. 添加實例方法
// 返回數(shù)字是輸入數(shù)字的兩倍，如果不是數(shù)字或者不能隱式轉(zhuǎn)換為數(shù)字，則輸出null
// 組件實例方法
Vue.prototype.doubleNumber = function (val) {
if (typeof val === 'number') {
return val * 2;
} else if (!isNaN(Number(val))) {
return Number(val) * 2;
} else {
return null
}
}
// 4. 添加實例方法
// 服務(wù)組，將實例方法整合到$service中，避免命名沖突
Vue.prototype.$service = {
//電話號碼合法性檢查
telNumberCheck: function (tel) {
var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
return pattern.test(tel)
}
}
}
};
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue引用json文件,解決怎么從控制臺把數(shù)據(jù)移到j(luò)son文件中，只需要直接右擊復(fù)制值即可，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue 簡單實現(xiàn)前端權(quán)限控制的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了vue使用Canvas在畫布上添加圖片方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vuex數(shù)據(jù)持久化的兩種方式:手動存儲和vuex-persistedstate插件詳解
這篇文章主要介紹了Vuex數(shù)據(jù)持久化的兩種方式:手動存儲和vuex-persistedstate插件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue3中的props組件抽離，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡單實例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實現(xiàn)技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家介紹了分析總結(jié)20道Vue高頻面試題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法
這篇文章主要介紹了Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
Vue-router結(jié)合transition實現(xiàn)app前進后退動畫切換效果的實例
下面小編就為大家?guī)硪黄猇ue-router結(jié)合transition實現(xiàn)app前進后退動畫切換效果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10