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

vue3从入门到精通

CDN方式使用vue:

获取复杂数据类型:

使用结构复制语法去除vue前缀:

使用模块化开发:

需要安装插件live server:

需要访问网络地址:

简单数据类型ref的使用:

如何修改number

reactive修改值不需要.value:

ref也可以储存数组类型:

添加绑定事件:

v-on:click简写形式:

按键松开事件:

true和false的快速切换:

v-show显示与隐藏:

v-if的使用:

v-bind动态数据绑定:

简写形式:

v-for的使用:

键值对的使用:

map数组的显示:

v-for条件判断:

如何取对象数据:

v-for ‘title’的使用:

设置唯一key的作用——提升性能:

v-model双向数据绑定:

text:

radio:

checkbox:

单个checkbox:

select:

v-model修饰符:

v-model.lazy延迟绑定:

v-model.number:

v-model.trim:

v-html、v-text:

computed函数计算:

监听器watch:

JS中对象和数组是通过引用传递的,而不是通过值传递。当修改对象或数组的值时,实际上修改的是对象或数组的引用,而不是创建一个新的对象或数组。所以,如果修改了对象或数组的值,那么打印出来的结果则是修改后的值。

可以监听某个函数达到监听数值的变化情况:

watchEffect:(自动监听)

图片轮播:

下一张:

上一张:

单张图片跳转:

添加数据:

显示data中的数据:

删除数据:

清空数据:

全选、取消全选:

修复去除某一项后全选按钮不取消的问题:

价格计算:

商品加减:

sub

add

删除数据:

修复全选勾选状态问题:

使用watch(监听器)对购物车change代码进行优化:

import watch

实现全选,取消全选功能:

使用watch实现总价计算方法:

使用axios实现文章搜索:

接口调用:

ID搜索:

标题搜索:

实现数据的页面展现:

查询前清空数据:

基础vite创建vue3项目:

语法高亮插件vue-official:

自定义代码片段插件vue vsCode snippets:

实际开发中使用组件构建后的代码风格:

创建组件:

header.vue

调用组件:

父传子defineProps:

header:

footer:

父传子非响应式数据:

父传子响应式数据:

子传父defineEmits:

跨组件通信provide:

非响应式数据:

响应式数据:

匿名插槽&具名插槽:

匿名插槽:

具名插槽:

作用域插槽:

生命周期函数:

onMounted:

onUpdated:

其他生命周期函数:

toRef&toRefs:

常规用法——非响应式数据:

toRefs——响应式数据:

toRef——把某个属性转化为响应式数据:

pinia简介:

pinia安装:

定义一个useWebStroe仓库:

调用仓库:

pinia持久化存储:

安装插件:

导入插件及使用:

仓库中应用持久化存储:

为什么不直接使用localStorage?

相关文章:

vue3从入门到精通

CDN方式使用vue: 获取复杂数据类型: 使用结构复制语法去除vue前缀: 使用模块化开发: 需要安装插件live server: 需要访问网络地址: 简单数据类型ref的使用: 如何修改number reactive修改值不需要.value&…...

kubuadm 方式部署 k8s 集群

准备三台机器 主机名IP地址CPU/内存操作系统版本角色K8S版本Docker版本k8s231192.168.99.2312C4GCentos 7master1.23.1720.10.24k8s232192.168.99.2322C4GCentos 7woker1.23.1720.10.24k8s233192.168.99.2332C4GCentos 7woker1.23.1720.10.24 需要在K8S集群各节点上面安装dock…...

Android studio 打包低版本的Android项目报错

一、报错内容 Execution failed for task :app:packageRelease. > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade> com.android.ide.common.signing.KeytoolException: Failed to read key key0 from store "…...

【教程】lighttpd配置端口反向代理

转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 1、修改配置文件: sudo vim /etc/lighttpd/lighttpd.conf2、先添加mod_proxy: 3、然后添加端口映射: 4、保存&…...

微服务之服务保护策略【持续更新】

文章目录 线程隔离一、滑动窗口算法二、漏桶算法三、令牌桶算法 面试题1、Sentinel 限流和Gateway限流的区别 线程隔离 两种实现方式 线程池隔离(Hystix隔离),每个被隔离的业务都要创建一个独立的线程池,线程过多会带来额外的CPU…...

微信小程序的开发

