vue3 组合式API
<!-- 深度监听 deep 点击按钮控制台,才输出count变化了: 1, 老值: 0;否则控制台不输出 -->
<script setup>import { ref,watch } from 'vue'const state = ref({count:0})const setCount = () => {state.count.value++}watch(state, () => {console.log(`count变化了: ${newValue}, 老值: ${oldValue}`)},{deep:true})
</script><template><div><button @click="setCount">count is: {{ state.count }}</button></div>
</template>
setup 语法糖 (API入口)

<script setup>// 数据const message = 'this is ms'// 函数const logMessage = () =>{console.log(message);}</script><template><div>{{ message }}</div><button @click="logMessage ">log</button>
</template>
ref和 reactive的用法
共同点: 用函数调用的方式生成响应式数据
不同点: reactive: 只支持对象类型的数据
ref: 可以支持简单类型和对象类型的数据, 在脚本区域修改ref产生的响应式对象数据,必须通过value属性,来获取。
<script setup>
// 用ref和reactive 共同点。用函数调用的方式生成响应式数据
// 1.导入函数
// import { reactive } from 'vue';
// // 只支持对象类型
// const state = reactive({
// count:0// })// // 定义一个函数// const setCount =()=>{
// state.count++
// }import { ref } from 'vue';const state = ref(0)
const setCount =() =>{// 在脚本区域修改ref产生的响应式对象数据,必须通过value属性state.value++
}
</script><template><!-- <button @click="setCount">{{ state.count }}</button> -->
<button @click="setCount">{{ state }}</button></template>
计算属性computed

<script setup>
// 原始响应式数据
import { ref } from 'vue';
// 导入computed
import {computed} from 'vue';
const list = ref([1,2,3,4,5,6,7,8])
// 执行函数 return 计算之后的值,变量接收const computedList = computed(() =>{// 计算属性中不应该有副作用(比如异步请求,修改dom)// 避免直接修改计算属性的值(计算属性应该是只读的)return list.value.filter(item => item > 2)
})setTimeout(()=>{list.value.push(9,10)
},3000)
</script><template><div>原始响应式数组 - {{ list }}</div><div>计算属性数组 - {{ computedList }}</div>
</template>
watch基本使用

<script setup>import { ref,watch } from 'vue'
const count = ref(0)
// 监听count的变化
// watchAPI,ref对象不需要加.value
watch(count, (newValue, oldValue) => {console.log(`new: ${newValue}, old: ${oldValue}`)
})
</script> <template><h1>{{ count }}</h1><button @click="count++">count is: {{ count }}</button>
</template>
监听多个数据源
<script setup>import { ref,watch } from 'vue'const count = ref(0)
const name = ref('zhangsan')
const changeCount = () => {count.value++
}
const changeName = () => {name.value = 'lisi'
}// 监听多个数据源
watch([count,name],([newCount,newName],[oldCount,oldName])=>{console.log(`newCount: ${newCount}, oldCount: ${oldCount}`)console.log(`newName: ${newName}, oldName: ${oldName}`)}
)
</script><template><div><button @click="changeCount">count is: {{ count }}</button></div><div><button @click="changeName">name is: {{ name }}</button></div></template>
立即执行

