Vue3 [Day11]

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.mfbz.cn/a/90994.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于JAYA算法优化的BP神经网络（预测应用） - 附代码

基于JAYA算法优化的BP神经网络（预测应用） - 附代码

基于JAYA算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于JAYA算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.JAYA优化BP神经网络2.1 BP神经网络参数设置2.2 JAYA算法应用 4.测试结果&#xff1a;5.Matlab代码 摘要…
阅读更多...
容器技术,1. Docker,2. Kubernetes（K8s）：

容器技术,1. Docker,2. Kubernetes（K8s）：

目录 容器技术 1. Docker&#xff1a; 2. Kubernetes&#xff08;K8s&#xff09;&#xff1a; Docker和Kubernetes 容器的主要应用场景有哪些&#xff1f; 容器技术 有效的将单个操作系统的资源划分到孤立的组中&#xff0c;以便更好的在孤立的组之间平衡有冲突的资源使…
阅读更多...
Kotlin协程flow发送时间间隔debounce

Kotlin协程flow发送时间间隔debounce

Kotlin协程flow发送时间间隔debounce debounce的作用是让连续发射的数据之间间隔起来。典型的应用场景是搜索引擎里面的关键词输入&#xff0c;当用户输入字符时候&#xff0c;有时候&#xff0c;并不希望用户每输入任何一个单字就触发一次后台真正的查询&#xff0c;而是希望…
阅读更多...
《Dive into Deep Learning》

《Dive into Deep Learning》

《Dive into Deep Learning》&#xff1a;https://d2l.ai/ Interactive deep learning book with code, math, and discussionsImplemented with PyTorch, NumPy/MXNet, JAX, and TensorFlowAdopted at 500 universities from 70 countries 《动手学深度学习》中文版&#xff1…
阅读更多...
深度学习10：Attention 机制

深度学习10：Attention 机制

目录 Attention 的本质是什么 Attention 的3大优点 Attention 的原理 Attention 的 N 种类型 Attention 的本质是什么 Attention&#xff08;注意力&#xff09;机制如果浅层的理解&#xff0c;跟他的名字非常匹配。他的核心逻辑就是「从关注全部到关注重点」。 Attention…
阅读更多...
基于FPGA的Lorenz混沌系统verilog开发,含testbench和matlab辅助测试程序

基于FPGA的Lorenz混沌系统verilog开发,含testbench和matlab辅助测试程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将vivado的仿真结果导入到matlab显示三维混沌效果&#xff1a; 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 testbench如下所…
阅读更多...
Docker安装ES+kibana8.9.1

Docker安装ES+kibana8.9.1

参考&#xff1a;基于Docker安装Elasticsearch【保姆级教程、内含图解】_docker elasticsearch_Acloasia的博客-CSDN博客 创建网络 docker network create es-net 基于Docker安装Elasticsearch 拉取镜像 docker pull elasticsearch:8.9.1 挂载文件 mkdir -p /usr/local/e…
阅读更多...
stm32之USART(总结)

stm32之USART(总结)

串行通信 UART串口内部结构示意图 普中科技的详细介绍 中断知识补充 代码 #ifndef __USART_H #define __USART_H #include "stdio.h" #include "stm32f10x_usart.h" #define USART1_REC_LEN 200 //定义最大接收字节数 200extern u8 USART1_RX_BUF[US…
阅读更多...
wx.request配置服务器域名，只能包含英文大小写字母、数字，解决办法

wx.request配置服务器域名，只能包含英文大小写字母、数字，解决办法

前言.小程序服务器域名配置常见错误及解决方法 1.配置入口&#xff1a; 小程序后台->-开发->开发设置->服务器域名 2.常见错误及原因分析&#xff1a; 3.实战中出现的错误 4.解决办法&#xff1a;应把域名后边的路径去掉&#xff0c;只写域名即可
阅读更多...
【安卓】自定义View实现画板涂鸦等功能

【安卓】自定义View实现画板涂鸦等功能

一、实现效果 二、代码 1、MainActivity.class package com.lsl.mydrawingboarddemo;import androidx.appcompat.app.AppCompatActivity; import androidx.core.content.ContextCompat;import android.os.Bundle; import android.os.Handler; import android.view.View; impo…
阅读更多...
4.17 如何基于 UDP 协议实现可靠传输？

4.17 如何基于 UDP 协议实现可靠传输？

目录 QUIC 是如何实现可靠传输的&#xff1f; Packet Header QUIC Frame Header QUIC 是如何解决 TCP 队头阻塞问题的&#xff1f; 什么是TCP对头阻塞问题&#xff1a; HTTP/2 的队头阻塞: 没有队头阻塞的 QUIC QUIC 是如何做流量控制的&#xff1f; QUIC 实现流量控制…
阅读更多...
探索未来世界，解密区块链奥秘！

