Vue3基础(二)

一、搭建工程(vite)

## 1.创建命令
npm create vue@latest## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

二、setup语法糖

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changName">修改名字</button><button @click="changAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script lang="ts">export default {name:'Person',}
</script><!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">console.log(this) //undefined// 数据（注意：此时的name、age、tel都不是响应式数据）let name = '张三'let age = 18let tel = '13888888888'// 方法function changName(){name = '李四'//注意：此时这么修改name页面是不变化的}function changAge(){console.log(age)age += 1 //注意：此时这么修改age页面是不变化的}function showTel(){alert(tel)}
</script>

扩展：上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化

  1. 第一步：npm i vite-plugin-vue-setup-extend -D

  2. 第二步：vite.config.ts

    import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [ VueSetupExtend() ]
})

  3. 第三步：<script setup lang="ts" name="Person">

三、路由

1、基本使用

npm i vue-router

路由配置文件

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'const router = createRouter({history:createWebHistory(),routes:[{path:'/home',component:Home},{path:'/about',component:About}]
})
export default router

main.ts 入口文件

import router from './router/index'
app.use(router)app.mount('#app')

App.vue

<template><div class="app"><h2 class="title">Vue路由测试</h2><!-- 导航区 --><div class="navigate"><RouterLink to="/home" active-class="active">首页</RouterLink><RouterLink to="/news" active-class="active">新闻</RouterLink><RouterLink to="/about" active-class="active">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView></RouterView></div></div>
</template><script lang="ts" setup name="App">import {RouterLink,RouterView} from 'vue-router'  
</script>

2、两种路由工作模式

3、编程式导航

路由组件的两个重要的属性：$route和$router变成了两个hooks

import {useRoute,useRouter} from 'vue-router'const route = useRoute()
const router = useRouter()console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

4、重定向

{path:'/',redirect:'/about'
}

四、pinia

1、搭建环境

npm install pinia

src\main.ts

import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

2、存储、读取数据

  1. Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

  2. 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

  3. 具体编码：src/store/count.ts

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}
})

使用数据

<template><h2>当前求和为：{{ sumStore.sum }}</h2>
</template><script setup lang="ts" name="Count">// 引入对应的useXxxxxStore	import {useSumStore} from '@/store/sum'// 调用useXxxxxStore得到对应的storeconst sumStore = useSumStore()
</script>

3、修改数据

  1. 第一种修改方式，直接修改 
    countStore.sum = 666
  2. 第二种修改方式：批量修改 
    countStore.$patch({sum:999,school:'atguigu'
})
  3. 第三种修改方式：借助action修改（action中可以编写一些业务逻辑） 
    import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sumthis.sum += value}},//减decrement(value:number){if(this.sum > 1){this.sum -= value}}},/*************/
})

组件中调用action

// 使用countStore
const countStore = useCountStore()// 调用对应action
countStore.incrementOdd(n.value)

4、storeToRefs

  • 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。

  • 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据。

<template><div class="count"><h2>当前求和为：{{sum}}</h2></div>
</template><script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore，随后解构 */const {sum} = storeToRefs(countStore)
</script>

5、getters

  1. 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。

  2. 追加getters配置。

    // 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{/************/},// 状态state(){return {sum:1,school:'atguigu'}},// 计算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
})

  3. 组件中读取数据

    const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

6、$subscribe

通过 store 的 $subscribe() 方法侦听 state 及其变化

talkStore.$subscribe((mutate,state)=>{console.log('LoveTalk',mutate,state)localStorage.setItem('talk',JSON.stringify(talkList.value))
})

7、store组合式写法

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{// talkList就是stateconst talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])// getATalk函数相当于actionasync function getATalk(){// 发请求，下面这行的写法是：连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串，包装成一个对象let obj = {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk}
})

五、组件通信

1、props

  • 若 父传子：属性值是非函数。

  • 若 子传父：属性值是函数。

父组件

<template><div class="father"><h3>父组件</h3><h4>我的车：{{ car }}</h4><h4>儿子给的玩具：{{ toy }}</h4><Child :car="car" :getToy="getToy"/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import { ref } from "vue";// 数据const car = ref('奔驰')const toy = ref()// 方法function getToy(value:string){toy.value = value}
</script>

子组件

<template><div class="child"><h3>子组件</h3><h4>我的玩具：{{ toy }}</h4><h4>父给我的车：{{ car }}</h4><button @click="getToy(toy)">玩具给父亲</button></div>
</template><script setup lang="ts" name="Child">import { ref } from "vue";const toy = ref('奥特曼')defineProps(['car','getToy'])
</script>

2、自定义事件

自定义事件常用于：子 => 父

事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！

3、mitt

与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信

npm i mitt

src\utils\emitter.ts

