(尚017)Vue插件

1.如何开发插件?

2.编写自己的vue-myPlugin.js插件库,代码如下:

/**
 * vue的插件库
 * 最好使用匿名函数包裹起来,这样代码会更加规范
 * 里面的实现被隐藏了
 */
(function(){
    //MyPlugin是个变量,需要定义
    //需要向外暴露的插件对象
    const MyPlugin={}
    //插件对象必须有一个install()方法
    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
            console.log('Vue函数对象的方法myGlobalMethod()')
        }

        // 2. 添加全局资源,意思就是自定义指令
        Vue.directive('my-directive', function(el,binding){
            el.textContent=binding.value.toUpperCase()
        })

        // 4. 添加实例方法
        //怎样给Vue的实例添加方法?实例方法放在原型对象上,原型对象上的方法实例会看的见
        //如何找到原型对象?通过函数的显示原型属性指向原型对象
        //因为函数原型对象上有方法myGlobalMethod,实例上也有方法,怎样区别?通过添加$区别
        Vue.prototype.$myMethod=function(){
            console.log('Vue实例对象的方法$myMethod()')
        }
    }
    //向外暴露插件
    window.MyPlugin=MyPlugin
})()
3.编写test017.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">
    <p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--插件库应该在vue.js下面,要不自己定义的插件库没法用-->
<script type="text/javascript" src="../js/vue-myPlugin.js"></script>
<script type="text/javascript">
    //声明使用插件,需要在自己写的插件库中向外暴露
    //相当于把插件安装上,你想用别人的插件库,下面这句必须有
    Vue.use(MyPlugin)  //内部会执行MyPlugin的install方法并传入参数Vue,即:MyPlugin.install(Vue)

    Vue.myGlobalMethod()

    const vm=new Vue({
        el:'#test',
        data:{
           msg:'吾乃常山赵子龙也!'
        }
    })
    vm.$myMethod()
</script>
</body>
</html>
4.运行截图

posted @ 2019-12-12 08:33  Curedfisher  阅读(293)  评论(0)  编辑  收藏  举报