Vue012_ 自定义插件
生活随笔
收集整理的這篇文章主要介紹了
Vue012_ 自定义插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
自定義插件
?
? 說明
1) Vue 插件是一個包含 install 方法的對象
2) 通過 install 方法給 Vue 或 Vue 實例添加方法, 定義全局指令等
代碼展示：
vue-myPlugin.js
/*** 自定義 Vue 插件*/ (function() {const MyPlugin = {}MyPlugin.install = function(Vue, options) {// 1. 添加全局方法或屬性Vue.myGlobalMethod = function() {alert('Vue 函數對象方法執行')}// 2. 添加全局資源Vue.directive('my-directive', function(el, binding) {el.innerHTML = "MyPlugin my-directive " + binding.value})// 3. 添加實例方法Vue.prototype.$myMethod = function() {alert('vue 實例對象方法執行')}}window.MyPlugin = MyPlugin })()Demo14_1.14.3.html
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><!-- 使用自定義指令 --><p v-my-directive="msg"></p></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/vue-myPlugin.js"></script><script type="text/javascript">// 使用自定義插件Vue.use(MyPlugin)var vm = new Vue({el: '#demo',data: {msg: 'jd'}})// 調用自定義的靜態方法Vue.myGlobalMethod()// 調用自定義的對象方法vm.$myMethod()</script></body> </html>結果展示
?
?
?
總結
以上是生活随笔為你收集整理的Vue012_ 自定义插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue011_ 内置指令与自定义指令
- 下一篇： Vue013_ vue组件化编码