vue3学习1

vite是新的官方构建工具,构建速度比webpack更快
vue项目的入口文件是index.html,一般在这里引入src/main.js,并且设置好容器#app
App.vue放的是根组件,components里放分支组件


vue组件中写三种标签,template & script & style


配置数据方式,放到data(){}中:

函数放到methods:{}中

以上配置项是vue2的写法,选项式API
vue3是组合式API,使用setup(){ 定义 + return },setup执行时间早于beforeCreate(),setup中没有this的定义,setup可以返回一个渲染函数
import setupExtend from 'vite-plugin-vue-setup-extend' 可以通过name属性指定组件名
setup语法糖,自动return:
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
vue3响应式数据-ref包裹的数据是响应式数据(对象),reactive包裹对象类型的数据



Object.assign(obj1, obj2) 可以更新reactive定义的对象
toRefs可以把reactive定义的每一组key:value变成ref类型的变量

toRef从reactive中一个一个取,其中更改nl,reactive中的age也会变

计算属性computed(()=>{return}),计算依赖的数据变化,就会重新计算,computed是ref变量
以下是只读的写法

可读可写,get set方法:

vue3-watch(监听):
可以监听四种数据:
1、ref定义的数据;
2、reactive定义的数据;
3、函数返回一个值(getter函数);
4、一个包含上述内容的数组。
vue2的watch写法:

vue3的watch写法,是一个函数,声明 监听对象和 回调函数(newValue, oldValue)
终止监听:

监听ref定义的对象类型的数据,监听的是对象的地址值,若想监听对象内部属性的变化,需要手动开启深度监听deep=true;想要立即监听,也要手动开启immediate=true ;
oldValue和newValue 也是监听的新老地址的值,若没变地址,则oldValue=newValue,大部分情况(监听对象地址不变)可以把newValue和oldValue合并成一个参数value。

reactive对象类型数据无法整体修改,必须通过Object.assign来修改

监听reactive对象类型数据,默认是开启深度监听的,隐式创建深层监听且无法关闭!
地址不变,则oldValue和newValue相同
监听对象中的某个值(基本类型的),需要构造getter函数,监听getter函数返回值

监听对象中的某个 子对象,可直接监听,也可以构造getter函数,
***建议写函数式,并加上deep=true(监听中最常用)

同时监视以上几种情况:

v-bind:value= 单向绑定(简写为:value=), v-modal:value= 双向绑定(简写为v-modal=)

v-for写法,v-bind:key=缩写成 :key=

