Vue入门项目——WebApi

Vue入门——WebApi

    • vue3项目搭建
    • 组合式API
      • 响应式API
        • reactive()
        • ref()
      • 生命周期钩子
      • computed计算属性函数
      • watch监听函数
      • 父子通信
      • 模板引用
      • 组合选项

vue3项目搭建

简单看下Vue3的优势吧
vue3优势
下载安装npm及node.js16.0以上版本(确保安装成功可用如下代码检查版本)

npm -v
node -v

确保版本安装正确
下一步创建vue3项目,输入项目名字后并进行选择插件(可以直接回车全部no)

npm init vue@latest

然后找到项目用vsCode打开,并进行初始化

npm install

初始化完成后,把项目跑起来,可点击链接进行查看,看到如下画面就完成咯

npm run dev

在这里插入图片描述

组合式API

响应式API

语法糖

reactive()

接收一个普通对象然后返回该普通对象的响应式代理(众所周知括号里的内容一般才是最重要的,没错,reactive只能封装对象类型的参数
🍊个🌰:

<script setup>
//1、导入函数
import { reactive } from 'vue';
//2、执行函数,传入一个对象类型参数,用变量接收
const state = reactive({count: 0 //参数是常规对象,不会引起视图更新
})
//使用reactive函数包装后,会变成响应式对象
const addCount = () => {state.count++
}const state2 = {count2: 0 //参数是常规对象,不会引起视图更新
}
const addCount2 = () => {state2.count2++
}
</script>
<template><div><button @click="addCount" id="btn1">{{ state.count }}</button> <!--这个按钮中的参数被reactive包裹,会被视图响应--><button @click="addCount2" id="btn2">{{state2.count2}}</button><!--这个参数没有被包裹不会响应--><!--但是会累积点击,在下一次点击第一个按钮时会被响应,一次性累计添加--></div>
</template>  

ref()

接受一个参数值并返回一个响应式且可改变的 ref 对象。(找不同咯,对没错,ref()支持任何类型的参数对其进行封装)

<script setup>
//1、导入函数
import { ref } from 'vue';
//2、执行函数,传入一个参数(简单类型与对象类型均可),用变量接收
const count = ref(0)
const addCount = () => {//脚本区域修改ref产生的响应式对象,必须通过.value属性修改count.value++
}const person = ref({name: '芋头'
})
const setPerson = () => {person.value.name = '一哑7'
}
</script>
<template><div><button @click="addCount">{{ count }}</button><!--点击button数字添加--></div><div><button @click="setPerson">{{ "这个人是" + person.name }}</button><!--点击button修改人名--></div>
</template>  

冷知识:ref函数内部实现时依赖reactive函数,一般使用ref更多

生命周期钩子

先来看一张图熟悉一下api
在这里插入图片描述

详细的生命周期API使用请参考Vue3官网API介绍

生命周期函数:引入函数后执行并传入回调,会自动执行回调 多次执行生命周期函数时,回调会依次执行

<script setup>
//引入函数
import { onMounted } from 'vue'//执行函数并传入回调
onMounted( () => {console.log('执行回调~')console.log('执行回调~')
}) //多次执行函数时依次执行
onMounted( () => {console.log('执行回调2~')console.log('执行回调2~')
})</script>

computed计算属性函数

<script setup>
//1、导入函数
import { ref , computed } from 'vue';
let list = ref([1 , 2 , 3 , 4 , 5 , 6 , 7 , 8])
//2、执行函数;return经过计算的值;用变量接受这个值
const computedList = computed(() => {return list.value.filter(item => item > 2)
})
//计时器观察实时更新
setTimeout(() => {list.value.push(-1 , 10 , 12 , 0)
} , 3000)
</script>
<template><div>{{`原始数组是:[${list}]`}}</div><div>{{`新数组是:[${computedList}]`}}</div>
</template>  

watch监听函数

  • 监听单个数据:
    watch需要两个参数,第一个参数是需要监听的数据,第二个参数是在所需要监听的数据发生变化时所需要执行的回调函数。
<script setup>
//1、导入函数
import { ref , watch } from 'vue';
//2、设置需要监听的数据和回调函数
const count = ref(0)
const setCount = () => {count.value++
}
//3、watch监听单个数据
watch(count , () => {alert('哦豁,变了哦')
})
</script>
<template><div><button @click="setCount">{{count}}</button></div>
</template>  
  • 监听多个数据:
    这时只需要用数组把需要监听的数据封装起来就好了
<script setup>
//1、导入函数
import { ref , watch } from 'vue';
//2、设置需要监听的数据和回调函数
const count = ref(0)
const setCount = () => {count.value++
}const name = ref('芋头')
const setName = () => {name.value = '一哑7'
}
//3、watch监听多个数据,用数组把需要监听的数据封装起来就好了
watch([count , name] , ([newCount , newName] , [odlCount , oldName]) => {alert('哦豁,变了哦' +  [odlCount , oldName] + '变成了' + [newCount , newName] )
})
</script>
<template><div><button @click="setCount">{{count}}</button><button @click="setName">{{name}}</button></div>
</template>  

不要忘了关于watch还有两个参数哦,immediate:立即执行;deep:深度监听

  • immediate : 在第一次刚刚监听到的时候就先执行一次
<script setup>
watch(count , () => {alert('变了哦') } , {immediate: true}
)
</script>
  • deep :通过watch监听的ref对象默认浅层监听,直接修改嵌套对象都不会出发回调函数,此时便需要开启deep
    没理解?把下面代码复制下来删掉deep对比一下就知道咯
<script setup>
watch(name , () => {alert('变了哦') } , {deep: true}
)
</script>
  • 精确监听:监听多个属性中的一个属性(deep会有性能损耗建议不开启deep而是使用精确监听)
    只需要把watch函数的参数变成两个回调函数,第一个是需要监听的东西,第二个是监听到之后需要执行的回调函数

🍊个🌰:

<script setup>
import { ref, watch } from 'vue'
const state = ref({name: '芋头',age: 22,sex: '男'})
const chanheName = () => {//修改姓名state.value.name = '一哑7' 
}
const changeAge = () => {//修改年龄~state.value.age = 23
}
const changeSex = () => {//去一趟泰国state.value.sex = '女'
}
//精确侦听具体属性
watch(() => state.value.age,() => {console.log('长大一岁了哦')}
)
watch(() => state.value.name,() => {console.log('还顺路改了个名字')}
)
</script>
<template><div><div>这个人现在的名字:{{state.name}}</div><div>这个人现在的年龄:{{state.age}}</div></div><div><button @click="chanheName">修改姓名</button><button @click="changeAge">修改年领</button></div>
</template>

父子通信

父传子:在子组件中用defineProps接收父组件中绑定的数据就好了

//父亲页
<template><div>I am dadTest</div><div><sonTest /></div><div>父传子<!-- 父亲上绑定属性 --><sonTest message="father Data" /></div>
</template>
<script setup>
import sonTest from './views/sonTest.vue';
</script>
//儿子页
<template><div>I am sonTest {{message}}</div>
</template>
<script setup>//用defineProps接收数据就好了defineProps({message: String})
</script>

子传父:父组件通过@绑定事件,子组件内部通过defindEmits函数生成emit方法触发事件
defindEmits 传递参数是数组哦~,因为可传递所有绑定事件

//儿子页
<template><div><button @click="sendMsg">点击按钮查看来自子组件的信息</button></div>
</template>
<script setup>//利用defindEmits函数生成emit方法const emit = defineEmits(['giveMeMessqge'])const sendMsg = () => {//出发绑定事件emit('giveMeMessqge' , '儿子消息')}
</script>
//父亲页
<template><div><sonTest @giveMeMessqge="getMessage"/></div>
</template>
<script setup>
import sonTest from './views/sonTest.vue';
const getMessage = (msg) => {alert(msg)
}
</script>

模板引用

默认情况下<script setup>语法糖下组件内部的属性与方法不对父组件开放,可以通过defineExpose编译宏指定哪些属性和方法允许访问

//子组件
<template><div>Test 组件</div>
</template>
<script setup>import { ref } from 'vue';const name = ref('nameTest')const setName = () => {name.value = 'newNameTest'}// defineExpose({//     name,//     setName// })
</script>
//父组件
<template><div><!-- 用ref标识绑定ref对象 --><h1 ref="h1Ref">dom标签h1</h1><sonTest ref="sonRef"/></div>
</template>
<script setup>
import sonTest from './views/sonTest.vue';
import { ref , onMounted } from 'vue'//调用ref函数生成ref对象当然组件也是可以的
const h1Ref = ref(null)
const sonRef = ref(null)//不过要注意在获取对象时要等组件挂在完毕哦,可以使用
onMounted(() => {alert(h1Ref.value)alert(sonRef.value)
})
</script>

组合选项

顶层组件向任意底层组件传递参数和方法,实现跨层组件通信顶层组件通过provide函数提供数据,底层组件通过inject函数获取数据

效果

跨层组件通信

跨层传递普通数据:

普通数据

跨层传递响应式数据:

响应式数据

跨层传递方法:顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件中的数据

跨层传递方法
解决方案

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工厂电能质量治理解决方案

1、概述 谐波的危害十分严重&#xff0c;尤其在工厂这种设备较多的场合。大部分设备都是谐波源&#xff0c;谐波使电能的生产、传输和利用的效率降低&#xff0c;使电气设备过热、产生振动和噪声&#xff0c;并使绝缘老化&#xff0c;使用寿命缩短&#xff0c;甚至发生故障或烧…

RocketMQ 5.0 无状态实时性消费详解

作者&#xff1a;绍舒 背景 RocketMQ 5.0 版本引入了 Proxy 模块、无状态 pop 消费机制和 gRPC 协议等创新功能&#xff0c;同时还推出了一种全新的客户端类型&#xff1a;SimpleConsumer。 SimpleConsumer 客户端采用了无状态的 pop 机制&#xff0c;彻底解决了在客户端发布…

创作纪念日——Hello World

创作纪念日——Hello World 导读 正在报告&#xff01; ——迅捷斥候 成就 精通多种语言的Hello World 1. C #include int main() {printf("Hello, World");return(0); }2. C int main() {std::cout << "Hello World";return 0; }3. C# using…

QT字节数组类QByteArray

QT字节数组类QByteArray 初始化访问某个元素截取字符串获取字节数组的大小数据转换与处理Hex转换数值转换与输出 字母大小写转换字符串数值转化为各类数值QBQyteArray和char*互转QByteArray 和std::string互转与字符串QString互转QByteArray和自定义结构体之间的转化判断是否为…

区块链实验室(11) - PBFT耗时与流量特征

以前面仿真程序为例&#xff0c;分析PBFT的耗时与流量特征。实验如下&#xff0c;100个节点构成1个无标度网络&#xff0c;节点最小度为5&#xff0c;最大度为38. 从每个节点发起1次交易共识。统计每次交易的耗时以及流量。本文所述的流量见前述仿真程序的说明:区块链实验室(3)…

13.4.2 【Linux】sudo

相对于 su 需要了解新切换的使用者密码 &#xff08;常常是需要 root 的密码&#xff09;&#xff0c; sudo 的执行则仅需要自己的密码即可。sudo 可以让你以其他用户的身份执行指令 &#xff08;通常是使用 root 的身份来执行指令&#xff09;&#xff0c;因此并非所有人都能够…

“深入解析Spring Boot:原理、特性与最佳实践“

标题&#xff1a;深入解析Spring Boot&#xff1a;原理、特性与最佳实践 摘要&#xff1a;本文将深入解析Spring Boot的原理、特性和最佳实践&#xff0c;帮助开发工程师更好地理解和使用Spring Boot。文章包括Spring Boot的背景介绍、核心原理、常用特性和最佳实践&#xff0…

AcWing 1210. 连号区间数

输入样例1&#xff1a; 4 3 2 4 1输出样例1&#xff1a; 7输入样例2&#xff1a; 5 3 4 2 5 1输出样例2&#xff1a; 9样例解释 第一个用例中&#xff0c;有 77 个连号区间分别是&#xff1a;[1,1],[1,2],[1,3],[1,4],[2,2],[3,3],[4,4][1,1],[1,2],[1,3],[1,4],[2,2],[3,3…

【七天入门数据库】第五天 MySQL的备份恢复

系列文章传送门&#xff1a; 【七天入门数据库】第一天 MySQL的安装部署 【七天入门数据库】第二天 数据库理论基础 【七天入门数据库】第三天 MySQL的库表操作 【七天入门数据库】第四天 数据操作语言DML 一、日志管理 &#xff08;一&#xff09;日志类型 错误日志&am…

SAP ERP系统 MARA, MARC分别起到什么作用

“MARA"和"MARC” "MARA"和"MARC"是SAP系统中的两个重要的数据表&#xff0c;它们分别用于存储物料主数据和物料的工厂级数据。在SAP ERP系统中&#xff0c;物料主数据是核心数据之一&#xff0c;用于描述和管理公司生产和采购的物料。 MARA 表…

Linux系统知识1—Linux命令基础格式,什么是命令,命令行,ls命令入门,ls命令的参数和选项,-a,-l -h选项的使用及组合使用

一.什么是命令&#xff0c;命令行 &#xff0e;命令行&#xff1a;即 Linux 终端&#xff08; Terminal )&#xff0c;是一种命令提示符页面。以纯"字符"的形式操作系统&#xff0c;可以使用各种字符化命令对系统发出操作指令。 &#xff0e;命令&#xff1a;即 Lin…

redis(9):spring里面使用redis

1 创建一个mave项目 自行创建一个maven项目 2 修改pom.xml <properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.7</maven.compiler.source><maven.compiler.target>1.7</maven…

SpringMVC

文章目录 一.SpringMVC的概念1.1 Spring的概念1.2 MVC和SpringMVC的关系 二.SpringMVC步骤2.1 创建一个springMVC项目2.2 获取参数的功能2.3 输出参数的功能 三.SpringMVC的注解介绍3.1 获取参数3.1.1 获取参数单个参数3.1.2 获取多个参数3.1.3获取对象3.1.4 获取json对象3.1.5…

hqyj—驱动—day3

ioctl控制马达&#xff0c;LED灯&#xff0c;风扇&#xff0c;蜂鸣器运行 LED LED驱动程序&#xff1a; #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/io.h> #include "stm32mp1xx_gpio.h"…

深度学习初探

1.深度学习模型训练过程 1&#xff09;数据&#xff08;数据清洗标注&#xff09; 2&#xff09;模型&#xff08;模型的构建和初始化&#xff09; 3&#xff09;损失&#xff08;前向传播的过程&#xff0c;得到模型的输出和真实标签的差异值&#xff0c;称之为损失&#x…

深度学习常用优化器总结,具详细(SGD,Momentum,AdaGrad,Rmsprop,Adam,Adamw)

学习需要&#xff0c;总结一些常用优化器。 目录 前言SGD&#xff1a;随机梯度下降BGD&#xff1a;批量梯度下降MBGD&#xff1a;小批量梯度下降MomentumAdaGradRMSpropAdam: Adaptive Moment EstimationAdamW参考文章 前言 优化器的本质是使用不同的策略进行参数更新。常用的…

springboot jar分离部署

springboot jar分离部署 注意&#xff1a;spring boot web项目别使用jsp页面&#xff0c;可以使用模板代替&#xff0c;jsp打包时访问页面会报404错误。 1.具体配置如下&#xff1a; <build><plugins><!--更换maven的jar打包插件先前使用的是spring-boot-mav…

【C++】多态

一、多态的概念 多态&#xff0c;顾名思义就是多种状态。 多态概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。 举个例子:比如买票这个行为&#xff0c;当普通人买票时&#xff…

【CSS】 vh、rem 和 px 的区别

vh、rem 和 px 都是 CSS 中常见的长度单位&#xff0c;它们有以下区别&#xff1a; px&#xff08;像素&#xff09;是一个绝对单位&#xff0c;表示屏幕上的实际像素点。它的大小不会根据设备或浏览器的设置进行调整&#xff0c;是一个固定值。 rem&#xff08;根元素字体大小…

【PostgreSQL内核学习(八)—— 查询执行(查询执行策略)】

查询执行 查询执行概述查询执行策略可优化语句和数据定义语句四种执行策略策略选择实现Portal执行的过程 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#xff0c;我们尊重他人的知识产权和学术成果&#xff0c;力求遵循合理使用原则&#xff0c;并在适用的…