(尚017)Vue插件
2023-09-11 14:14:08 时间
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.运行截图
相关文章
- Vue sso认证快速接入实践
- Pycharm配置Vue
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue小说阅读器(仿追书神器)
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vscode自动生成vue模板教程
- vscode的vetur插件提示 [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives错误的解决办法
- Vue的简单入门
- [Vue @Component] Extend Vue Components in TypeScript
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- ubuntu21.04(linux):为chrome安装vue-devtools(6.0.0 beta 14)调试插件
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
- vue-cli是什么?和 webpack是什么关系?
- vue.js3: 引入外部字体文件(vue@3.2.36)
- springboot+vue实现前后端分离之后端spring部分(spring boot 2.5.4/vue.js 3.2.4)
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- standalone vue initialization process - Vue应用的初始化过程
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue项目打包后打开空白解决办法
- 前后端分离解决跨域问题:springboot做后端+vue做前端
- vue-seamless-scroll 好用的无缝滚动插件
- vue-countTo---简单好用的一个数字滚动插件
- vue 中promise 异步请求数据
- 计算机毕设 SSM Vue的垃圾分类管理系统(含源码+论文)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue中vue-i18n结合element-ui实现国际化
- Vue、Vuejs从入门到精通 | 邂逅Vuejs
- 199:vue+openlayers 添加删除修改feature信息,双向不同颜色指示互动
- 051:vue+openlayers使用layerswitcher切换图层(示例代码)
- ASP.NET Core微服务(五)——【vue脚手架解析接口】
- Vue学习笔记——vue-router
- Vue 组件的定义、组件的使用、什么是路由、路由的定义和使用、nrm的安装使用