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

Vue3学习宝典

1.ref函数调用的方式生成响应式数据,可以传复杂和简单数据类型

<script setup>
// reactive接收一个对象类型的数据
import { reactive } from 'vue';// ref用函数调用的方式生成响应式数据,可以传复杂和简单数据类型
import { ref } from 'vue'
// 简单数据类型
const count = ref(0)// 复杂数据类型
const user = ref({name: '小夏',age: 18
})const subCount = () => {count.value--
}function addCount() {count.value++
}</script><style></style><template><!-- ref --><div>{{ count }}</div><br><button @click="subCount">-1</button><button @click="addCount">+1</button><div>{{ user.name + user.age }}</div><br>
</template>

2.computed计算属性(依赖的数据发生变化时实时更新)

<script setup>
import { ref } from 'vue'
const list = ref([1, 2, 3, 4, 5, 6])//计算属性
import { computed } from 'vue';
const computedList = computed(() => {return list.value.filter(item => item > 2)
})const addFn = () => {list.value.push(4)
}
console.log(list.value)
</script><style></style><template><div>{{ computedList }}</div><button @click="addFn">添加</button>
</template>

3.watch监视单个数据的变化(相当于操作日志)

<script setup>
import { ref, watch } from 'vue'const num = ref(1)
const name = ref('李四')const changeNum = () => {num.value++
}
const changeName = () => {name.value = name.value + 1
}const obj = ref({name:'老夏',age:18
})
const changeObjName = ()=>{obj.value.name = '小夏'
}//监视单个数据的变化
// 1.watch默认浅层监视,不会监视对象里的属性的值的改变
watch(obj,(newValue,laoValue)=>{console.log('监视单个数据的变化')console.log(newValue,laoValue)
},{// 2.深层监视,可以监视对象里的属性的值的改变deep:true
}
)//监视多个数据的变化
watch([num,name], (newArr, oldArr) => {console.log('监视多个数据的变化')console.log('新数据:' + newArr, '老数据:' + oldArr)
},// 3.immediate一进页面就立即刷新一次{immediate: true,}
)//监视单个对象属性的变化
watch(()=>obj.value.name,(newValue,oldValue)=>{console.log('监视单个对象属性的变化')console.log(newValue,oldValue)
})
</script><style></style><template><div>{{ num }}</div><button @click="changeNum">+++</button><div>{{ name }}</div><button @click="changeName">改名字</button><div>{{ obj.name }}</div><button @click="changeObjName">改对象里面属性的值</button>
</template>

4.Props-Emits组件相互传数据

父组件

<script setup>
import son from '@/components/04-son.vue'
import { ref } from 'vue'const money = ref(1000)
// ele就是子组件传来的属性值
const changeMoney = (attributeValue) => {console.log('子组件花了' +attributeValue)
}
</script><style></style><template><div><!-- car,money里面的属性值直接传给了子组件 --><!-- layOut是子组件向父组件传的值 --><son car="车车" :money="money" @layOut="changeMoney"></son></div>
</template>

子组件

<script setup>
//子组件
// defineProps是固定的写法,定义接收数据的属性名,和属性值类型
const props = defineProps({car: String,money: Number
})//defineEmits([自定义一个属性名])
const emit = defineEmits(['layOut'])// 通过emit向父组件发送数据
const buy = () => {emit('layOut', 100)
}
console.log(props.car)
console.log(props.money)
</script>
<style scoped>
.son {width: 100px;height: 100px;border: 1px solid;
}
</style>
<template><div class="son">子组件</div><div>父组件给了{{ props.money }}</div><button @click="buy">花钱</button>
</template>

5.defineExpose开放属性和方法

父组件

<script setup>
import { ref,onMounted } from 'vue'
import son05 from '@/components/05-son.vue'const input = ref()// 生命周期钩子 onMounted ,一进页面输入框就聚焦
onMounted(() =>{// input.value.focus()
})//绑定事件聚焦
const onClick = ()=>{input.value.focus()
}const getSonData = ref()
const putSonData = ()=>{const fatherName = getSonData.value.nameconsole.log(getSonData.value.greeting())console.log(fatherName)
}</script><style></style><template>
<input type="text" ref="input">
<button @click="onClick">聚焦</button>
<son05  ref="getSonData"></son05>
<button @click="putSonData">获取儿子组件中的数据</button>
</template>