<!-- 立即执行的watchAPI immidiate -->
<!-- 默认浅层监听 --><script setup>import { ref,watch } from 'vue'const count = ref(0)const setCount = () => {count.value++}watch(count, (newValue, oldValue) => {console.log(`new: ${newValue}, old: ${oldValue}`)},{immediate:true})
</script><template><div><button @click="setCount">count is: {{ count }}</button></div>
</template>
深度执行
<script setup>import { ref,watch } from 'vue'const state = ref({count:0})const setCount = () => {state.count.value++}watch(state, () => {console.log(`count变化了: ${newValue}, 老值: ${oldValue}`)},{deep:true})
</script><template><div><button @click="setCount">count is: {{ state.count }}</button></div>
</template>
精确侦听
<!-- 精确侦听对象的某个属性 --><!-- 在不开启deep的情况下,监听age的变化,只有age变化时才会执行回调 --><script setup>import { ref,watch } from 'vue'const state = ref({name:'asdas',age:10})const changeName = () => {state.value.name = 'children'}const changeAge = () => {state.value.age = 20}// 精确侦听某个具体属性 侦听agewatch(() => state.value.age,() => {console.log('age变化了')})
</script><template><div><div>当前name == {{ state.name }}</div><div>当前age == {{ state.age }}</div><div><button @click="changeName">修改name</button><button @click="changeAge">修改age</button></div></div></template>

生命周期API

