(尚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.运行截图
(尚017)Vue插件的更多相关文章
- vue插件编写与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...
- 第一个Vue插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...
- 手把手教你写vue插件并发布（二）
前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...
- VUE插件大总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vue插件大全汇总
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
- VUE插件总结
亲们支持我的新博客哦==>地址(以后更新会尽量在新博客更新,欢迎大家访问加入我的后宫w) ) UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和W ...
- Vue插件plugins的基本操作
前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- Vue插件写、用详解（附demo）
出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...
随机推荐
- 5. RDD编程进阶
5.1 累加器 累加器用来对信息进行聚合,通常在向Spark传递函数时,比如使用map()函数或者用filter()传条件时,可以使用驱动器程序中定义的变量,但是集群中运行的每个任务都会得到这些变量的 ...
- 【C#】上机实验七
.开发一个窗体应用程序,窗体上能接收华氏温度或者摄氏温度,点击相应按钮可以相互转换. 要求转换后的华氏温度或者摄氏温度保留小数点后3位,程序中要有异常处理结构. using System; using ...
- 少儿编程|Scratch编程教程系列合集，总有一款适合你
如果觉得资源不错,友情转发,贵在分享!!! 少儿编程Scratch: 少儿编程Scratch第一讲:Scratch完美的初体验少儿编程Scratch第二讲:奇妙的接球小游戏少儿编程Scratch第三讲 ...
- python基础_mysql建表、编辑、删除、查询、更新
1.建一张学生表 包含(id,name,age,sex)2.增加四条数据3.查询表中sex为男的数据4.删除id =3的数据,5.将sex为女的,修改为男 create: CREATE TABLE d ...
- JVM运行时内存结构学习
学习JVM运行模型比较重要,先看一幅图片: 运行时数据区(内存结构) : 1.方法区(Method Area)类的所有字段和方法字节码,以及一些特殊方法如构造函数,接口代码也在这里定义.简单来说,所 ...
- springboot 2.1.3.RELEASE添加filter,servlet源码学习
Servlet规范中,通过ServeltContext来注册Filter.Servlet,这里分析Filter,Servlet是相同逻辑 springboot2.0中,我们通过 FilterRegis ...
- 2.4_Database Interface ODBC数据库驱动程序类型（单层与多层）
两大类:单层驱动程序和多层驱动程序 1.单层数据库驱动程序 早期的xBASE数据库系统的驱动程序就属于单层驱动程序. 单层驱动程序不仅要处理ODBC函数调用,还要解释执行SQL语句,执行数据库管理系统 ...
- OO第四单元(UML)单元总结
OO第四单元(UML)单元总结 这是OO课程的第四个单元,也是最后一个单元.这个单元只有两次作业,相比前三个单元少一次作业.而且从内容上讲这个单元的作业目的以了解UML为主,所以相对前三个单元比较简单 ...
- fastDFS遇到的并发问题recv cmd: 0 is not correct, expect cmd: 100
这种异常一般发生在 多线程同时使用一个StorageClient操作文件的情况下.有两种解决办法:1.对StorageClient对象加锁,变成单线程2.每次下载或上传文件时,重新new一个Stora ...
- gitignore文件不生效
git rm -r --cached . git add . git commit -m 'update .gitignore'