相关文章:
vue3学习1
vite是新的官方构建工具,构建速度比webpack更快 vue项目的入口文件是index.html,一般在这里引入src/main.js,并且设置好容器#app App.vue放的是根组件,components里放分支组件 vue组件中写三种标签,template & s…...
java机器学习计算指标动态阈值
java机器学习计算指标动态阈值 最近听到有的人说要做机器学习就一定要学Python,我想他们掌握的知道还不够系统全面。本文作者以动态阈值需求场景给大家介绍几种常用Java实现的机器学习库,包括使用开源库如Weka或Deeplearning4j(DL4J…...
mac os设置jdk版本
打开环境变量配置文件 sudo vim ~/.bash_profile 设置不同的jdk版本路径 # 设置JAVA_HOME为jdk17路径 export JAVA_HOME$(/usr/libexec/java_home -v 17)# 设置JAVA_HOME为jdk8路径 export JAVA_HOME$(/usr/libexec/java_home -v 1.8) 设置环境变量 # 将jdk加入到环境变量…...
Python正则表达式学习
Python正则表达式全攻略 一、正则表达式基础 1. 什么是正则表达式? 用于描述字符串匹配规则的表达式广泛应用于文本处理、表单验证、数据清洗等领域 2. Python中的re模块 import re3. 基础语法 字符说明示例.匹配任意字符(除换行)a.c → abc\d数字 [0-9]\d\d …...
ShenNiusModularity项目源码学习(10:ShenNius.FileManagement项目分析)
ShenNiusModularity项目支持七牛云和本地图片存储,其文件上传接口及实现就位于ShenNius.FileManagement项目内,该项目内文件不多,主要就是围绕上传本地及七牛云的实现及相关类定义。 扩展类FileManagemenServiceExtensions的AddFileUploa…...
mysql查看binlog日志
mysql 配置、查看binlog日志: 示例为MySQL8.0 1、 检查binlog开启状态 SHOW VARIABLES LIKE ‘log_bin’; 如果未开启,修改配置my.ini 开启日志 安装目录配置my.ini(mysql8在data目录) log-binmysql-bin(开启日志并指定日志前缀ÿ…...
Node.js高频面试题精选及参考答案
目录 什么是 Node.js?它的主要特点有哪些? Node.js 的事件驱动和非阻塞 I/O 模型是如何工作的? 为什么 Node.js 适合处理高并发场景? Node.js 与传统后端语言(如 Java、Python)相比,有哪些优势和劣势? 简述 Node.js 的运行原理,包括 V8 引擎的作用。 什么是 Nod…...
TaskBuilder创建客户信息列表页面
3.4.1选择页面类型 点击上面创建的customer文件夹右侧的加号,打开“前端资源创建向导”对话框,选中“数据查询TFP”,资源名称会自动设置为index,这里我们不用改。 点“下一步”按钮,会弹出下图所示的“创建数据查询T…...
Linux Iptables示例一则
个人博客地址:Linux Iptables示例一则 | 一张假钞的真实世界 关于Iptables的介绍个人强烈推荐:iptables-朱双印博客-第2页。这位兄弟介绍的很详细。 我个人的需求是在同一个网络内从网络上把测试主机与正式环境主机间的网络进行隔离。我的思路是采用OU…...
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
视频教程和更多福利在我主页简介或专栏里 (不懂都可以来问我 专栏找我哦) 如果对你有帮助你可以来专栏找我,我可以无偿分享给你对你更有帮助的一些经验和资料哦 目录: 一、XSS的三种类型: 二、XSS攻击的危害&#x…...
【CXX】4 跨平台构建系统特性对比
多语言构建系统选项为开发团队提供了灵活性和选择,以适应不同的项目需求和现有的技术栈。CXX作为一个设计灵活的工具,旨在与多种构建系统无缝集成。以下是对不同构建系统选项的简要概述和建议: 一、Cargo: 适用场景:…...
MySQL 如何使用EXPLAIN工具优化SQL
EXPLAIN 是 SQL 查询优化中的一个重要工具,主要用于分析和诊断查询执行计划。通过 EXPLAIN,我们可以了解数据库引擎(如 MySQL、PostgreSQL 等)是如何执行特定的查询语句的,包括是否使用了索引、表连接的方式、扫描的行…...
沃丰科技大模型标杆案例|周大福集团统一大模型智能服务中心建设实践
沃丰科技携手老客户周大福如何进行统一大模型智能服务中心建设 “我们相信,科技与创新是推动珠宝行业持续发展的关键力量。”——周大福珠宝集团董事总经理黄绍基。这句话再次强调了科技与创新在珠宝行业发展中的重要性&…...
代码随想录day16
513.找树左下角的值 //迭代法中左视图的最后一位 int findBottomLeftValue(TreeNode* root) {int result 0;queue<TreeNode*> qe;if(root nullptr) return result;qe.push(root);vector<int> lefts;while(!qe.empty()){int sz qe.size();vector<int> tmp…...
常见的软件测试模型及特点
软件测试模型有多种,常见的包括以下几种,每种模型都有其特点和适用场景: 1. V 模型(V-Model) 特点: 测试和开发并行进行,开发的每个阶段都有对应的测试活动。适用于需求明确、开发过程较规范的…...
tailwindcss学习01
系列教程 01 入门 02 vue中接入 入门 # 注意使用cmd不要powershell npm init -y # 如果没有npx则安装 npm install -g npx npm install -D tailwindcss3.4.17 --registry http://registry.npm.taobao.org npx tailwindcss init修改tailwind.config.js /** type {import(tai…...
C语言复杂度分析
文章目录 一 算法效率评估第一,设计可靠的解法:第二,优化解的效率:二 迭代与递归迭代for 循环递归递归和迭代区别一 算法效率评估 第一,设计可靠的解法: 算法需要能够在规定的输入范围内,准确无误地求解问题,确保其结果的正确性和稳定性。这是算法设计的基本要求。 …...
DeepSeek服务器繁忙 多种方式继续优雅的使用它
前言 你的DeepSeek最近是不是总是提示”服务器繁忙,请稍后再试。”,尝试过了多次重新生成后,还是如此。之前DeepSeek官网连续发布2条公告称,DeepSeek线上服务受到大规模恶意攻击。该平台的对话框疑似遭遇了“分布式拒绝服务攻击”࿰…...
Bootstrap Blazor UI 中 <Table> 组件 <TableColumn> 使用备忘01:EF Core 外码处理
应用场景:将外码转换为对应的文本进行显示、编辑。 例如,有一个【用户】表,其中有一个【用户类型ID】字段;另有一个【用户类型】表,包含【ID】、【名称】等字段。现在要求在 <Table> 组件显示列表中,…...
云原生数据抽象与弹性加速:Fluid开源系统的技术解析
在云计算、大数据和人工智能技术迅猛发展的背景下,云原生应用的数据处理和存储需求日益增长。南京大学顾荣教授及其团队开发的Fluid开源系统,旨在解决云原生环境中数据密集型应用面临的挑战,如计算存储分离、数据本地化、无状态服务与有状态计…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