// 引入mitt 
import mitt from "mitt";// 创建emitter
const emitter = mitt()// 创建并暴露mitt
export default emitter

 接收数据的组件中：绑定事件、同时在销毁前解绑事件

import emitter from "@/utils/emitter";
import { onUnmounted } from "vue";// 绑定事件
emitter.on('send-toy',(value)=>{console.log('send-toy事件被触发',value)
})onUnmounted(()=>{// 解绑事件emitter.off('send-toy')
})

提供数据的组件，在合适的时候触发事件

import emitter from "@/utils/emitter";function sendToy(){// 触发事件emitter.emit('send-toy',toy.value)
}

4、v-model

  1. 概述：实现 父↔子 之间相互通信。

  2. 前序知识 —— v-model的本质

    <!-- 使用v-model指令 -->
<input type="text" v-model="userName">
​
<!-- v-model的本质是下面这行代码 -->
<input type="text" :value="userName" @input="userName =(<HTMLInputElement>$event.target).value"
>

  3. 组件标签上的v-model的本质：:moldeValue ＋ update:modelValue事件。

    <!-- 组件标签上使用v-model指令 -->
<AtguiguInput v-model="userName"/>
​
<!-- 组件标签上v-model的本质 -->
<AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>

    AtguiguInput组件中：

    <template><div class="box"><!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 --><!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件--><input type="text" :value="modelValue" @input="emit('update:model-value',$event.target.value)"></div>
</template>
​
<script setup lang="ts" name="AtguiguInput">// 接收propsdefineProps(['modelValue'])// 声明事件const emit = defineEmits(['update:model-value'])
</script>

  4. 也可以更换value，例如改成abc

    <!-- 也可以更换value，例如改成abc-->
<AtguiguInput v-model:abc="userName"/>
​
<!-- 上面代码的本质如下 -->
<AtguiguInput :abc="userName" @update:abc="userName = $event"/>

    AtguiguInput组件中：

    <template><div class="box"><input type="text" :value="abc" @input="emit('update:abc',$event.target.value)"></div>
</template>
​
<script setup lang="ts" name="AtguiguInput">// 接收propsdefineProps(['abc'])// 声明事件const emit = defineEmits(['update:abc'])
</script>

  5. 如果value可以更换，那么就可以在组件标签上多次使用v-model

    <AtguiguInput v-model:abc="userName" v-model:xyz="password"/>

5、$attrs概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。

  1. 具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。

    注意：$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)

父组件：

<template><div class="father"><h3>父组件</h3><Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/></div>
</template>
​
<script setup lang="ts" name="Father">import Child from './Child.vue'import { ref } from "vue";let a = ref(1)let b = ref(2)let c = ref(3)let d = ref(4)
​function updateA(value){a.value = value}
</script>

子组件：

<template><div class="child"><h3>子组件</h3><GrandChild v-bind="$attrs"/></div>
</template>
​
<script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'
</script>

孙组件：

<template><div class="grand-child"><h3>孙组件</h3><h4>a：{{ a }}</h4><h4>b：{{ b }}</h4><h4>c：{{ c }}</h4><h4>d：{{ d }}</h4><h4>x：{{ x }}</h4><h4>y：{{ y }}</h4><button @click="updateA(666)">点我更新A</button></div>
</template>
​
<script setup lang="ts" name="GrandChild">defineProps(['a','b','c','d','x','y','updateA'])
</script>

6、$refs、$parent

  1. 概述：

    • $refs用于 ：父→子。

    • $parent用于：子→父。

  2. 原理如下：

    属性说明
    $refs值为对象，包含所有被ref属性标识的DOM元素或组件实例。
    $parent值为对象，当前组件的父组件实例对象。

7、provide、inject

  1. 概述：实现祖孙组件直接通信

  2. 具体使用：

    • 在祖先组件中通过provide配置向后代组件提供数据

    • 在后代组件中通过inject配置来声明接收数据

  3. 具体编码：

    【第一步】父组件中，使用provide提供数据

    <template><div class="father"><h3>父组件</h3><h4>资产：{{ money }}</h4><h4>汽车：{{ car }}</h4><button @click="money += 1">资产+1</button><button @click="car.price += 1">汽车价格+1</button><Child/></div>
</template>
​
<script setup lang="ts" name="Father">import Child from './Child.vue'import { ref,reactive,provide } from "vue";// 数据let money = ref(100)let car = reactive({brand:'奔驰',price:100})// 用于更新money的方法function updateMoney(value:number){money.value += value}// 提供数据provide('moneyContext',{money,updateMoney})provide('car',car)
</script>

    注意：子组件中不用编写任何东西，是不受到任何打扰的

    【第二步】孙组件中使用inject配置项接受数据。

    <template><div class="grand-child"><h3>我是孙组件</h3><h4>资产：{{ money }}</h4><h4>汽车：{{ car }}</h4><button @click="updateMoney(6)">点我</button></div>