探索未来世界，解密区块链奥秘！

你是否曾好奇&#xff0c;区块链是如何影响着我们的生活与未来&#xff1f;想要轻松了解这个引领着技术革命的概念吗&#xff1f;那么这本令人着迷的新书《区块链导论》绝对值得你拥有&#xff01; 内容丰富多彩&#xff0c;让你轻松掌握&#xff1a; **1章&#xff1a;区块链…
阅读更多...
MyBatis与Spring整合以及AOP和PageHelper分页插件整合

MyBatis与Spring整合以及AOP和PageHelper分页插件整合

目录 前言 一、MyBatis与Spring整合的好处以及两者之间的关系 1.好处 2.关系 二、MyBatis和Spring集成 1.导入pom.xml 2.编写配置文件 3.利用mybatis逆向工程生成模型层代码 三、常用注解 四、AOP整合pageHelper分页插件 创建一个切面 测试 前言 MyBatis是一个开源的…
阅读更多...
Unity 图片资源的适配

Unity 图片资源的适配

前言 最近小编做Unity项目时&#xff0c;发现在资源处理这方面和Android有所不同&#xff1b;例如&#xff1a;Android的资源文件夹res下会有着mipmap-mdpi&#xff0c;mipmap-hdpi&#xff0c;mipmap-xhdpi&#xff0c;mipmap-xxhdpi&#xff0c;mipmap-xxxhdpi这五个文件夹&a…
阅读更多...
数据通信——TCP（三次握手及基础特性）

数据通信——TCP（三次握手及基础特性）

引言 TCP&#xff08;传输控制协议&#xff09;&#xff0c;不像之前的UDP那样&#xff0c;因为这个协议要将很多复杂的东西&#xff0c;所以这次的特性是简单的特性&#xff0c;后续会讲一些复杂难懂的知识&#xff0c;这次先说一些TCP明显的特性 面向连接 TCP提供了对连接的管…
阅读更多...
CSS笔记

CSS笔记

介绍 CSS导入方式 三种方法都将文字设置成了红色 CSS选择器 元素选择器 id选择器 图中div将颜色控制为红色&#xff0c;#name将颜色控制为蓝色&#xff0c;谁控制的范围最小&#xff0c;谁就生效&#xff0c;所以第二个div是蓝色的。id属性值要唯一&#xff0c;否则报错。 clas…
阅读更多...
Dockerfile搭建LNMP运行Wordpress平台

Dockerfile搭建LNMP运行Wordpress平台

Dockerfile搭建LNMP运行Wordpress平台 一、项目1.1 项目环境1.2 服务器环境1.3 任务需求 二、Linux 系统基础镜像三、Nginx1、建立工作目录2、编写 Dockerfile 脚本3、准备 nginx.conf 配置文件4、生成镜像5、创建自定义网络6、启动镜像容器7、验证 nginx 四、Mysql1、建立工作…
阅读更多...
KVM创建虚拟机可访问外网+可使用Xshell等工具连接

KVM创建虚拟机可访问外网+可使用Xshell等工具连接

创建虚拟机时使用桥接网络模块即可&#xff0c;如下&#xff1a; 1、创建一个存储卷(虚拟机的磁盘) 2、创建虚拟机时选择网络 3、系统安装完成后配置固定IP地址 vi /etc/sysconfig/network-scripts/ifcfg-eth0ONBOOTyes BOOTPROTOstatic IPADDR16.32.15.60 GATEWAY16.32.15.2…
阅读更多...
DevOps团队如何提高Kubernetes性能

DevOps团队如何提高Kubernetes性能

今天&#xff0c;Kubernetes仍然是开发人员最需要的容器。Kubernets最初由 Google 工程师开发&#xff0c;作为跨本地、公共云、私有云或混合云托管的首选解决方案享誉全球。 来自Statista的报告显示&#xff0c;公共云中的Kubernetes市场份额在过去一年中上升了近30%。并且在…
阅读更多...
Stable Diffusion 系列教程 | 打破模型壁垒

Stable Diffusion 系列教程 | 打破模型壁垒

目录 1.模型基本分类 1.1 CheckPoint 大模型/底模型/主模型 1.2 VAE美化模型/变分自编码器 1.3 HyperNetwork 超网络 1.4 embeddings&#xff08;/Textual Inversion&#xff09; 嵌入式向量 1.5 loRa 低秩适应模型 2. 下载途径和渠道 2.1 C站 2.1.1 如何筛选到自己需…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站