【Vue3学习笔记1】一个清单应用帮你入门Vue.js
Vue 目前已经是国内最流⾏的前端框架之⼀，Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流，比如：
基于 Proxy 的全新响应式实现；
Composition API + <script setup> 组织代码的更优方式；
更有料的 TypeScript 支持；
新的 VDOM diff 逻辑；
更小的体积 + 更高的性能；
生态中还多了 Vite 这个新⼀代工程化工具。
可以说，Vue 3 很好地拥抱了未来，并且在新手友好度上做到了极致。
之前没用过Vue，在学习Vue3之前，先了解下基本的Vue知识，本文内容主要是基于Vue2的。
本文涉及知识点：
- data()声明数据，v-model同步数据，｛｛title｝｝显示数据
- 渲染列表数据，用 v-for
- 执行的函数，放到 methods 配置
- @标记用户交互，监听到交互后，执行methods中配置的函数
- data()声明的数据， 可以是基本类型，也可以是对象–>
- 冒号":" 开头的属性是用来传递数据的，根据 todo.done 来决定是否有 done 这个 class
- 需要对数据进行计算的话，要配置一个computed属性 ,具有缓存能力，可以提升性能
- 计算属性要修改，这时候 computed 的配置，要变成一个对象，分别实现 get 和 set 函数
- v-if对元素进行条件渲染，v-else配合
下面代码可以保存成html，通过浏览器打开查看效果。
<!DOCTYPE html>
<html lang="en">
<body><div id="app"> <h2>{{title}}</h2> <input type="text" v-model="title" @keydown.enter="addToDo"><ul v-if="todos.length"><li v-for="todo in todos"><input type="checkbox" v-model="todo.done"><span :class="{done:todo.done}">{{todo.title}}</span></li></ul><div v-else>暂无数据</div><!-- 以下部分要放到id为app的div里面 --><div>全选<input type="checkbox" v-model="allDone"><span>{{active}} / {{all}}</span></div><button v-if="active<all" @click="clear">清理</button></div><script type="text/javascript" src="/Users/chunming.liu/Downloads/vue.global.js"></script><script>const App = { data() { return { title: "",todos: [{title:"吃饭",done:false},{title:"睡觉",done:false}]} },computed: {active() {return this.todos.filter(v => !v.done).length},all() {return this.todos.length},allDone:{get: function(){return this.active === 0},set: function(val){this.todos.forEach(todo => {todo.done = val});}}},methods:{addToDo(){this.todos.push({title: this.title,done: false})this.title = ""},clear(){this.todos = this.todos.filter(v=>!v.done) //只过滤未完成的}}}Vue.createApp(App).mount("#app") </script><style> .done{ color:gray; text-decoration: line-through; }</style>
</body>
</html>
参考资料
相关文章：
【Vue3学习笔记1】一个清单应用帮你入门Vue.js
Vue 目前已经是国内最流⾏的前端框架之⼀，Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流，比如： 基于 Proxy 的全新响应式实现； Composition API <script setup> 组织代码的更优方式； 更有料的 TypeScript 支…...
go破冰之旅·8·go函数基本实践及各种玩法
一次5-10分钟即可搞定，以干货效率的学习方式带你更直观的玩转各种玩法！ 行文不易，一字一句纯手打创造，倾注了不少精力，感谢支持。 目录 什么是函数？有哪些元素？ 函数参数、返回值 小程序&…...
Qt - 从零到壹的 打地鼠 游戏
❤️🔥欢迎收看西北风的blog，好男人就是我，我就是西北风。✨ Gitee 地址 W_A_Mole NTC_jason/cc语言 - 码云 - 开源中国 (gitee.com) 目录 🟥一：创建一个主窗体 🟣二.：添加主窗口背景图片…...
代码自动发布系统
之前是jenkins发现gitlab代码更新了就自动获取直接部署到服务器 现在是jenkins自动获取Code之后打包成镜像上传到仓库然后通知docker去拉取更新的镜像 分析 旧∶ 代码发布环境提前准备，以主机为颗粒度静态 新: 代码发布环境多套，以容器为颗粒度编译 …...
——安装)
qemu-基础篇(一)——安装
文章目录 env安装查看版本查看支持的开发板查看支持的CPU的型号 env ubuntu 安装 sudo apt-get install qemu sudo apt-get install qemu-system-arm sudo apt-get install qemu-system查看版本 qemu-img -V qemu-system-arm --version qemu-system-aarch64 --version返回结…...
从根本上理解Synchronized的加锁过程
作为一个Java开发，对于Synchronized这个关键字并不会陌生，无论是并发编程，还是与面试官对线，Synchronized可以说是必不可少。 在JDK1.6之前，都认为Synchronized是一个非常笨重的锁，就是在之前的《谈谈Java…...
CANOE入门到精通——CANOE系列教程记录1 第一个仿真工程
本系列以初学者角度记录学习CANOE，以《CANoe开发从入门到精通》参考学习，CANoe16 demo版就可以进行学习 概念 CANoe是一种用于开发、测试和分析汽车电子系统的软件工具。它通过在不同层次上模拟汽车电子系统中的不同部件，如ECU、总线和传感…...
JavaEE——单例模式
文章目录 一、介绍什么是单例模式二、饿汉模式三、懒汉模式四、讨论两种模式的线程安全问题 一、介绍什么是单例模式 在介绍单例模式之前，我们得先明确一个名词设计模式。 所谓设计模式其实不难理解，就是在计算机这个圈子中，呢些大佬们为了…...
关于数据倾斜
1、数据倾斜表现 1.1 hadoop中的数据倾斜表现 有一个多几个Reduce卡住，卡在99.99%，一直不能结束。各种container报错OOM异常的Reducer读写的数据量极大，至少远远超过其它正常的Reducer伴随着数据倾斜，会出现任务被kill等各种诡异…...
Shell第一次作业
要求： 1、判断当前磁盘剩余空间是否有20G，如果小于20G，则将报警邮件发送给管理员，每天检查一次磁盘剩余空间。 2、判断web服务是否运行（1、查看进程的方式判断该程序是否运行，2、通过查看端口的方式判断…...
实例解读nn.AdaptiveAvgPool2d((1, 1))
nn.AdaptiveAvgPool2d((1, 1))在PyTorch中创建一个AdaptiveAvgPool2d类的实例。该类在输入张量上执行2D自适应平均池化。 自适应平均池化是一种池化操作，它计算每个输入子区域的平均值并产生一个指定大小的输出张量。子区域的大小是根据输入张量的大小和输出张量的…...
泛型编程 之模板（template）
C另一种编程思想称为 泛型编程，主要利用的技术就是模板 目录 C另一种编程思想称为 泛型编程，主要利用的技术就是模板 一、概念 二、函数模板 1、语法与使用： 2、函数模板注意事项 3、普通函数与函数模板的区别 4、普通函数与函数模板的调用规…...
用ChatGPT问DotNet的相关问题，发现DotNet工程师的前景还不错
本人最近费了九牛二虎之力注册了一个ChatGPT账号，现在就给大家分享一下，问一下关于.NET的问题，看看ChatGPT的AI功能具体如何？ 一、C#跟其它语言比较的优势 回答： C#是一门编程语言，它是为 Microsoft 的 …...
LeetCode_字符串_简单_415.字符串相加
目录 1.题目2.思路3.代码实现（Java） 1.题目 给定两个字符串形式的非负整数 num1 和num2，计算它们的和并同样以字符串形式返回。 你不能使用任何內建的用于处理大整数的库（比如 BigInteger）， 也不能直接将…...
Insix:面向真实的生成数据增强，用于Nuclei实例分割
文章目录 InsMix: Towards Realistic Generative Data Augmentation for Nuclei Instance Segmentation摘要本文方法数据增强方法具有形态学约束的前景增强提高鲁棒性的背景扰动 实验结果 InsMix: Towards Realistic Generative Data Augmentation for Nuclei Instance Segment…...
CleanMyMac X4.13.2最新版下载
现在cleanmymac x4.13.2中文版是大家首选的优秀mac清理软件。CleanMyMac集合了多种功能，几乎可以满足用户所有的清洁需求。它不仅包含各种清理功能，还具有卸载、维护、扩展、碎纸机等实用功能，可同时替代多种工具。它可以清理、优化、维护和监…...
机器学习算法原理：详细介绍各种机器学习算法的原理、优缺点和适用场景
目录 引言 二、线性回归 三、逻辑回归 四、支持向量机 五、决策树 六、随机森林 七、K-均值聚类 八、主成分分析（PCA） 九、K近邻算法 十、朴素贝叶斯分类器 十一、神经网络 十二、AdaBoost 十三、梯度提升树（Gradient Boosting T…...
Spring Security 6.0系列【32】授权服务器篇之默认过滤器
有道无术，术尚可求，有术无道，止于术。 本系列Spring Boot 版本 3.0.4 本系列Spring Security 版本 6.0.2 本系列Spring Authorization Server 版本 1.0.2 源码地址：https://gitee.com/pearl-organization/study-spring-security-demo 文章目录 前言1. OAuth2Authorizati…...
.NET中比肩System.Text.Json序列化反序列化组件MessagePack
简介 官方定义：MessagePack是一种高效的二进制序列化格式。它允许您像JSON一样在多个语言之间交换数据。但是它更快并且更小。 MessagePack是一种开源的序列化反序列化组件，可支持JAVA，C#等主流语言。在 C# 中使用 MessagePack，…...
Oracle删除列操作：逻辑删除和物理删除
概念 逻辑删除：逻辑删除并不是真正的删除，而是将表中列所对应的状态字段（status）做修改操作，实际上并未删除目标列数据或恢复这些列占用的磁盘空间。比如0是未删除，1是删除。在逻辑上数据是被删除了&#…...
别再手动埋点了！用OpenTelemetry Operator在K8s里给Java应用自动注入链路追踪（附完整YAML）
零代码改造：OpenTelemetry Operator在K8s中实现Java应用全自动观测 当微服务架构遇上云原生环境，可观测性成为工程团队的生命线。但传统埋点方案需要侵入业务代码、增加维护成本，这与快速迭代的DevOps理念背道而驰。本文将揭示如何通过OpenTe…...
AutoRaise：macOS窗口悬停管理的技术实现与配置指南
AutoRaise：macOS窗口悬停管理的技术实现与配置指南 【免费下载链接】AutoRaise AutoRaise (and focus) a window when hovering over it with the mouse 项目地址: https://gitcode.com/gh_mirrors/au/AutoRaise AutoRaise是一款基于Objective-C开发的macOS窗…...
5步攻克TradingAgents-CN本地化部署：从环境搭建到智能体协同
5步攻克TradingAgents-CN本地化部署：从环境搭建到智能体协同 【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版 项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN 一、问题定位࿱…...
保姆级教程：手把手教你用PHPStudy本地搭建GaussDB开发环境（附JDBC连接避坑指南）
从零搭建GaussDB开发环境：PHPStudy集成与JDBC连接实战 在数据库技术快速迭代的今天，国产数据库正逐渐成为企业级应用的新选择。GaussDB作为一款高性能分布式数据库，其学习门槛却让不少开发者望而却步。本文将带你绕过那些官方文档中语焉不详的…...
CasADi实战：用Python搞定机器人路径规划中的数值优化问题（附IPOPT配置）
CasADi实战：用Python搞定机器人路径规划中的数值优化问题（附IPOPT配置） 机器人路径规划的核心在于如何在复杂环境中找到一条既安全又高效的轨迹。这本质上是一个带约束的数值优化问题——我们需要最小化某种代价函数（如路径长度或…...
告别付费IP！手把手教你用ZCU102 PS端DP接口点亮显示器（附参数调试心得）
解锁ZCU102 PS端DisplayPort潜力：零成本实现高效显示输出的实战指南 在嵌入式视觉系统开发中，显示输出往往是项目落地的最后一道关卡。当我在多个Zynq UltraScale MPSoC项目中反复遭遇HDMI IP核的授权困扰和PL端实现的复杂性后，意外发现PS端集…...
深度学习驱动的光谱超分辨率：技术演进与应用前景
1. 光谱超分辨率技术的前世今生 我第一次接触光谱超分辨率技术是在2015年，当时还在用传统的线性插值方法处理遥感图像。记得有次为了获取一片农田的高光谱数据，团队不得不动用昂贵的机载传感器，结果因为天气原因导致数据质量极差。正是这次经…...
Benchmark.js 配置选项终极指南：如何优化你的 JavaScript 性能测试环境
Benchmark.js 配置选项终极指南：如何优化你的 JavaScript 性能测试环境 【免费下载链接】benchmark.js A benchmarking library. As used on jsPerf.com. 项目地址: https://gitcode.com/gh_mirrors/be/benchmark.js Benchmark.js 是一款专业的 JavaScript 性…...
终极指南：Redaxios参数序列化完全掌握，自定义查询字符串生成逻辑如此简单
终极指南：Redaxios参数序列化完全掌握，自定义查询字符串生成逻辑如此简单 【免费下载链接】redaxios The Axios API, as an 800 byte Fetch wrapper. 项目地址: https://gitcode.com/gh_mirrors/re/redaxios Redaxios是一个轻量级的Fetch封装库&a…...
3步实现BERT模型轻量化部署与性能优化：基于Torch-Pruning的结构化剪枝指南
3步实现BERT模型轻量化部署与性能优化：基于Torch-Pruning的结构化剪枝指南 【免费下载链接】Torch-Pruning [CVPR 2023] Towards Any Structural Pruning; LLMs / Diffusion / Transformers / YOLOv8 / CNNs 项目地址: https://gitcode.com/gh_mirrors/to/Torch-P…...