</template>
​
<script setup lang="ts" name="GrandChild">import { inject } from 'vue';// 注入数据let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})let car = inject('car')
</script>

8、pinia

六、其他知识点

Vue3基础使用-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/m0_71534259/article/details/139900842?spm=1001.2014.3001.5501

Vue2基础-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/m0_71534259/article/details/139250173?spm=1001.2014.3001.5501 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1473456.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

NSSCTF-Web题目24(RCE-空格绕过、过滤绕过)

NSSCTF-Web题目24(RCE-空格绕过、过滤绕过)

目录 [MoeCTF 2021]babyRCE 1、题目 2、知识点 3、思路 [SWPUCTF 2022 新生赛]funny_web 4、题目 5、知识点 6、思路 [MoeCTF 2021]babyRCE 1、题目 2、知识点 空格绕过、过滤绕过 3、思路 出现源码&#xff0c;进行代码审计 需要我们GET方式上传一个rce变量&#x…
阅读更多...
【扩散模型（三）】IP-Adapter 源码详解1-输入篇

【扩散模型（三）】IP-Adapter 源码详解1-输入篇

系列文章目录 【扩散模型&#xff08;一&#xff09;】中介绍了 Stable Diffusion 可以被理解为重建分支&#xff08;reconstruction branch&#xff09;和条件分支&#xff08;condition branch&#xff09;【扩散模型&#xff08;二&#xff09;】IP-Adapter 从条件分支的视…
阅读更多...
Web美食分享平台的系统-计算机毕业设计源码45429

Web美食分享平台的系统-计算机毕业设计源码45429

基于Web美食分享平台的系统设计与实现 摘 要 本研究基于Spring Boot框架&#xff0c;设计并实现了一个Web美食分享平台&#xff0c;旨在为用户提供一个交流分享美食体验的社区平台。该平台涵盖了用户注册登录、美食制作方法分享发布、点赞评论互动等功能模块&#xff0c;致力于…
阅读更多...
如何在Windows 11上复制文件和文件夹路径？这里提供几种方法

如何在Windows 11上复制文件和文件夹路径？这里提供几种方法

在Windows 11上复制文件或文件夹的路径就像在右键单击菜单中选择一个选项或按键盘快捷键一样简单。我们将向你展示如何在电脑上以各种方式进行操作。 从右键单击菜单 复制文件或文件夹路径的最简单方法是在该项目的右键单击菜单中选择一个选项。你也可以使用此方法复制多个项…
阅读更多...
电表读数检测数据集VOC+YOLO格式18156张12类别

电表读数检测数据集VOC+YOLO格式18156张12类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;18156 标注数量(xml文件个数)&#xff1a;18156 标注数量(txt文件个数)&#xff1a;18156 标…
阅读更多...
使用JAR命令打包JAR文件使用Maven打包使用Gradle打包打包Spring Boot应用

使用JAR命令打包JAR文件使用Maven打包使用Gradle打包打包Spring Boot应用

本人详解 作者：王文峰，参加过 CSDN 2020年度博客之星，《Java王大师王天师》 公众号：JAVA开发王大师，专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯 山峯 转载说明：务必注明来源（注明：作者：王文峰…
阅读更多...
vue 模糊查询加个禁止属性

vue 模糊查询加个禁止属性

vue 模糊查询加个禁止属性 父组件通过属性传&#xff0c;是否禁止输入-------默认可以输入
阅读更多...
VirtualBox 安装 Ubuntu Server24.04

VirtualBox 安装 Ubuntu Server24.04

环境&#xff1a; ubuntu-2404-server、virtualbox 7.0.18 新建虚拟机 分配 CPU 核心和内存&#xff08;根据自己电脑实际硬件配置选择&#xff09; 分配磁盘空间&#xff08;根据自己硬盘实际情况和需求分配即可&#xff09; 设置网卡&#xff0c;网卡1 负责上网&#xff0c…
阅读更多...
字符串相似度算法完全指南：编辑、令牌与序列三类算法的全面解析与深入分析

字符串相似度算法完全指南：编辑、令牌与序列三类算法的全面解析与深入分析

在自然语言处理领域&#xff0c;人们经常需要比较字符串&#xff0c;这些字符串可能是单词、句子、段落甚至是整个文档。如何快速判断两个单词或句子是否相似&#xff0c;或者相似度是好还是差。这类似于我们使用手机打错一个词&#xff0c;但手机会建议正确的词来修正它&#…
阅读更多...
【VUE基础】VUE3第三节—核心语法之ref标签、props

【VUE基础】VUE3第三节—核心语法之ref标签、props