子组件

<script setup>
const name = "儿子的数据"
const greeting = () => {console.log('hello儿子的数据')return '默认rturn未定义'
}// setup语法糖下的组件内部的属性和方法不供外部组件访问
// 可以通过defineExpose编译宏指定哪些属性和方法允许访问
defineExpose({name,greeting
})</script>
<template></template>

6.provide-inject提供和注入数据

父组件

<script setup>
import inject from '@/components/06-inject.vue'
import { provide,ref } from 'vue';//1.提供普通数据给其他组件
provide('commonData',"这是我提供的普通数据哦")//2.提供响应数据给其他组件
const responseData = ref({msg:'这是我提供的响应数据哦',
})
provide('responseData',responseData)//3.提供给数据调用者修改数据的权力
provide('setResponseData',(newResponseData)=>{responseData.value.msg = newResponseData
})
</script><style></style><template>
<inject></inject>
</template>

子组件

<script setup>
import {inject,ref} from 'vue'
//注入数据
const getResponseData = inject('responseData')
const getCommonData = inject('commonData')//注入修改数据的set方法
const setData = inject('setResponseData')
const changeData = ()=>{setData('这是调用者修改后的数据')
}
</script>
<template><div> {{getResponseData.msg}}</div><div>{{getCommonData}}</div><button @click="changeData">点击按钮修改数据</button>
</template>

7.defineModel数据双向绑定 ,其他组件使用v-model就可以获取此属性数据

父组件

<script setup>
import sonDefineMOdel from '@/components/07-defineModel.vue'
import { ref } from 'vue';// 其他组件传来的数据也可以修改
const getSonData = ref('')
</script><style></style><template>
<sonDefineMOdel v-model="getSonData"></sonDefineMOdel>
<div>{{ getSonData }}
</div>
</template>

子组件

<script setup>
import { defineModel } from 'vue';// 数据双向绑定 ,其他组件使用v-model就可以获取此属性数据
const modelValue = defineModel()</script>
<template><!-- @input事件用于实时监控输入框的变化,每次用户输入都会触发该事件。 --><input type="text" :value="modelValue"@input="e => modelValue = e.target.value"><!-- 箭头函数 e => modelValue 的意思是:当事件触发时,将事件对象 e 作为参数传递给箭头函数,并将输入框的新值(即 e.target.value)赋给 modelValue。 -->
</template>

8.pinia管理自己创建的store.js仓库

自己创建的仓库

