vue.js 插件開發demo

時間 2019-11-05

標籤 vue.js vue 插件開發 demo 欄目 JavaScript 简体版

原文原文鏈接

插件能夠讓開發者提供的擴展看起來像是vue本身就有的。由於插件的功能會使用Vue全局對象或者實例來調用，或者被修改從而在Vue的鉤子函數內起做用。好比用於http調用的插件vue-resource被插入到vue後，能夠使用:javascript

Vue.http.get(url)html

的方式使用此插件提供的服務。本文構建一個能夠執行的demo，驗證插件對Vue的修改，代碼以下：vue

var get = function(a){console.log('Hello  ' +a)}
var plugin = {}
plugin.install = function(Vue) {
    if (plugin.installed) {
        return;
    }
    Vue.who = get;
    Object.defineProperties(Vue.prototype, {
        $who: {
            get() {
                return {get:get}
            }
        }
    });
    Vue.mixin({
        created: function () {
          console.log('Plugin activiated')
        }        
    })    
}
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(plugin);
}

此插件以get函數形式提供服務，能夠打印一個字符串。它必須公開一個對象，此對象有一個install的方法，此方法的參數爲Vue，能夠在此方法內經過賦值建立全局方法，像這樣：java

Vue.who = get;

或者針對vue的prototype，經過defineProperties建立實例方法：函數

Object.defineProperties(Vue.prototype, {
            $who: {
                get() {
                    return {get:get}
                }
            }
        });

混入能力能夠把鉤子函數混入到Vue實例內：vue-resource

Vue.mixin({
        created: function () {
          console.log('Plugin activiated')
        }        
    })

此時能夠使用一個文件對它測試：測試

<html>
  <body>
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
    <script type="text/javascript" src="p1.js"></script>
    <script type="text/javascript">
        var vue = new Vue()
        vue.$who.get('Vue Instance')
        Vue.who('Global Vue')
    </script>
  </body>
</html>

打開控制檯，能夠看到以下消息：url

Plugin activiated
p1.js:2 Hello  Vue Instance
p1.js:2 Hello  Global Vue

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。