当前位置： 首页 > news >正文

【Vue3学习笔记1】一个清单应用帮你入门Vue.js

news 2026/5/18 14:02:43

Vue 目前已经是国内最流⾏的前端框架之⼀，Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流，比如：

基于 Proxy 的全新响应式实现；
Composition API + <script setup> 组织代码的更优方式；
更有料的 TypeScript 支持；
新的 VDOM diff 逻辑；
更小的体积 + 更高的性能；
生态中还多了 Vite 这个新⼀代工程化工具。
可以说，Vue 3 很好地拥抱了未来，并且在新手友好度上做到了极致。

之前没用过Vue，在学习Vue3之前，先了解下基本的Vue知识，本文内容主要是基于Vue2的。

本文涉及知识点：

  1. data()声明数据，v-model同步数据，｛｛title｝｝显示数据
  2. 渲染列表数据，用 v-for
  3. 执行的函数，放到 methods 配置
  4. @标记用户交互，监听到交互后，执行methods中配置的函数
  5. data()声明的数据， 可以是基本类型，也可以是对象–>
  6. 冒号":" 开头的属性是用来传递数据的，根据 todo.done 来决定是否有 done 这个 class
  7. 需要对数据进行计算的话，要配置一个computed属性 ,具有缓存能力，可以提升性能
  8. 计算属性要修改，这时候 computed 的配置，要变成一个对象，分别实现 get 和 set 函数
  9. 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 目前已经是国内最流⾏的前端框架之⼀&#xff0c;Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流&#xff0c;比如&#xff1a; 基于 Proxy 的全新响应式实现&#xff1b; Composition API <script setup> 组织代码的更优方式&#xff1b; 更有料的 TypeScript 支…...

编程日记 2023/5/3 1:14:14

go破冰之旅·8·go函数基本实践及各种玩法

一次5-10分钟即可搞定&#xff0c;以干货效率的学习方式带你更直观的玩转各种玩法&#xff01; 行文不易&#xff0c;一字一句纯手打创造&#xff0c;倾注了不少精力&#xff0c;感谢支持。 目录 什么是函数&#xff1f;有哪些元素&#xff1f; 函数参数、返回值 小程序&…...

编程日记 2023/5/3 1:09:13

Qt - 从零到壹的 打地鼠 游戏

❤️‍&#x1f525;欢迎收看西北风的blog&#xff0c;好男人就是我&#xff0c;我就是西北风。✨ Gitee 地址 W_A_Mole NTC_jason/cc语言 - 码云 - 开源中国 (gitee.com) 目录 &#x1f7e5;一&#xff1a;创建一个主窗体 &#x1f7e3;二.&#xff1a;添加主窗口背景图片…...

编程日记 2023/5/31 9:03:56

代码自动发布系统

之前是jenkins发现gitlab代码更新了就自动获取直接部署到服务器 现在是jenkins自动获取Code之后打包成镜像上传到仓库然后通知docker去拉取更新的镜像 分析 旧∶ 代码发布环境提前准备&#xff0c;以主机为颗粒度静态 新: 代码发布环境多套&#xff0c;以容器为颗粒度编译 …...

编程日记 2023/5/3 0:59:10

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返回结…...

编程日记 2023/5/3 0:54:09

从根本上理解Synchronized的加锁过程

作为一个Java开发&#xff0c;对于Synchronized这个关键字并不会陌生&#xff0c;无论是并发编程&#xff0c;还是与面试官对线&#xff0c;Synchronized可以说是必不可少。 在JDK1.6之前&#xff0c;都认为Synchronized是一个非常笨重的锁&#xff0c;就是在之前的《谈谈Java…...

编程日记 2023/5/3 0:49:07

CANOE入门到精通——CANOE系列教程记录1 第一个仿真工程

本系列以初学者角度记录学习CANOE&#xff0c;以《CANoe开发从入门到精通》参考学习&#xff0c;CANoe16 demo版就可以进行学习 概念 CANoe是一种用于开发、测试和分析汽车电子系统的软件工具。它通过在不同层次上模拟汽车电子系统中的不同部件&#xff0c;如ECU、总线和传感…...

编程日记 2023/5/3 0:44:06

JavaEE——单例模式

文章目录 一、介绍什么是单例模式二、饿汉模式三、懒汉模式四、讨论两种模式的线程安全问题 一、介绍什么是单例模式 在介绍单例模式之前&#xff0c;我们得先明确一个名词设计模式。 所谓设计模式其实不难理解&#xff0c;就是在计算机这个圈子中&#xff0c;呢些大佬们为了…...

编程日记 2023/5/3 0:39:05

关于数据倾斜