// store的作用类似于Java的父类,被子类继承数据和方法
import {defineStore
} from 'pinia'
import {ref,computed
} from 'vue'// 声明一个store
export const useStore = defineStore('myStore', {state: () => {const name = ref('小夏')// 声明数据 statelet age = ref(17)// 声明操作数据的方法 action(普通函数)const func = () => {console.log('我是方法')}const addAge = () => {age.value++}// 声明基于数据派生的计算属性const judge = computed(()=>{if (age.value>=18){return "已成年"}else{return "未成年"}})return {name,age,func,addAge,judge}}
})

在组件中引入自己创建的仓库

<script setup>
import Pinia08 from '@/components/08-pinia.vue'
// 引入自己创建的store
import { useStore } from '@/store/myStore'
const getStoreData = useStore()
</script><template><div>{{ getStoreData.name }}</div><Pinia08></Pinia08><div>{{ getStoreData.func() }}</div><div>{{ getStoreData.judge}}</div><button @click="getStoreData.addAge">加年龄</button>
</template><style scoped></style>

相关文章:

Vue3学习宝典

1.ref函数调用的方式生成响应式数据&#xff0c;可以传复杂和简单数据类型 <script setup> // reactive接收一个对象类型的数据 import { reactive } from vue;// ref用函数调用的方式生成响应式数据&#xff0c;可以传复杂和简单数据类型 import { ref } from vue // 简…...

leecode96.不同的二叉搜索树

在画的过程中发现规律&#xff0c;每次选择不同的节点作为根节点&#xff0c;左右两边的节点再排列组合一下就能求出总数 class Solution { public:int numTrees(int n) {vector<int> dp(n1,0);dp[0]1;for(int i1;i<n;i)for(int j0;j<i;j)dp[i]dp[i-j-1]*dp[j];ret…...

树莓派基本配置-基础配置配置

树莓派基本配置 文章目录 树莓派基本配置前言硬件准备树莓派刷机串口方式登录树莓派接入网络ssh方式登录树莓派更换国内源xrdp界面登录树莓派远程文件传输FileZilla 前言 树莓派是一款功能强大且价格实惠的小型计算机&#xff0c;非常适合作为学习编程、物联网项目、家庭自动化…...

手机卡限速丨中国移动5G变3G,网速500kb

以下猜测错误&#xff0c;又有新的猜测&#xff1a;河南移动的卡出省限速。可能是因为流量结算。 “2024年7月1日起&#xff0c;中国移动集团内部将开启跨省流量结算” 在深圳四五年了&#xff0c;之前没有过&#xff0c;就从上个月开始。11月底解除限速&#xff0c;12月刚开…...

SpringCloud之OpenFeign:OpenFeign与Feign谁更适合你的SpringCloud项目?

目录 一、OpenFeign简介1、OpenFeign是什么&#xff08;1&#xff09;核心概念&#xff08;2&#xff09;工作原理&#xff08;3&#xff09;主要特点&#xff08;4&#xff09;使用场景&#xff08;5&#xff09;与Feign的区别&#xff08;6&#xff09;总结 2、OpenFeign与Fe…...

yt6801 ubuntu有线连接驱动安装

耀世16pro的有线网卡驱动安装 下载地址: YT6801 千兆PCIE以太网控制器芯片 1. 创建安装目录 mkdir yt68012. 解压驱动文件 unzip yt6801-linux-driver-1.0.27.zip -d yt68013. 进入驱动目录 cd yt68014. 安装驱动 以 root 权限运行安装脚本&#xff1a; sudo su ./yt_ni…...

算法日记 36-38day 动态规划

今天把动态规划结束掉&#xff0c;包括子序列以及编辑距离 题目&#xff1a;最长公共子序列 1143. 最长公共子序列 - 力扣&#xff08;LeetCode&#xff09; 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &…...

hdlbits系列verilog解答(Dff16e-同步复位上升沿16位触发器)-85

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 本节学习如何创建16位D触发器。有时仅修改一组触发器一部分是有用的。字节使能控制16位寄存器的哪一个字节应当被修改,其中teena[1]控制高位字节[15:8],teena[0]控制低位字节[7:0]。restn是一个同步低电平有效…...

HTTPTomcatServlet

今日目标: 了解JavaWeb开发的技术栈理解HTTP协议和HTTP请求与响应数据的格式掌握Tomcat的使用掌握在IDEA中使用Tomcat插件理解Servlet的执行流程和生命周期掌握Servlet的使用和相关配置1,Web概述 1.1 Web和JavaWeb的概念 Web是全球广域网,也称为万维网(www),能够通过浏览…...

IDEA连接Apifox客户端

IDEA连接Apifox客户端 一、下载Apifox安装包二、IDEA配置三、配置Apifox和IDEA项目同步 一、下载Apifox安装包 Apifox官网&#xff0c;根据自己的操作系统下载对应的Apifox安装包&#xff0c;我是windows系统所以下载的是windows版。 下载 默认仅为我安装&#xff0c;点击下一…...

Linux的奇妙冒险——进程PCB第一讲

进程 1.进程的基本概念2.进程的描述3.查看进程4.通过系统调用获得pid和ppid5.通过fork()系统调用创建子进程6.进程状态1.浅度睡眠 S2.深度睡眠 D3 暂停状态T4.僵尸状态 Z5.死亡状态 X 7.僵尸进程8.孤儿进程9.进程优先级 1.进程的基本概念 任何计算机系统都包含一个基本的程序…...

阿里巴巴热土计划企划金:点燃贫困地区可持续发展的希望之火

在当今社会&#xff0c;扶贫工作已不再仅仅停留在简单的物质援助层面&#xff0c;而是更加注重通过资金支持和资源整合&#xff0c;推动贫困地区的可持续发展。阿里巴巴集团&#xff0c;作为全球领先的电子商务巨头&#xff0c;凭借其强大的影响力和社会责任感&#xff0c;推出…...

2-6 C浮点数指针运算案例

1.0 浮点数指针 float f 1.2f:如何将它对应的4个字节地址空间的数值以十六进制打印出来? 数据在所有计算机中都是以二进制形式存储的&#xff0c;然后以8个位为一个单元称作“字节”&#xff0c;作为计 量和运算处理单元&#xff0c;比如我们说一个文件大小是1MB&#xff0c;指…...

开源的跨平台SQL 编辑器Beekeeper Studio

一款开源的跨平台 SQL 编辑器&#xff0c;提供 SQL 语法高亮、自动补全、数据表内容筛选与过滤、连接 Web 数据库、存储历史查询记录等功能。该编辑器支持 SQLite、MySQL、MariaDB、Postgres 等主流数据库&#xff0c;并兼容 Windows、macOS、Linux 等桌面操作系统。 项目地址…...

07《缓存》计算机组成与体系结构 系列课

目录 深入了解缓存内存 缓存的重要性 游戏中的存储需求与主内存 虚拟内存和按需分页 现代系统中的多级缓存 缓存级别的大小与速度 缓存相关的术语 缓存命中与未命中 页面命中与缺页 局部性原理 结语 深入了解缓存内存 大家好&#xff0c;欢迎来到今天的课程。上节课…...

Java个人博客系统项目文档

项目名称 Java个人博客系统 项目概述 该博客系统是一个多功能的Java应用程序。该系统支持用户发布新文章、浏览他人文章、管理个人文章收藏和删除不再需要的文章。通过该博客系统&#xff0c;用户可以享受一个安全、便捷的在线写作和阅读体验。 运行环境 编程语言&#xff1…...

如何手动设置ubuntu服务器的ip、子网掩码、网关、DNS

在 Ubuntu 服务器上手动设置 IP 地址、子网掩码、网关和 DNS&#xff0c;通常有两种方式&#xff1a;使用传统的 ifconfig 命令和配置文件&#xff0c;或者使用现代的 netplan 配置方式&#xff08;对于 Ubuntu 17.10 及以后版本&#xff0c;netplan 是默认的网络配置工具&…...

SVN clean up失效的一种解决办法

1、进入.svn 2、进入wc.db数据库 sqlite3.exe wc.db sqlite> select * from WC_LOCK; 若有输出则可采用下面的方式来清理 a、delete from WC_LOCK; b、如果删除失败就采用丢弃并重新创建WC_LOCK表的方式清理 drop table WC_LOCK; create table WC_LOCK ( wc_id INTEGER…...

S4 UPA of AA :新资产会计概览

通用并行会计&#xff08;Universal Parallel Accounting&#xff09;可以支持每个独立的分类账与其他模块集成&#xff0c;UPA主要是为了支持平行评估、多货币类型、财务合并、多准则财务报告的复杂业务需求 在ML层面UPA允许根据不同的分类账规则对物料进行评估&#xff0c;并…...

第30天:安全开发-JS 应用NodeJS 指南原型链污染Express 框架功能实现审计0

时间轴&#xff1a; 演示案例&#xff1a; 环境搭建-NodeJS-解析安装&库安装 功能实现-NodeJS-数据库&文件&执行 安全问题-NodeJS-注入&RCE&原型链 案例分析-NodeJS-CTF 题目&源码审计 开发指南-NodeJS-安全 SecGuide 项目、 环境搭建-NodeJ…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...