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项目案例演示,索取更多案例请通过以上方式在线联系我们
随机推荐
- 理解 SystemVerilog 中的循环与并发线程
1. 首先理解 scope 的概念 除了常见的module.interface.class.task以及function等等,另外,begin-end block 和 fork-join block ...
- WPF 线程处理
参考链接:https://docs.microsoft.com/zh-cn/previous-versions/dotnet/netframework-3.5/ms771750(v=vs.90)
- 新塘M051 关于 System Tick设置，3种方法操作
关于 System Tick设置,给出3种方法,学习并确认OK: 使用 M051BSPv3.01.001版本 一.使用函数CLK_EnableSysTick() 1 //Enable System T ...
- autMan奥特曼机器人-内置wx机器人的相关说明
内置wx机器人的相关说明 内置wxbot机器人,经常有人说在群内无回复,做以下几个工作: 给群命名 通过机器人微信APP将此群加入到通讯录 重启autMan 内置微信机器人已经支持群名设置 例如转发时 ...
- Nginx 拒绝错误SNI请求以防止源站被扫描
Nginx 1.19.4 版本更新了一个新的配置,允许使用 ssl_reject_handshake 这个参数来拒绝错误 SNI 请求的握手,可以防止被类似Censys互联网扫码工具扫描出源站ip 在 ...
- 一文搞懂 MCP Servers
一文搞懂 MCP Servers 什么是MCP MCP概念 MCP(Model Context Protocol,模型上下文协议)是由 Anthropic 提出并于 2024 年 11 月开源的一种通 ...
- 【MATLAB习题】四杆机构的运动学参数求解
1.问题描述 2. 推导过程 3. matlab代码 最新版代码 直接采用求微分的方式得到角度,角速度等数值解,速度慢,但是代码少,容易看懂(矩阵看起来真难受). 以前做的一个博客文章用的是矩阵运算求 ...
- HTTP 尝试获取 Client IP
HTTP 中获取 Client IP 相关策略需求, 在当下网络环境中多数只能提供建议作用. 更多的是 通过其它唯一标识来挖掘更多潜在价值. 本文主要就一个内容, 如何最大可能尝试在 HTTP 请求中 ...
- linux mongodb安装
更新依赖包 安装前我们需要安装各个 Linux 平台依赖包. Red Hat/CentOS: sudo yum install libcurl openssl Ubuntu 18.04 LTS (&q ...
- 记一次Linux虚拟机分配内存不足的处理方案
记一次Linux虚拟机硬盘空间不足的处理方案 **起因:**公司的服务器是windows的,而我需要一个基于Linux的dev环境,于是用vmvare创建了一个centos7的系统实例,里面安装mys ...