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开源系统,旨在解决云原生环境中数据密集型应用面临的挑战,如计算存储分离、数据本地化、无状态服务与有状态计…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
基于Java+MySQL实现(GUI)客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息,对客户进行统一管理,可以把所有客户信息录入系统,进行维护和统计功能。可通过文件的方式保存相关录入数据,对…...
Caliper 配置文件解析:fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