<script setup>
import { onMounted } from 'vue';onMounted(() => {console.log('1.组件挂载完毕mounted执行了');
})
onMounted(() => {console.log('2.组件挂载完毕mounted执行了');
})
</script><template></template>
组合式API下的父传子(转到 父传子 内容)
基本思想:
1. 父组件中给子组件绑定属性
2. 子组件内部通过props 选项接收
相关文章:
vue3 组合式API
<!-- 深度监听 deep 点击按钮控制台,才输出count变化了: 1, 老值: 0;否则控制台不输出 --> <script setup>import { ref,watch } from vueconst state ref({count:0})const setCount () > {state.count.value}watch(state, () > {console.log(…...
二、什么是Vue中的响应式?Vue的响应式原理
什么是Vue中的响应式 Vue中的响应式,简而言之就是当数据发生变化时,页面跟随变化。使用过Vue的v-model都有比较深刻的感受,我们在代码中修改双向绑定的数据后,页面上的数据也会自动更新,页面跟随变化 我们看个例子&am…...
快9月了才开始强化,跟张宇还是武忠祥?
快9月了才开始强化,跟张宇还是武忠祥! 说真的,我也替这位同学着急,但是考研数学越是进度慢,就越不能急!急着赶进度,容易出事!遇到这个问题的朋友肯定不止一位,那我就帮大…...
SSM好易学学习平台---附源码92142
摘 要 随着互联网趋势的到来,各行各业都在考虑利用互联网将自己推广出去,最好方式就是建立自己的互联网系统,并对其进行维护和管理。在现实运用中,应用软件的工作规则和开发步骤,采用Java技术建设好易学学习平台。本文…...
对于mp4 ios和mac safari不能播放问题处理
直接对原mp4文件进行重新转码就可以了 ffmpeg -i origin.mp4 -vcodec h264 -profile:v high -level 4.1 orgin_hl.mp4 原因源文件不符合苹果基本规则 苹果官网文档...
开发同城交友找搭子系统app前景分析
开发同城交友系统APP的背景 社交需求多样化: 随着城市化的加速和人们生活节奏的加快,现代人的社交圈子往往较为狭窄,难以结识新朋友。传统的线下交友方式受限于时间、地点等因素,难以满足现代人对于交友的多样化需求。互联网和智…...
faiss向量数据库测试《三体》全集,这家国产AI加速卡,把性能提了7倍!
在人工智能和机器学习技术的飞速发展中,向量数据库在处理高维数据方面扮演着日益重要的角色。近年来,随着大型模型的流行,向量数据库技术也得到了进一步的发展和完善。 向量数据库为大型模型提供了一个高效的数据管理和检索平台,…...
负载均衡---相关概念介绍(一)
负载均衡(Load Balance)是集群技术的一种重要应用,旨在将负载(工作任务)进行平衡、分摊到多个操作单元上进行运行,从而提高系统的并发处理能力、增加吞吐量、加强网络处理能力,并提供故障转移以…...
计算机基础知识复习8.14
子线程抛异常主线程能否catch 在不做任何处理的情况下,主线程不能catch 解决方式: 子线程使用try catch来捕获异常 为线程设置未捕获异常处理器UncaughtExceptionHandler 通过future的get方法捕获异常 JVM相关参数 显示指定堆内存-Xms和-Xmx指定最…...
【io深层理解】
io深层理解 1.内核态2.用户态3. select IO多路复用执行原理4. select io多路复用限制和不足 1.内核态 一个进程会涉及多文件的修改,比如说。那么在内核态就会维护一个表,这个表叫文件描述符bitmap,这个表会传递给内核态,当然肯定传…...
【懒人工具】指定新文件,替换全盘旧文件
没辙,就是懒 最近在调整.clang-format,这个format文件要跟着项目走,只换本地默认的还不够。调整好以后一个项目一个项目的换,有时候会漏掉,索性全盘一次性换完。 基于自己操作的流程,写了个脚本࿰…...
React+Vis.js(02):设置节点样式
文章目录 1、修改vis.js的节点和关系颜色2、修改vis.js节点的字体颜色2.1 统一设置节点字体颜色2.2 自定义某个节点的字体颜色3、设置vis.js节点的边框颜色和宽度3.1 设置单个节点3.2 统一设置1、修改vis.js的节点和关系颜色 在vis.js中,可以通过color属性,来给node节点添加…...
3G网络要彻底没了
2月21日,三大运营商公布了最新的用户数据,移动联通电信三家5G套餐用户数合计超过了7.5亿。信通院早前公布的数据显示,一月份,国内市场5G手机出货量2632.4万部,占同期手机出货量的79.7%。 这两项数据,说明我们已经进入到了5G时代,5G的普及速度远超很多人的想象。就在5G逐…...
如何配置ESXI主机的IP地址管理
🏡作者主页:点击! 🐧Linux基础知识(初学):点击! 🐧Linux高级管理防护和群集专栏:点击! 🔐Linux中firewalld防火墙:点击! ⏰️创作…...
软件测试学习笔记丨测试用例设计方法
本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/31921 一,黑盒测试方法论 1,等价类 1.1 定义 等价类划分是一种重要的、常用的黑盒测试方法不需要考虑程序的内部结构,只需要考虑程序的输入规格即可它将…...
MinIO基本用法
在现代云计算和大数据领域,对象存储因其可扩展性、可靠性和低成本成为数据存储的重要选择。MinIO作为一个高性能、分布式的对象存储系统,凭借其开源、简单易用以及与Amazon S3兼容的特性,在业界得到了广泛的应用。本文将带您了解MinIO的基本用…...
MySQL windows版本安装
一、下载MySQL安装包 访问MySQL官网:首先,访问MySQL的官方网站(MySQL),或者更具体地,访问MySQL的下载页面(MySQL :: Download MySQL Community Server)。 选择适合的版本࿱…...
Python实现人脸轮廓提取
目录 一、背景知识1.1 人脸检测和轮廓提取的意义1.2 人脸检测方法概述1.3 轮廓提取方法概述二、常用的人脸轮廓提取方法2.1 基于边缘检测的轮廓提取2.2 基于形态学操作的轮廓提取2.3 基于特征点检测的轮廓提取三、Python实现人脸轮廓提取3.1 安装依赖库3.2 使用Dlib进行人脸检测…...
Prettier+Vscode setting提高前端开发效率
文章目录 前言Prettier第一步:下载依赖(团队合作)或下载插件(独立开发)第二步:添加.prettierrc.json文件**以下是我使用的****配置规则** 第三步:添加.prettierignore文件**以下是我常用的****配…...
YOLOv10实时端到端目标检测
文章目录 前言一、非极值大抑制(NMS)二、NMS算法的具体原理和步骤三、YOLOV10创新点四、YOLOv10使用教程五、官方github地址 前言 距离上次写YOLOv5已经过去了两年,正好最近用YOLOv10重构了项目,总结下YOLOv10。 YOLOv10真正实时端到端目标检测ÿ…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
