vue3 基础-插件 plugin 案例演示
前篇有介绍关于插件 plugin 的无敌强大和基本使用流程后, 当时从俺的经验上看是没咋去使用它的, 即英雄无用武之地. 本篇也是从网上找个案例来为 plugin 的强大来小试牛刀啦.
假设我们要做一个关于对数据做一个校验的插件. 假设我们先用 mixin 的方式来实现的话, 写法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>mixin 数据校验</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return { name: 'youge', age: 18 }
},
// 自定义一种语法, 比如叫 check
check: {
age: {
validate: age => age >= 18,
message: 'hi main, biu biu biu'
}
},
template: `<div>name: {{name}}, age: {{age}}</div>`
})
app.mixin({
created() {
// console.log(this.$options.check)
for (key in this.$options.check) {
const item = this.$options.check[key]
this.$watch(key, (value) => {
const ret = item.validate(value)
if (!ret) console.log(item.message)
})
}
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
虽然这样是能够通过 mixin 来实现, 但考虑更多的扩展性, 和让代理结构更加清晰和具有语义化和模块化的特点呢,咱还是建议用 plugin 的写法啦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>plugin 数据校验</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return { name: 'youge', age: 18 }
},
// 自定义一种语法, 比如叫 check
check: {
age: {
validate: age => age > 18,
message: 'hi main, biu biu biu'
},
name: {
validate: name => name.length >= 8,
message: 'name do do do bala bala'
}
},
template: `<div>name: {{name}}, age: {{age}}</div>`
})
// 通过插件的写法
const checkPlugin = (app, options) => {
app.mixin({
created() {
for (let key in this.$options.check) {
const item = this.$options.check[key]
this.$watch(key, (value) => {
const ret = item.validate(value)
if (!ret) console.log(item.message)
})
}
}
})
}
// 使用插件
app.use(checkPlugin)
const vm = app.mount('#root')
</script>
</body>
</html>
如此这般操作, 今后涉及的各种 vue 的扩展都能优先考虑用 plugin 来作为一个 "处理容器" 的作用啦, 它因为能获取到 app 和 options 嘛, 就理论上有无限扩充的可能性哦.
vue3 基础-插件 plugin 案例演示的更多相关文章
- 042 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 04 案例演示while循环的使用——循环输出英文字母
042 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 04 案例演示while循环的使用--循环输出英文字母 本文知识点:案例演示while循环的使用2 ...
- 041 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 03 案例演示while循环的使用——求1到5的累加和
041 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 03 案例演示while循环的使用--求1到5的累加和 本文知识点:案例演示while循环的使用1 ...
- 038 01 Android 零基础入门 01 Java基础语法 04 Java流程控制之选择结构 05 案例演示switch结构-星期的表示案例以及总结
038 01 Android 零基础入门 01 Java基础语法 04 Java流程控制之选择结构 05 案例演示switch结构-星期的表示案例以及总结 本文知识点:案例演示switch结构并对sw ...
- MS CRM 2011的自定义和开发（11）——插件(plugin)开发（一）
http://www.cnblogs.com/StoneGarden/archive/2012/02/02/2336147.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- 版本控制，svn基础，实战案例，RPM打包
版本控制,svn基础,实战案例,RPM打包 案例1:Subversion基本操作 案例2:使用Subver ...
- MS CRM 2011的自定义和开发（11）——插件(plugin)开发（三）
http://www.cnblogs.com/StoneGarden/archive/2012/02/06/2340661.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- MS CRM 2011的自定义和开发（11）——插件(plugin)开发（四）
http://www.cnblogs.com/StoneGarden/archive/2012/02/08/2343294.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- MS CRM 2011的自定义和开发（11）——插件(plugin)开发（二）
http://www.cnblogs.com/StoneGarden/archive/2012/02/06/2339490.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- 【原创 Hadoop&Spark 动手实践 6】Spark 编程实例与案例演示
[原创 Hadoop&Spark 动手实践 6]Spark 编程实例与案例演示 Spark 编程实例和简易电影分析系统的编写 目标: 1. 掌握理论:了解Spark编程的理论基础 2. 搭建 ...
- AR外包,就找北京动点软件，长年承接AR外包（案例丰富可签合同，内附案例演示）
北京团队长年承接AR项目外包 咨询QQ:372900288 微信:liuxiang0884 以下是AR项目案例演示,索取更多案例请通过以上方式在线联系我们
随机推荐
- 面试官：谈谈RabbitMQ的队头阻塞问题？
RabbitMQ 延迟消息的队头阻塞问题是指,在使用死信队列(DLX)和 TTL(消息过期时间)实现延迟消息时,由于队列的先进先出(FIFO)特性,在队列头部消息未过期的情况下,即使后续消息已经过期也 ...
- MacOS配置Homebrew
Homebrew笔记 1. 介绍 官网:https://brew.sh/ 对于习惯了使用命令来完成一切的程序员来说,安装软件这种小事,自然是能够用命令解决,就不用图形界面选择.但是在 Linux 中, ...
- 『Python底层原理』--CPython的变量实现机制
在Python中,变量的使用看起来非常简单,例如 a = 10,s = "hello"等等. 然而,这种简单的赋值操作背后,CPython其实做了很多复杂的工作. 本文将通过一些简 ...
- java推送企业微信消息
<dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcl ...
- QT5笔记： 32. QPainter 基本绘制
- Typecho博客网站底部添加网站已运行时间教程
样式一: 1. 将代码放入 functions.php 一般在主题根目录:网站 /usr/themes/ 主题 修改一下你自己的网站时间 // 设置时区 date_default_timezone_s ...
- java.lang.IllegalStateException: File name has been re-used with different files. (flume报错）
报错日志: java.lang.IllegalStateException: File name has been re-used with different files. Spooling ass ...
- Java多线程运行探幽
事关Training2中Task4,想看看经典的两个进程并行会是什么样子 题目概述 实现简单的生产者-消费者模型: Tray托盘容量为1:托盘满时不能放入,空时不能取货 Producer生产者共需生产 ...
- Loongson Log
就看看能坚持多久吧 22/2/2及以前: 参照想象中的p7内容增添部分版CP0.部分中断/异常机制: 改sram接口:查阅文档func_test.sram相关内容:查阅vivado bram IP核相 ...
- mac根据路径找文件
在 finder 中 command + shift + G 跳出窗口中输入指定的路径,即可到达.