Vue3 [Day11]

news2024/12/25 9:34:42

Vue3的优势





在这里插入图片描述



在这里插入图片描述


create-vue搭建Vue3项目

在这里插入图片描述



在这里插入图片描述

node -v
npm init vue@latest
npm install

Vue3项目目录和关键文件

在这里插入图片描述
Vetur插件是Vue2的
Volarr插件是Vue3的



main.js 
import './assets/main.css'

// new Vue() 创建一个应用实例 => createApp()
// createRouter()  createStore()
// 将创建实例进行了封装，保证每个实例的独立封闭性

import { createApp } from 'vue'
import App from './App.vue'

// createApp(App) 创建实例
// mount设置挂载点 #app（id为app的盒子）
createApp(App).mount('#app')


App.vue

<!-- 加上setup就允许在script中直接编写组合式API -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
    <!-- 不再要求唯一根元素 -->
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <!-- 组件不用注册，就可以直接用 -->
    <TheWelcome />
  </main>
</template>

<style scoped>
</style>


组合式API - setup选项

setup执行时机

在这里插入图片描述执行时机，比beforeCreate更早，
所以，获取不到this(this是undefined

setup写法

在这里插入图片描述




数据和函数 需要在setup最后return 才能在模板中应用

简便写法：通过setup 语法糖
在这里插入图片描述


在这里插入图片描述
在这里插入图片描述




组合式API - reactive 和 ref 函数

reactive

在这里插入图片描述



App.vue

<script setup>
import {reactive} from 'vue'
const state=reactive({
    count:100
})
const setCount= ()=>{
    state.count++
}
</script>


<template>
<div>{{ state.count }}</div>
<button @click="setCount">+1</button>
</template>

<style></style>


ref

在这里插入图片描述本质：在原有传入数据基础上，外层包含了一层对象，包成了复杂类型，底层包成复杂类型之后，再借助reactive 实现响应式，所以，
脚本中访问数据，需要通过 .value
在template中， .vue不需要加（帮我们扒了一层）
所以
推荐以后声明数据，统一用ref => 统一编码规范
App.vue

<script setup>
import {ref} from 'vue'
const count = ref(0)
const obj = ref({
    age:18,
    name:'slx'
})
console.log(obj.value);
console.log(obj.value.age);

// console.log(count.value)
const countChange = () => {
    // count本质上是对象，所以要count.value++ 不是count++
    count.value++
}
</script>


<template>
<div>{{ count }}</div>
<button @click="countChange">+1</button>
</template>

<style></style>

在这里插入图片描述

什么是响应式数据，有什么作用

响应式数据是指在数据发生变化时，相关的视图能够自动更新的数据。在 Vue 中，通过将数据转换为响应式对象，当数据发生变化时，Vue 会自动追踪这些变化，并通知相关的视图进行更新。
响应式数据的作用是使开发者能够以声明式的方式编写代码，而不需要手动操作 DOM 或追踪数据变化。它提供了一种简单且高效的方式来维护数据和视图之间的关系，使开发者能够专注于业务逻辑而不是手动的视图更新。

通过响应式数据，当数据发生变化时，相关的视图会自动更新，保持数据和视图的同步。这大大简化了开发过程，提高了代码的可维护性和可读性。

响应式数据在 Vue 中是核心概念之一，它使得开发者能够构建动态、交互式和响应式的应用程序。

在 Vue 2 和 Vue 3 中，响应式数据的处理有什么区别

在 Vue 2 中，使用 data 选项来声明响应式数据，Vue 会将这些数据转换为响应式的对象。当数据发生变化时，Vue 会自动更新相关的视图。
在 Vue 3 中，使用 ref 和 reactive 函数来声明响应式数据。



组合式API - computed

在这里插入图片描述App.vue

<script setup>
import { computed,ref } from 'vue'

const list = ref(
    [1,2,3,4,5,6,7,8,9]
)

// 基于list派生一个计算属性，从list中过滤
const computerList = computed(() => {
    return list.value.filter((item) => item%2===0)
})

// 定义一个修改数组的方法
const addFn = () =>{
    list.value.push(666)
}
</script>


<template>
<div>{{ list }}</div>
<div>{{ computerList }}</div>
<button @click="addFn">+666</button>
</template>

<style></style>

在这里插入图片描述全选反选可以用get,set



组合式API - watch

侦听单个数据

在这里插入图片描述

侦听多个数据

在这里插入图片描述

<script setup>
import {ref, watch} from 'vue'
const count = ref(0)
const nickname = ref('slx')
const changeCount = () => {
    count.value++
}

const changeName = () => {
    nickname.value='hhhhh'
}

// 1.监视单个数据变化
//   watch(ref对象,(newValue,oldValue) => { ... } )
//   直接传对象，所以就不要count.value
// watch(count,(newValue, oldValue)=> {
//     console.log(newValue, oldValue);
// })

// 2.监视多个数据变化
//   watch([ref对象1,ref对象2], (newArr,oldArr) => { ... } )
//   直接传对象，所以就不要count.value
// watch([count,nickname],(newArr, oldArr)=> {
//     console.log(newArr, oldArr);
// })



</script>


<template>
    <div>{{ count }}</div>
    <button @click="changeCount">change-count</button>
    <div>{{ nickname }}</div>
    <button @click="changeName">change-Name</button>
</template>

<style></style>

配置项

在这里插入图片描述

<script setup>
import {ref, watch} from 'vue'
const count = ref(0)
const nickname = ref('slx')
const changeCount = () => {
    count.value++
}

const changeName = () => {
    nickname.value='hhhhh'
}

// 添加额外配置项
// 3.immediate 立刻执行
watch(count,(newValue, oldValue)=> {
    console.log(newValue, oldValue)
},{
    immediate:true,
    deep:true
})


const userInfo = ref({
    name:'ssss',
    age:12
})
const setUserInfo = () => {
    // 修改userInfo.value ,修改对象的地址，才能监视到，浅层监视
    // userInfo.value={name:'qqqq',age:10}
    userInfo.value.age++
}
// 4.deep 深度监视,默认watch进行的是 浅层监视
//        const ref1 = ref(简单类型) 可以直接监视
//        const ref1 = ref(复杂类型) 监视不到复杂类型内部数据的变化
watch(userInfo,(newValue)=> {
    console.log(newValue)
},{
    deep:true
})



</script>


<template>
    <div>{{ userInfo }}</div>
    <button @click="setUserInfo">change-userInfo</button>
    <div>{{ count }}</div>
    <button @click="changeCount">change-count</button>
    <div>{{ nickname }}</div>
    <button @click="changeName">change-Name</button>
</template>

<style></style>


精确监听对象的某个属性变化

在这里插入图片描述

<script setup>
import {ref, watch} from 'vue'
const count = ref(0)
const nickname = ref('slx')
const changeCount = () => {
    count.value++
}
const changeName = () => {
    nickname.value='hhhhh'
}

const userInfo = ref({
    name:'ssss',
    age:12
})
const setUserInfo = () => {
    // 修改userInfo.value ,修改对象的地址，才能监视到，浅层监视
    // userInfo.value={name:'qqqq',age:10}
    userInfo.value.age++
}


// 5.精确监视,某一属性
watch(() => userInfo.value.age,(newValue, oldValue) => {
    console.log('5555', newValue, oldValue);
    
})
</script>


<template>
    <div>{{ userInfo }}</div>
    <button @click="setUserInfo">change-userInfo</button>
    <div>{{ count }}</div>
    <button @click="changeCount">change-count</button>
    <div>{{ nickname }}</div>
    <button @click="changeName">change-Name</button>
</template>

<style></style>

在这里插入图片描述



组合式API - 生命周期函数

在这里插入图片描述

<script setup>
import { onMounted } from 'vue';

// beforeCreate 和 created 的相关代码
// 一律放在 setup 中执行

const getList = () => {
  setTimeout(() => {
    console.log('发送请求，获取数据')
  }, 2000)
}
// 一进入页面的请求
getList()

// 如果有些代码需要在mounted生命周期中执行
onMounted(() => {
  console.log('mounted生命周期函数 - 逻辑1')
})

// 写成函数的调用方式，可以调用多次，并不会冲突，而是按照顺序依次执行
onMounted(() => {
  console.log('mounted生命周期函数 - 逻辑2')
})

</script>

<template>
  <div></div>
</template>


组合式API - 父子通信

父传子

在这里插入图片描述



App.vue

// 父传子
// 1. 给子组件，添加属性的方式传值
// 2. 在子组件，通过props接收
<script setup>
import {ref} from 'vue'
import MySon from '@/components/MySon.vue'

const money = ref(100)
const getMoney = () =>{
    money.value+=10
}
</script>


<template>
    <h3>father</h3>
    <button @click="getMoney">+money</button>
 <MySon car="宝马" :money="money"></MySon>
</template>

<style></style>


MySon.vue 

<script setup>

// 由于写了setup 所以无法直接配置props选项
// 所以要借助“编译器宏”函数接受子组件传递的数据
// import {ref, watch} from 'vue'
const props = defineProps({
    car:String,
    money:Number
})

</script>


<template>
    <div class="son">
        <h4>Son</h4>
        <h4>{{ car }} {{ money }}</h4>
    </div>
</template>

<style>
.son{
    width: 200px;
    height: 200px;
    background-color: #b17b7b;
}
</style>

在这里插入图片描述



## 子传父

在这里插入图片描述



App.vue

<script setup>
import {ref} from 'vue'
import MySon from '@/components/MySon.vue'

const money = ref(100)
const getMoney = () =>{
    money.value+=10
}

const changeFn = (newMoney) => {
    money.value=newMoney
}
</script>


<template>
    <h3>father</h3>
    <button @click="getMoney">+money</button>
 <MySon 

 @changeMoney="changeFn"
 
 car="宝马" :money="money"></MySon>
</template>

<style></style>


MySon.vue 

<script setup>
// 子传父
// 1. 在子组件内部，emit触发事件 (编译器宏获取)
// 2. 在父组件，通过 @ 监听

// import {ref, watch} from 'vue'
const props = defineProps({
    car:String,
    money:Number
})

const emit = defineEmits(['changeMoney'])
const buy = () => {
    emit('changeMoney',5)
}
</script>


<template>
    <div class="son">
        <h4>Son</h4>
        <h4>{{ car }} {{ money }}</h4>
        <button @click="buy">花钱</button>
    </div>
</template>

<style>
.son{
    width: 200px;
    height: 200px;
    background-color: #b17b7b;
}
</style>


![在这里插入图片描述](https://img-blog.csdnimg.cn/7b226524ce0f471793a5dcee3a66d98b.png)

在这里插入图片描述

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

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

相关文章

HTML学习笔记02

HTML学习笔记02

HTML笔记02 页面结构分析 元素名描述header标题头部区域的内容&#xff08;用于页面或页面中的一块区域&#xff09;footer标记脚部区域的内容&#xff08;用于整个页面或页面的一块区域&#xff09;sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用…
阅读更多...
systemverilog之program与module的区别

systemverilog之program与module的区别

为避免仿真和设计竞争问题(race condition)&#xff0c;systemverilog中引入了program的概念。 在Verilog中&#xff0c;调度如下图所示&#xff1a; 从图中可以看出&#xff0c;阻塞赋值与非阻塞赋值的调度是不一样的&#xff0c;其中#0的阻塞延时赋值则处在中间的调度区域。…
阅读更多...
图像后期处理操作

图像后期处理操作

1. 引言 最近&#xff0c;在闲暇之余&#xff0c;拍摄了一些昆虫的照片。我发现在手持拍摄昆虫时&#xff0c;几乎不可能拍出一次排除完美的照片。通常我们对照明的控制有限&#xff0c;对取景的控制有限&#xff08;由于焦距和所有的树枝和树叶&#xff09;&#xff0c;以及对…
阅读更多...
2000-2021年上市公司在建工程环保投资（原始数据+计算代码）

2000-2021年上市公司在建工程环保投资（原始数据+计算代码）

2000-2021年上市公司在建工程环保投资&#xff08;原始数据计算代码&#xff09; 1、时间&#xff1a;2000-2021年 2、来源&#xff1a;整理自上市公司年报 3、指标&#xff1a;证券代码、公司名称、年份、在建工程环保投资、期末总资产在建工程环保投资/期末总资产 4、参考…
阅读更多...
Centos7 安装llama-cpp-python失败

Centos7 安装llama-cpp-python失败

报错信息如下&#xff1a; 解决步骤&#xff1a; yum remove gcc yum remove gdb yum install scl-utils yum install centos-release-scl yum list all --enablerepocentos-sclo-rh | grep "devtoolset" yum install -y devtoolset-11-toolchain vi ~/.bash_p…
阅读更多...
基于Java+SpringBoot+Vue前后端分离党员教育和管理系统设计和实现

基于Java+SpringBoot+Vue前后端分离党员教育和管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…
阅读更多...
win11+vmware17+centos7.9环境搭建

win11+vmware17+centos7.9环境搭建

温故知新 &#x1f4da;第一章 前言&#x1f4d7;背景&#x1f4d7;目标&#x1f4d7;总体方向 &#x1f4da;第二章 安装部署环境&#x1f4d7;安装VMware Workstation 17 Pro软件&#x1f4d7;安装CentOS-7虚拟机&#x1f4d5;镜像下载地址&#x1f4d5;创建虚拟机&#x1f4…
阅读更多...
【目标检测】理论篇（2）YOLOv3网络构架及其代码实现

【目标检测】理论篇（2）YOLOv3网络构架及其代码实现

网络构架图&#xff1a; 代码实现&#xff1a; import math from collections import OrderedDictimport torch.nn as nn#---------------------------------------------------------------------# # 残差结构 # 利用一个1x1卷积下降通道数&#xff0c;然后利用一个3x3卷…
阅读更多...
数据分析--统计学知识

数据分析--统计学知识

描述型统计 描述统计 1.集中趋势 &#xff1a;众数、平均数、分位数 2.离散趋势&#xff1a; 极值&#xff08;max&#xff09;、极差&#xff08;max-min&#xff09;、平均差、方差、标准差、分位差 3.分布&#xff1a;峰泰、偏度 推理型统计 概率分布&#xff1a;离散型…
阅读更多...
eBPF程序注入到内核中的流程，现在就带你研究(上）

eBPF程序注入到内核中的流程，现在就带你研究(上）

” 系列目录 1. 疑惑 2. vfsstat_bpf__open 2.1 bpf_object__open_skeleton 2.2 bpf_object__open_mem/bpf_object_open 2.3 OPTS_VALID检查参数合法性 2.4 bpf_object__new新建bpf_object对象 2.5 bpf_object__elf_init初始化elf文件 2.6 bpf_object__elf_collect收集各个段落…
阅读更多...
攻防世界-embarrass

攻防世界-embarrass

原题 解题思路 搜索flag&#xff0c;结果搜不到。 换到kali里看。
阅读更多...
STM32f103入门（2）流水灯蜂鸣器

STM32f103入门（2）流水灯蜂鸣器

流水灯 /* #define GPIO_Pin_0 ((uint16_t)0x0001) /*!< Pin 0 selected */ #define GPIO_Pin_1 ((uint16_t)0x0002) /*!< Pin 1 selected */ #define GPIO_Pin_2 ((uint16_t)0x0004) /*!< Pin 2 selected */ #de…
阅读更多...
pnpm安装包管理工具

pnpm安装包管理工具

pnpm安装包管理工具 pnpm代表performant npm&#xff08;高性能的npm&#xff09;&#xff0c;同npm和Yarn&#xff0c;都属于Javascript包管理安装工具&#xff0c;它较npm和Yarn在性能上得到很大提升&#xff0c;被称为快速的&#xff0c;节省磁盘空间的包管理工具。 pnpm…
阅读更多...
QT6编译的文件分布情况

QT6编译的文件分布情况

工程文件和编译文件位置分布 工程文件是自己建立的源文件位置&#xff0c;而同等级的位置在工程构建时会重新生成一个编译后的文件夹&#xff0c;里面包含了可执行的exe文件。而这个文件夹的内容也是QT ide运行时读取的文件&#xff0c;但这个文件的内容在IDE中如果不重新构建…
阅读更多...
darknet yolo make报错，缺少instance-segmenter.o的规则

darknet yolo make报错，缺少instance-segmenter.o的规则

文章目录 darknet yolo make报错&#xff0c;缺少instance-segmenter.o的规则报错原因解决办法新问题解决办法 补充g编译选项Makefile编译规则 darknet yolo make报错&#xff0c;缺少instance-segmenter.o的规则 报错原因 Makefile没有识别到对于instance-segmenter.o的编译…
阅读更多...
论文解读：高质量物体追踪

论文解读：高质量物体追踪

本文介绍了HQTrack&#xff0c;一种新的高质量视频物体追踪框架。HQTrack结合了视频多目标分割器&#xff08;VMOS&#xff09;和蒙版细化器&#xff08;MR&#xff09;&#xff0c;可追踪视频初始帧中指定的物体&#xff0c;并对追踪结果进行细化&#xff0c;以获得更高的准确…
阅读更多...
【C++】4、Preprocessor 预处理：条件编译、源文件包含、宏替换、重定义行号、错误信息、编译器预留指令

【C++】4、Preprocessor 预处理：条件编译、源文件包含、宏替换、重定义行号、错误信息、编译器预留指令

文章目录 一、概述二、格式2.1 条件编译2.2 源文件包含2.3 宏替换2.3.1 语法2.3.2 C标准内置的预定义宏 2.4 重定义行号和文件名2.5 错误信息2.6 编译器预留指令 三、应用场景 C的 Build 可分为4个步骤&#xff1a;预处理、编译、汇编、链接。 预处理就是本文要详细说的宏替换…
阅读更多...
跳跃游戏【贪心算法】

跳跃游戏【贪心算法】

跳跃游戏 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。在这里插入图片…
阅读更多...
Windows 10【压缩卷】操作报错【无法将卷压缩到超出任何不可移动的文件所在的点】的解决方法

Windows 10【压缩卷】操作报错【无法将卷压缩到超出任何不可移动的文件所在的点】的解决方法

目录 一、背景 二、原因 三、解决方法 3.1 Windows自带的碎片清理工具 3.1.1 操作步骤 3.1.2 操作结果 3.2 MyDefrag工具清理磁盘碎片 3.2.1 操作步骤 3.2.2 操作结果 3.3 Windows自带的事件查看器 3.3.1 操作步骤 3.3.2 操作结果 3.4 关闭虚拟内存并删除虚拟内存…
阅读更多...
docker harbor私有库

docker harbor私有库

目录 一.Harbor介绍 二.Harbor的特性 三.Harbor的构成 四.Harbor构建Docker私有仓库 4.2在Server主机上部署Harbor服务&#xff08;192.168.158.25&#xff09; 4.2.1 这时候这边就可以去查看192.168.158.25网页 4.3此时可真机访问serverIP 4.4通过127.0.0.1来登陆和推送镜…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023