VUE学习七【插件】

/*** 自定义 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 })()
        

使用页面
<div id="demo">
  
  <p v-my-directive="msg">p>
div>
<script type="text/javascript" src="../js/vue.js">script>
<script type="text/javascript" src="vue-myPlugin.js">script>
<script type="text/javascript">//使用自定义插件 Vue.use(MyPlugin) var vm = new Vue({ el: '#demo', data: { msg: 'atguigu' } })//调用自定义的静态方法 Vue.myGlobalMethod() //调用自定义的对象方法 vm.$myMethod() 
  script>