1、数据倾斜表现 1.1 hadoop中的数据倾斜表现 有一个多几个Reduce卡住&#xff0c;卡在99.99%&#xff0c;一直不能结束。各种container报错OOM异常的Reducer读写的数据量极大&#xff0c;至少远远超过其它正常的Reducer伴随着数据倾斜&#xff0c;会出现任务被kill等各种诡异…...

编程日记 2023/5/3 0:34:04

Shell第一次作业

要求&#xff1a; 1、判断当前磁盘剩余空间是否有20G&#xff0c;如果小于20G&#xff0c;则将报警邮件发送给管理员&#xff0c;每天检查一次磁盘剩余空间。 ​2、判断web服务是否运行&#xff08;1、查看进程的方式判断该程序是否运行&#xff0c;2、通过查看端口的方式判断…...

编程日记 2023/5/3 0:29:03

实例解读nn.AdaptiveAvgPool2d((1, 1))

nn.AdaptiveAvgPool2d((1, 1))在PyTorch中创建一个AdaptiveAvgPool2d类的实例。该类在输入张量上执行2D自适应平均池化。 自适应平均池化是一种池化操作&#xff0c;它计算每个输入子区域的平均值并产生一个指定大小的输出张量。子区域的大小是根据输入张量的大小和输出张量的…...

编程日记 2023/5/3 0:24:02

泛型编程 之模板（template）

C另一种编程思想称为 泛型编程&#xff0c;主要利用的技术就是模板 目录 C另一种编程思想称为 泛型编程&#xff0c;主要利用的技术就是模板 一、概念 二、函数模板 1、语法与使用&#xff1a; 2、函数模板注意事项 3、普通函数与函数模板的区别 4、普通函数与函数模板的调用规…...

编程日记 2023/5/3 0:19:01

用ChatGPT问DotNet的相关问题，发现DotNet工程师的前景还不错

本人最近费了九牛二虎之力注册了一个ChatGPT账号&#xff0c;现在就给大家分享一下&#xff0c;问一下关于.NET的问题&#xff0c;看看ChatGPT的AI功能具体如何&#xff1f; 一、C#跟其它语言比较的优势 回答&#xff1a; C#是一门编程语言&#xff0c;它是为 Microsoft 的 …...

编程日记 2023/5/3 0:14:00

LeetCode_字符串_简单_415.字符串相加

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给定两个字符串形式的非负整数 num1 和num2&#xff0c;计算它们的和并同样以字符串形式返回。 你不能使用任何內建的用于处理大整数的库&#xff08;比如 BigInteger&#xff09;&#xff0c; 也不能直接将…...

编程日记 2023/5/30 4:47:33

Insix:面向真实的生成数据增强，用于Nuclei实例分割

文章目录 InsMix: Towards Realistic Generative Data Augmentation for Nuclei Instance Segmentation摘要本文方法数据增强方法具有形态学约束的前景增强提高鲁棒性的背景扰动 实验结果 InsMix: Towards Realistic Generative Data Augmentation for Nuclei Instance Segment…...

编程日记 2023/5/30 5:00:02

CleanMyMac X4.13.2最新版下载

现在cleanmymac x4.13.2中文版是大家首选的优秀mac清理软件。CleanMyMac集合了多种功能&#xff0c;几乎可以满足用户所有的清洁需求。它不仅包含各种清理功能&#xff0c;还具有卸载、维护、扩展、碎纸机等实用功能&#xff0c;可同时替代多种工具。它可以清理、优化、维护和监…...

编程日记 2023/5/2 23:58:57

机器学习算法原理：详细介绍各种机器学习算法的原理、优缺点和适用场景

目录 引言 二、线性回归 三、逻辑回归 四、支持向量机 五、决策树 六、随机森林 七、K-均值聚类 八、主成分分析&#xff08;PCA&#xff09; 九、K近邻算法 十、朴素贝叶斯分类器 十一、神经网络 十二、AdaBoost 十三、梯度提升树&#xff08;Gradient Boosting T…...

编程日记 2023/5/2 23:53:56

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…...

编程日记 2023/5/2 23:48:55

.NET中比肩System.Text.Json序列化反序列化组件MessagePack

简介 官方定义&#xff1a;MessagePack是一种高效的二进制序列化格式。它允许您像JSON一样在多个语言之间交换数据。但是它更快并且更小。 MessagePack是一种开源的序列化反序列化组件&#xff0c;可支持JAVA&#xff0c;C#等主流语言。在 C# 中使用 MessagePack&#xff0c…...

编程日记 2023/5/2 23:43:54

Oracle删除列操作：逻辑删除和物理删除

概念 逻辑删除&#xff1a;逻辑删除并不是真正的删除&#xff0c;而是将表中列所对应的状态字段&#xff08;status&#xff09;做修改操作&#xff0c;实际上并未删除目标列数据或恢复这些列占用的磁盘空间。比如0是未删除&#xff0c;1是删除。在逻辑上数据是被删除了&#…...

