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项目案例演示,索取更多案例请通过以上方式在线联系我们
随机推荐
- 函数static的作用
限制作用域和保持状态 函数static的作用主要体现在限制作用域和保持状态两个方面.1 限制作用域 静态全局变量:在全局变量前加上static关键字,该变量就被定义成为一个静态全局变量.这种 ...
- java stream sorted排序 考虑null值
项目里使用到排序, java里没有像C# 里的linq,只有stream,查找stream.sorted源码看到有个 Comparator.nullsLast 然后看了一下实现,果然是能够处理null ...
- ML树构建简明教程
数据准备 Teamviewer登录实验室服务器,访问http://172.17.128.86:8501/CleanData,按照页面对应的格式要求分别从NCBI和GISAID数据库下载数据,拖拽到对应 ...
- MybatisPlus - [04] 分页
limit m,n.PageHelper.MyBatisPlus分页插件 001 || MybatisPlus分页插件 (1)引入maven依赖 <dependency> <grou ...
- Flink学习（十二） Sink到JDBC(可扩展到任何关系型数据库)
导入依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java& ...
- 【P7&Loongson】支持部分中断/异常处理
概况 常规单发射5级流水线cpu.新增支持指令{mtc0, mfc0, eret, syscall, break, bgezal, bltzal}:新增异常处理{Int, AdEL, AdES, Ov ...
- FastAPI 错误处理与自定义错误消息完全指南：构建健壮的 API 应用 🛠️
title: FastAPI 错误处理与自定义错误消息完全指南:构建健壮的 API 应用 ️ date: 2025/3/12 updated: 2025/3/12 author: cmdragon e ...
- 【BUG】鸿蒙模拟器虚拟化问题的解决方案
创建记事本文档.txt,键入以下代码: pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum > ...
- useSlots-TS
import {useSlots, VNode} from 'vue'; export const useGetSlots = () => { const slots = useSlots(); ...
- mac强制关闭程序
使用快捷键:Command+Option+Esc 来打开"强制退出应用程序"的窗口,然后选中你需要退出的程序,再点右下方的"强制退出"即可.