ref标签 作用&#xff1a;用于注册模板引用。 用在普通DOM标签上&#xff0c;获取的是DOM节点。 用在组件标签上&#xff0c;获取的是组件实例对象。 用在普通DOM标签上&#xff1a; <template><div class"person"><h1 ref"title1">…
阅读更多...
使用 PyTorch 创建的多步时间序列预测的 Encoder-Decoder 模型

使用 PyTorch 创建的多步时间序列预测的 Encoder-Decoder 模型

Encoder-decoder 模型在序列到序列的自然语言处理任务&#xff08;如语言翻译等&#xff09;中提供了最先进的结果。多步时间序列预测也可以被视为一个 seq2seq 任务&#xff0c;可以使用 encoder-decoder 模型来处理。本文提供了一个用于解决 Kaggle 时间序列预测任务的 encod…
阅读更多...
笔记13：switch多分支选择语句

笔记13：switch多分支选择语句

引例&#xff1a; 输入1-5中的任意一共数字&#xff0c;对应的打印字符A,B,C,D,E int num 0; printf("Input a number[1,5]:"); scanf("%d"&#xff0c;&num); if( num 1)printf("A\n"); else if(num2)printf("B\n"); else i…
阅读更多...
ZYNQ7020的bank引脚分区

ZYNQ7020的bank引脚分区

一张图看ZYNQ7000的资源分布 从图中看出BANK33 34 35是ZYNQ的PL部分 也就是FPGA部分PS部分在BANK0 500 501&#xff0c;DDR控制器连接在PS部分BANK33的电压可调
阅读更多...
ePTFE膜（膨体聚四氟乙烯膜）应用前景广阔 本土企业技术水平不断提升

ePTFE膜（膨体聚四氟乙烯膜）应用前景广阔 本土企业技术水平不断提升

ePTFE膜&#xff08;膨体聚四氟乙烯膜&#xff09;应用前景广阔 本土企业技术水平不断提升 ePTFE膜全称为膨体聚四氟乙烯膜&#xff0c;指以膨体聚四氟乙烯&#xff08;ePTFE&#xff09;为原材料制成的薄膜。ePTFE膜具有耐化学腐蚀、防水透气性好、耐候性佳、耐磨、抗撕裂等优…
阅读更多...
CTF常用sql注入（三）无列名注入

CTF常用sql注入（三）无列名注入

0x06 无列名 适用于无法正确的查出结果&#xff0c;比如把information_schema给过滤了 join 联合 select * from users;select 1,2,3 union select * from users;列名被替换成了1,2,3&#xff0c; 我们再利用子查询和别名查 select 2 from (select 1,2,3 union select * f…
阅读更多...
中英双语介绍伦敦金融城（City of London）

中英双语介绍伦敦金融城（City of London）

中文版 伦敦金融城&#xff0c;通常称为“金融城”或“城”&#xff08;The City&#xff09;&#xff0c;是英国伦敦市中心的一个著名金融区&#xff0c;具有悠久的历史和全球性的影响力。以下是关于伦敦金融城的详细介绍&#xff0c;包括其地理位置、人口、主要公司、历史背…
阅读更多...
关于在自行封装的组件库中（使用vue-class-component）使用Vue-i18n无法正常翻译的解决办法

关于在自行封装的组件库中（使用vue-class-component）使用Vue-i18n无法正常翻译的解决办法

文章目录 介绍背景现象1解决办法 现象2原因分析解决办法 最终方案 介绍 大家或多或少都用过别人封装的组件库&#xff0c;甚至有人或者公司内有自行封装的一些公用组件库&#xff0c;而国际化翻译现在已经是各大项目中必不可少的一个插件了&#xff0c;但组件库中使用 i18n 进…
阅读更多...
计算机网络 0319

计算机网络 0319

OSPF协议&#xff1a;开放式最短路径优先 协议 基于代价的路由协议 适合与大型的网络 DR 指定路由器 BDR 备用指定路由器 OSPF的组播地址 224.0.0.5 224.0.0.6 RIP组播地址&#xff1a;224.0.0.9 OSPF数据包 过程&#xff1a;先各个发送hello包认识&#xff0c;成为邻居…
阅读更多...
深圳航空顶象验证码逆向，和百度验证码训练思路

深圳航空顶象验证码逆向，和百度验证码训练思路

声明(lianxi a15018601872) 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 前言(lianxi a…
阅读更多...
CC2530寄存器编程学习笔记_点灯

CC2530寄存器编程学习笔记_点灯

下面是我的CC2530的学习笔记之点灯部分。 第一步&#xff1a;分析原理图 找到需要对应操作的硬件 图 1 通过这个图1我们可以找到LED1和LED2连接的引脚&#xff0c;分别是P1_0和P1_1。 第二步 分析原理图 图 2 通过图2 确认P1_0和P1_1引脚连接到LED&#xff0c;并且这些引…
阅读更多...
最新文章

Copyright @ 2022~2023