编程日记 2023/5/2 23:38:53

高校站群建设方案：站群模式VS单站建设，核心优势详解

在高校信息化建设中&#xff0c;"官网站群改造"正逐渐取代传统的"单站建设"模式&#xff0c;成为主流选择。要理解这一趋势&#xff0c;首先要明白高校网站建设面临的现实困境。高校传统单站建设的痛点过去&#xff0c;高校各学院、职能部门往往各自为政&a…...

编程新知 2026/5/18 13:58:17

Power BI主题模板完全指南：35+ JSON模板快速构建专业数据可视化方案

Power BI主题模板完全指南&#xff1a;35 JSON模板快速构建专业数据可视化方案 【免费下载链接】PowerBI-ThemeTemplates Snippets for assembling Power BI Themes 项目地址: https://gitcode.com/gh_mirrors/po/PowerBI-ThemeTemplates 在数据驱动的商业决策时代&…...

编程新知 2026/5/18 13:34:49

多线程渲染与路径算法重构：HiveWE如何革新魔兽争霸III地图编辑

多线程渲染与路径算法重构&#xff1a;HiveWE如何革新魔兽争霸III地图编辑 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 技术痛点&#xff1a;二十年技术债务下的地图创作瓶颈 魔兽争霸III地图编辑器自2…...

编程新知 2026/5/18 13:11:46

DDrawCompat：让经典DirectX游戏在现代Windows系统上重获新生的兼容神器

DDrawCompat&#xff1a;让经典DirectX游戏在现代Windows系统上重获新生的兼容神器 【免费下载链接】DDrawCompat DirectDraw and Direct3D 1-7 compatibility, performance and visual enhancements for Windows Vista, 7, 8, 10 and 11 项目地址: https://gitcode.com/gh_m…...

编程新知 2026/5/18 11:58:14

NotebookLM笔记导出全链路实操指南：从Chrome插件绕过限制到API直连导出（含Python脚本）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM笔记导出全链路概览 NotebookLM 是 Google 推出的基于用户上传文档构建个性化知识代理的 AI 工具&#xff0c;其核心价值在于语义理解与上下文生成&#xff0c;但原生不提供直接导出原始笔记…...

编程新知 2026/5/18 11:05:04

3步实现AutoHotkey脚本独立运行：Ahk2Exe编译工具完全指南

3步实现AutoHotkey脚本独立运行&#xff1a;Ahk2Exe编译工具完全指南 【免费下载链接】Ahk2Exe Official AutoHotkey script compiler - written itself in AutoHotkey 项目地址: https://gitcode.com/gh_mirrors/ah/Ahk2Exe 你是否厌倦了每次运行AutoHotkey脚本都需要安…...

编程新知 2026/5/17 11:01:44

LVGUI字体瘦身实战：如何为你的IoT设备定制一个超小的中文字体库

LGVUI字体瘦身实战&#xff1a;为IoT设备定制超小中文字体库的工程化解决方案 在嵌入式物联网设备开发中&#xff0c;每一KB的Flash和RAM都弥足珍贵。当你的智能温控器需要显示"当前温度&#xff1a;25℃"或者电子秤要呈现"净重&#xff1a;0.5kg"时&#…...

编程新知 2026/5/18 13:48:26

智慧树自动刷课神器Autovisor：3分钟极速上手的完整指南

智慧树自动刷课神器Autovisor&#xff1a;3分钟极速上手的完整指南 【免费下载链接】Autovisor 2025智慧树刷课脚本 基于Python Playwright的自动化程序 [有免安装版] 项目地址: https://gitcode.com/gh_mirrors/au/Autovisor 还在为智慧树平台的繁琐操作而烦恼吗&#…...

编程新知 2026/5/18 8:58:57

终极游戏性能调优指南：DLSS Swapper智能管理工具深度解析

终极游戏性能调优指南&#xff1a;DLSS Swapper智能管理工具深度解析 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 游戏体验痛点剖析&#xff1a;当DLSS版本成为性能瓶颈 你是否曾在畅玩《赛博朋克2077》时&#xf…...

编程新知 2026/5/18 10:09:23

Nestia：基于TypeScript编译时分析的NestJS端到端类型安全实践

1. 项目概述&#xff1a;当NestJS遇上TypeScript的极致类型安全如果你正在用NestJS开发后端API&#xff0c;并且对TypeScript的类型安全有近乎偏执的追求&#xff0c;那么你很可能已经听说过&#xff0c;或者正在寻找一个能让你“写一次&#xff0c;安全两次”的工具。我说的“…...

编程新知 2026/5/18 8:55:01