前端:微信小程序开发的技术 后端:springboot的框架 一:微信小程序环境的搭建 1. 访问微信开发者官⽅⽹站的⼩程序开发⼯具下载⻚⾯。 2. 根据你的操作系统(Windows、macOS或Linux)选择合适的版本进⾏下载。 3. 下…...

Oracle中CREATE FORCE VIEW的说明和例子

Oracle数据库中的CREATE FORCE VIEW语句用于创建视图,即使在视图所依赖的基表或对象不存在,或者创建视图的用户对这些对象没有足够的权限时,也能强制创建视图。不过,需要明确的是,尽管视图能被强制创建,但在…...

C#反射基本应用

1、反射 反射是.NET Framework的一个特性,它允许在运行时获取类型的信息以及动态创建对象,调用方法,以及访问字段和属性。 2、代码 using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using Sy…...

1.英语中的从句学习

名词性从句: 1.最常见的连接词是that在宾语从句中的运用,如:I know that you will come. 句中的that 就是连接词,作用就是连接主句和从句,不充当成分也没有含义,只起风向标的作用,告诉你接下来…...

Perl语言简介

Perl语言,全称为Practical Extraction and Report Language(实用提取与报告语言),是一种高级、通用、解释型的编程语言。它由Larry Wall于1987年首次发布,并迅速因其强大的文本处理能力和高度的灵活性而受到广泛应用。…...

【SpringBoot3】使用Jasypt加密数据库用户名、密码等敏感信息

一、使用步骤介绍 使用Jasypt(Java Simplified Encryption)进行数据加密和解密主要涉及几个步骤,包括引入依赖、配置加密密码、加密敏感信息、将加密信息存储到配置文件中,以及应用程序启动时自动解密。以下是详细的使用说明&…...

如何确定MySQL中哪些列适合做索引

1、查询频率 频繁出现在WHERE子句、JOIN条件、ORDER BY子句或GROUP BY子句中的列是创建索引的候选列。 2、数据唯一性 具有唯一性约束的列(如主键、唯一索引)是创建索引的理想选择,因为它们可以确保查询的快速返回。 如果列中的值大部分都…...

C# winform中权限页面的设计和开发

在C# WinForm应用中设计和开发权限页面,主要涉及到用户界面的创建、数据模型的构建以及业务逻辑的实现。以下是一个基本的步骤,可用来参考构建一个权限管理页面: 第一步:设计用户界面 创建一个新的WinForm:在Visual S…...

本地Windows电脑 连接 Windows 服务器

Windows电脑 连接 Windows 服务器 方式1:直接搜索 在电脑的搜索栏,输入“远程桌面连接” 可以选择点击 “打开” 或者直接按 回车键 “Enter”,打开 远程桌面连接 方式2:运行框打开服务器连接 同时按:Windows徽标键…...

【分布式计算框架 MapReduce】MapReduce 初级编程

目录 一、MapReduce 示例程序的导入并运行测试 二、准备 4 个小文件(文件大小分别为 1.7M,5.1M,3.4M,6.8M) 1. 第一种情况,默认分片:不修改程序代码,直接使用 WordCount 源程序 2…...

VideoPrism——探索视频分析领域模型的算法与应用

概述 论文地址:https://arxiv.org/pdf/2402.13217.pdf 视频是我们观察世界的生动窗口,记录了从日常瞬间到科学探索的各种体验。在这个数字时代,视频基础模型(ViFM)有可能分析如此海量的信息并提取新的见解。迄今为止,…...

Spring Boot项目的两种发布方式

一、通过jar包发布 1、在pom中添加一个SpringBoot的构建的插件 <build><plugins><plugin><groupId>org.springframework.boot</groupId><!--自动检测项目中的 main 函数--><artifactId>spring-boot-maven-plugin</artifactId>…...

Java中的服务注册与发现原理与实现

Java中的服务注册与发现原理与实现 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨Java中的服务注册与发现的原理及其实现方式。在现代分布式…...

【Python】成功解决TypeError: ‘float‘ object cannot be interpreted as an integer

【Python】成功解决TypeError: ‘float’ object cannot be interpreted as an integer 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主…...

Java面试八股文

一、Redis 1. 使用场景 &#xff08;1&#xff09;Redis的数据持久化策略有哪些 RDB&#xff1a;全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#xff0c;也被叫作Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中。当Redis实例故…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

python打卡第47天

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图&#xff0c;展示模…...