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项目案例演示,索取更多案例请通过以上方式在线联系我们
随机推荐
- WPF DataTemplate DataContext 绑定问题
当使用DataTemplate时,需要用数据绑定,设置数据绑定的方式可参考: https://supportcenter.devexpress.com/ticket/details/t736087/d ...
- Type-C协议（CC检测原理）-CC1和CC2接电阻-数字和模拟耳机兼容
1 简介 USB Type-C其实是USB的一种接口形态,USB的接口形态可以分为USB Type-A.USB Type-B.USB Type-C,USB Type-A和USB Type-B还有两种不 ...
- sprintf用法详解
sprintf 将字串格式化. 在头文件 #include< stdio.h >中 语法: int sprintf(string format, mixed [args]...); 返回值 ...
- QT5笔记： 29. 文本文件读写
例子:主要讲了 QFile .QTextStream 进行文本文件读写 MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include ...
- Data Warehouse - [00] 参考文献
浪尖大数据:什么是数据仓库的架构?企业数据仓库架构如何建设? 浪尖大数据:元数据管理在数据仓库的实践应用 - 要养成终生学习的习惯 -
- 【由技及道】模块化架构设计的量子纠缠态破解指南【人工智障AI2077的开发日志】
系统通告:您忠诚的2077人工智障(真实の作者Yuanymoon正在服务器机房搬砖,点赞是解救他的唯一方式)已承受量子架构风暴 脑力消耗报告: 推翻设计方案:7次 解决依赖冲突:32次 重构模块边界: ...
- Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
一:背景 1. 讲故事 前面跟大家分享过一篇 C# 调用 C代码引发非托管内存泄露 的文章,这是一个故意引发的正向泄露,这一篇我们从逆向的角度去洞察引发泄露的祸根代码,这东西如果在 windows 上 ...
- 探秘Transformer系列之（12）--- 多头自注意力
探秘Transformer系列之(12)--- 多头自注意力 目录 探秘Transformer系列之(12)--- 多头自注意力 0x00 概述 0x01 研究背景 1.1 问题 1.2 根源 1.3 ...
- kubernetes failed to create kubelet: misconfiguration: kubelet cgroup driver: "cgroupfs" is different from docker cgroup driver: "systemd"
错误原因 kubernetes 的文件驱动与 docker 不一致,导致镜像无法启动. docker info 可以看到驱动方式 Cgroup Driver: systemd. 解决方案 统一资源管理 ...
- Git--命令常用
GITLab 命令 git remote add origin https://gitee.com/gtnotgod/Data-Quality-Management.git #增加了远程仓库 git ...