Vue插件
1、概述
簡單來說，插件就是指對Vue的功能的增強(qiáng)或補(bǔ)充。
比如說，讓你在每個(gè)單頁面的組件里，都可以調(diào)用某個(gè)方法，或者共享使用某個(gè)變量，或者在某個(gè)方法之前執(zhí)行一段代碼等
2、使用方法
總體流程應(yīng)該是：
【聲明插件】――【寫插件】――【注冊插件】――【使用插件】
寫插件和聲明插件是同步的，然后注冊到Vue對象中（不用擔(dān)心重復(fù)注冊），最后在寫Vue組件的時(shí)候使用寫的插件
聲明插件
先寫一個(gè)js文件，這個(gè)js文件就是插件文件，里面的基本內(nèi)容如下：
/* 說明： * 插件文件：service.js * 作者：王冬 QQ：20004604 * */export default { install: function (Vue, options) { // 添加的內(nèi)容寫在這個(gè)函數(shù)里面 }};其中install的第一個(gè)參數(shù)Vue表示的是Vue的實(shí)例，第二個(gè)參數(shù)表示的是一些設(shè)置選項(xiàng)。
Vue實(shí)例好理解，就是Vue對象。
而options設(shè)置選項(xiàng)就是指，在調(diào)用這個(gè)插件時(shí)，可以傳一個(gè)對象。
例如這個(gè)對象有一個(gè)屬性float，然后在寫插件的一個(gè)方法/變量時(shí)，我需要輸出一個(gè)數(shù)字，然后寫一個(gè)if判斷語句，
假如options.float為true時(shí)，輸出浮點(diǎn)數(shù)；
假如為false或undefined（即沒傳參）時(shí)，輸出為整數(shù)。
具體怎么添加，之后再說。
注冊插件
如果使用過Vue-router，就很好理解，通過import引入后，然后通過 Vue.use(插件名) 注冊插件；
例如，我們通常在main.js里引入各種東西，并且組件的根實(shí)例也在這里
//main.jsimport 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ū)傩訴ue.myGlobalMethod = function () { // 邏輯...}// 2. 添加全局資源Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 邏輯... } ...})// 3. 注入組件Vue.mixin({ created: function () { // 邏輯... } ...})// 4. 添加實(shí)例方法Vue.prototype.$myMethod = function (options) { // 邏輯...}先給出最常用的：【4. 添加實(shí)例方法】的寫法和使用方法
3.1【添加實(shí)例方法或?qū)傩浴?/strong>
1、核心思想：
通過prototype來添加方法和屬性。
2、寫：
//讓輸出的數(shù)字翻倍，如果不是數(shù)字或者不能隱式轉(zhuǎn)換為數(shù)字，則輸出nullVue.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è)有這樣一個(gè)組件：
<template> <div> {{num}} <button @click="double">點(diǎn)擊后讓左邊的數(shù)字翻倍</button> </div></template><script> export default{ data(){ return { num: 1 } }, methods: { double: function () { //這里的this.doubleNumber()方法就是上面寫的組件里的方法 this.num = this.doubleNumber(this.num); } } }</script>我們便可以通過點(diǎn)擊button按鈕，讓num的值，在每次點(diǎn)擊都翻倍了。
4、假如添加的是屬性：
例如：
Vue.prototype.number = 1;
會(huì)發(fā)生什么事情呢？
1、不管是【按值傳遞類型】還是【按引用傳遞類型】，該變量都不會(huì)被不同組件所共享，更準(zhǔn)確的說，假如有A、B兩個(gè)組件。A組件里的number數(shù)值改變，B組件里的number數(shù)值是不會(huì)跟著改變的。因此不要想著引用這樣一個(gè)變量，然后修改了A中的值，B里也自動(dòng)跟著改變了；
2、當(dāng)組件里沒有該屬性時(shí)，調(diào)用時(shí)，顯示的是通過插件獲取的值；
當(dāng)組件里有該屬性時(shí)，調(diào)用時(shí)，顯示的是組件里該屬性的值；
由此而推，函數(shù)也是這樣的，組件里的同名函數(shù)總是會(huì)覆蓋插件提供的函數(shù)。
也就是說，當(dāng)插件提供一個(gè)屬性時(shí)，組件里沒這個(gè)屬性，就用插件的屬性；組件有，就用組件自己的。
3.2【添加全局方法或?qū)傩浴?/strong>
1、核心思想：
就是給Vue對象添加一個(gè)屬性。
初次接觸很容易和上面3.1弄混，實(shí)際上，3.1是給組件里使用的，而3.2是給Vue對象使用的。
例如，假如添加一個(gè)方法test()，那么：
通過3.1添加，是在組件里，通過this.test()來調(diào)用
通過3.2添加，是在外面，通過Vue實(shí)例，如Vue.test()來調(diào)用
2、寫：
//放在哪里參考上面Vue.test = function () { alert("123")}3、用：
//注意先導(dǎo)入Vue對象才能使用Vue.test()
使用時(shí)會(huì)執(zhí)行對應(yīng)的方法，比如這里就是alert彈窗
4、其他：
別問我如果和Vue本身屬性同名會(huì)發(fā)生什么事情，我沒試過=.=
3.3【注入組件】
1、核心思想：
就像寫Vue組件時(shí)，那樣寫，方法名保持一致，其會(huì)在執(zhí)行組件對應(yīng)的方法名之前執(zhí)行。
2、寫：
例如：
Vue.mixin({ created: function () { console.log("組件開始加載") }})然后這里的代碼會(huì)在每個(gè)組件（包括根組件）的created執(zhí)行之前執(zhí)行。
可以自行在每個(gè)組件的created方法里寫一段console.log來查看測試
可以和【實(shí)例屬性】配合使用，用于調(diào)試或者控制某些功能
// 注入組件Vue.mixin({ created: function () { if (this.NOTICE) console.log("組件開始加載") }})// 添加注入組件時(shí)，是否利用console.log來通知的判斷條件Vue.prototype.NOTICE = false;【注入給非Vue實(shí)例本身就有的方法】：
假如是寫給例如methods屬性的某個(gè)方法，例如以下注入：
Vue.mixin({ methods: { test: function () { console.log("mixin test"); } }})那么，組件里若本身有test方法，并 不會(huì) 先執(zhí)行插件的test方法，再執(zhí)行組件的test方法。
而是只執(zhí)行其中一個(gè)，并且優(yōu)先執(zhí)行組件本身的同名方法。這點(diǎn)需要注意
3、用：
不需要手動(dòng)調(diào)用，在執(zhí)行對應(yīng)的方法時(shí)會(huì)被自動(dòng)調(diào)用的（并且先調(diào)用插件里的，再調(diào)用組件本身的）
4、其他：
1、如果同時(shí)有多個(gè)插件注入一個(gè)方法（例如created，那么會(huì)先執(zhí)行先注入的那個(gè)方法，再依次執(zhí)行后注入的，最后執(zhí)行組件本身的）
2、注意，像methods屬性下的方法，并不會(huì)在組件注入后每個(gè)都執(zhí)行，而是只執(zhí)行一個(gè)，并且優(yōu)先執(zhí)行組件本身的。
3.4【添加全局資源】
1、核心思想：
添加方法和正常添加方法類似，甚至幾乎一樣。
可以添加【自定義指令】、【過濾器】、【過渡等】，這里以【過濾器】為例
2、寫：
例如：
//時(shí)間格式化過濾器，輸入內(nèi)容是number或者Date對象，輸出是YYYY-MM-DD HH-MM-SSVue.filter('formatTime', function (value) { Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小時(shí) "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、其他：
可以用這個(gè)找各種有意思的功能，作為插件寫好，然后需要的地方導(dǎo)入就行，超級(jí)方便！
4、示例demo
附一個(gè)有簡單功能的示例demo，提供參考使用
/* 說明： * 插件demo，供學(xué)習(xí)使用 * 本頁面用于提供各種處理服務(wù) * 作者：王冬 QQ：20004604 * */export default { install: function (Vue, options) { // 1. 添加全局方法或?qū)傩? // 略 // 2. 添加全局資源 // 時(shí)間格式化過濾器，輸入內(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(), //小時(shí) "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. 添加全局資源 // 添加注入組件時(shí)，是否利用console.log來通知的判斷條件，也是組件實(shí)例屬性 Vue.prototype.NOTICE = true; // 3. 注入組件 // 注入組件，插件加載開始前提示 Vue.mixin({ created: function () { if (this.NOTICE) console.log("組件開始加載") }, methods: { test: function () { console.log("mixin test"); } } }) // 4. 添加實(shí)例方法 // 返回?cái)?shù)字是輸入數(shù)字的兩倍，如果不是數(shù)字或者不能隱式轉(zhuǎn)換為數(shù)字，則輸出null // 組件實(shí)例方法 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. 添加實(shí)例方法 // 服務(wù)組，將實(shí)例方法整合到$service中，避免命名沖突 Vue.prototype.$service = { //電話號(hào)碼合法性檢查 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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
