VUE課程 24 外掛程式

vue裡可以自定義外掛程式，在外掛程式裡可新增全域性方法和屬性、新增全域性指令、新增例項方法等等操作。

(function

(window) ;
myplugin.install = function
(vue, options) ;
//2. 新增全域性資源
vue.directive('my-directive', 
});//4. 新增例項方法
vue.prototype.$mymethod = function
(methodoptions) ;
};window.myplugin =myplugin;
})(window);

vue.use(myplugin); //

內部會呼叫外掛程式物件的install()
vue.myglobalmethod(); 
//呼叫myplugin外掛程式全域性的myglobalmethod方法
vm.$mymethod(); //
呼叫myplugin外掛程式例項的$mymethod方法

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>外掛程式
title
>
6head
>
7<
body
>811
<
div 
id>
12<
p>}
p>
13<
p v-my-directive
="msg"
>
p>
14div
>
15<
script 
src="../js/vue.js"
>
script
>
16<
script 
src="vue-myplugin.js"
>
script
>
17<
script
>
18//
宣告使用外掛程式(安裝外掛程式: 呼叫外掛程式的install())
19vue.use(myplugin); 
//內部會呼叫外掛程式物件的install()
20//
myplugin在外掛程式內部已經暴露給了window，所以可以直接用
2122
let vm 
=new
vue(
27});
28//
console.log(vm);
29//
console.log(vue.myglobalmethod);
30vue.myglobalmethod(); 
//呼叫myplugin外掛程式全域性的myglobalmethod方法
31vm.$mymethod(); 
//呼叫myplugin外掛程式例項的$mymethod方法
32script
>
33body
>
34html
>

1 (function

(window) ;
3 myplugin.install = function
(vue, options) ;89
//2. 新增全域性資源
10 vue.directive('my-directive', 
14});
1516
17//
4. 新增例項方法
外掛程式24 目錄列表
this is an executable example with additional code supplied to obtain just the plug ins please click on the download link directory c windows result p...
npm外掛程式開發 Vue外掛程式
vue init webpack npm vue ui,dependencies browserslist 1 last 2 versions not ie 8 devdependencies const path require path const webpack require webpack...
什麼是vue外掛程式，vue外掛程式怎麼使用？
官方解釋 外掛程式通常用來為 vue 新增全域性功能。外掛程式的功能範圍沒有嚴格的限制 一般有下面幾種 新增全域性方法或者屬性。如 vue custom element 新增全域性資源 指令 過濾器 過渡等。如 vue touch 通過全域性混入來新增一些元件選項。如 vue router 新增 v...