【vue3(七)】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、ref
  • 二、TS接口泛型规范
    • 1.创建ts文件,定义接口
    • 2.引入规范
  • 三、props的使用
  • 四、生命周期(生命周期函数,生命周期钩子)
  • 五、自定义Hooks
    • 1.安装 axios并引入
    • 2.定义数组并写方法


前言

提示:这里可以添加本文要记录的大概内容:

例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


提示:以下是本篇文章正文内容,下面案例可供参考

一、ref

ref可以放在html标签中,这时拿到的是DOM元素;也可以放在组件中使用,这时拿到的是组件实例对象
实现效果:
在这里插入图片描述
这里不推荐用id,因为若在App.vue里也出现了相同的id,便会先渲染,就会出现你好的字段,会有id冲突的问题
Person.vue

<template><div class="person"><h1>中国</h1><h2 id="title2">北京</h2><h3>开心</h3><button @click="showLog">点我输出h2这个元素</button></div>
</template><script lang="ts" setup name="Person">
function showLog(){console.log(document.getElementById('title2'))
}</script><style scoped>
.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}</style>

App.vue

<template><h2 id="title2">你好</h2><Person/></template><script lang="ts" setup name="App">
import Person from "@/components/Person.vue";</script><style>
.app{background-color: #2c3e50;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>

修改后的Person.vue,使用ref即可解决id冲突问题

<template><div class="person"><h1>中国</h1><h2 ref="title2">北京</h2><h3>开心</h3><button @click="showLog">点我输出h2这个元素</button></div>
</template><script lang="ts" setup name="Person">
import {ref} from 'vue'// 创建一个title2,用于存储ref标记的内容
let title2 = ref()
function showLog(){console.log(title2))
}</script><style scoped>
.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}</style>

以上ref是写在html里的,若把ref写在组件,返回的是组件实例
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
并未返回子组件定义的值,因为被保护起来的,只有子组件主动让访问,才可以

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

二、TS接口泛型规范

1.创建ts文件,定义接口

在src下新建types文件夹,新建index.ts,定义一个接口,用于限制对象的具体属性
在这里插入图片描述

2.引入规范

在这里插入图片描述
若定义多个人,放在一个数组,如何去限制。定义一个变量personList,personList是一个数组,数组的每一项要符合PersonInter接口规范,需要使用到泛型
在这里插入图片描述
还有另外一种修改方式
在这里插入图片描述
在这里插入图片描述

三、props的使用

实现父组件到子组件的值传递
在这里插入图片描述
从App.vue传的a 和list ,可以只接受list,若接收App.vue未传的内容,会显示undefined,也可用?来解决可传可不传
在这里插入图片描述
接受并限制类型
在这里插入图片描述
接受+限制类型+限制必要性+指定默认值
在这里插入图片描述
当App.vue没传,可设置默认值
在这里插入图片描述

四、生命周期(生命周期函数,生命周期钩子)

组件的一生:创建,挂载,更新,销毁
vue2的生命周期:创建组件,调用一个钩子(生命周期函数)
4个阶段,基础的8个钩子,不只有8个
创建(创建前 beforeCreate,创建完毕 created)----在内存中从无到有
挂载(挂载前 beforeMount,挂载完毕 mounted)—把.vue放在页面里,浏览器能看到
更新(更新前 beforeUpdate,更新完毕 updated)
销毁(销毁前 beforeDestory,销毁完毕 destroyed)
vue3的生命周期:
用set up 模拟,创建—console.log(‘创建’)
挂载——onBeforMount(()=>{console.log(‘挂载前’)})
——onMounted(()=>{ console.log(‘挂载完毕’)})
更新——onBeforeUpdate(()=>{console.log('更新前‘)})
——onUpdated(()=>{ console.log(‘更新完毕’)})
卸载——onBeforeUnmount(()=>{ console.log(‘卸载前’)})
——onUnmounted(()=>{ console.log(‘卸载前’)})
常用钩子:onMounted,onUpdate,onBeforeUnmount

问题:是父挂载完毕先输出,还是子挂载完毕先输出?
答:子先挂载完毕输出。入口文件在index.html,引入了main.ts,main.ts工作时发现要把App拿到页面,App.vue要解析这个组件,而App组件里有Person组件,把Person里所有执行完,App.vue组件开始才被解析完。App.vue是最后挂载的

五、自定义Hooks

Hooks可以实现模块化,即一个功能的数据和方法单独放在一个useXxx.ts文件。

想要实现数组里存放的图片,点击按钮便增加一张图
在这里插入图片描述

1.安装 axios并引入

控制台下载安装npm i axios
在person.vue里引入import axios from "axios";

2.定义数组并写方法

考虑若地址访问错误返回异常

<template><div class="person"><h2>当前求和为:{{sum}}</h2><button @click="showAdd">点我加一</button><hr><img  v-for="(dog,index) in dogList" :src="dog" :key="index"><br><button @click="getDog">再来一只</button></div>
</template><script lang="ts" setup name="Person">
import {ref,reactive} from 'vue'
import axios from "axios";// https://dog.ceo/api/breed/pembroke/images/randomlet sum = ref(0)
let dogList = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4544.jpg',])function showAdd(){sum.value+=1
}async function getDog(){// axios.get('https://dog.ceo/api/breed/pembroke/images/random').then(//     response => {},//     error => {})try{let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')console.log(result.data)dogList.push(result.data.message)} catch (error){alert(error)}}</script><style scoped>
.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
li {font-size:20px;
}
img{height: 100px;margin-right: 10px;
}</style>

利用Hooks完成
src下新建hooks文件,把求和与增加图片单独创建,useSum.ts和useDog.ts。
useSum.ts

import {ref} from 'vue'export default function (){let sum = ref(0)function showAdd(){sum.value+=1}// 给外部提供东西return {sum,showAdd}}

useDog.ts

import {reactive} from 'vue'
import axios from "axios";// https://dog.ceo/api/breed/pembroke/images/randomexport default function (){let dogList = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4544.jpg',])async function getDog(){// axios.get('https://dog.ceo/api/breed/pembroke/images/random').then(//     response => {},//     error => {})try{let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')console.log(result.data)dogList.push(result.data.message)} catch (error){alert(error)}}// 向外部提供东西return {dogList,getDog}
}

在person.vue里引入

<template><div class="person"><h2>当前求和为:{{sum}}</h2><button @click="showAdd">点我加一</button><hr><img  v-for="(dog,index) in dogList" :src="dog" :key="index"><br><button @click="getDog">再来一只</button></div>
</template><script lang="ts" setup name="Person">import useSum from '@/hooks/useSum'import useDog from "@/hooks/useDog";const {sum,showAdd} = useSum()const {dogList,getDog}=useDog()</script><style scoped>
.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
li {font-size:20px;
}
img{height: 100px;margin-right: 10px;
}</style>

也可以添加onMounted和computed属性
在这里插入图片描述
用计算属性实现扩大10倍,记得要交出去,方便在Person.vue使用
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

rust中字符串String常用方法和注意事项

Rust 中通常说的字符串指的是&#xff1a;String 和 &str(字符串字面值、或者叫字符串切片)这两种类型。str是rust中基础字符串类型&#xff0c;String是标准库里面的类型。Rust 中的字符串本质上是&#xff1a;Byte的集合&#xff08;Vec<u8>&#xff09; 基础类型…

【第三方登录】Google邮箱

登录谷歌邮箱开发者 https://console.developers.google.com/ 先创建项目 我们用的web应用 设置回调 核心主要&#xff1a; 1.创建应用 2.创建客户端ID 3.设置域名和重定向URL 4.对外公开&#xff0c;这样所有的gmail邮箱 都能参与测试PHP代码实现 引入第三方包 h…

Spring实例化Bean的三种方式

参考资料&#xff1a; Core Technologies 核心技术 spring实例化bean的三种方式 构造器来实例化bean 静态工厂方法实例化bean 非静态工厂方法实例化bean_spring中有参构造器实例化-CSDN博客 1. 构造函数 1.1. 空参构造函数 下面这样表示调用空参构造函数&#xff0c;使用p…

linux查看usb是3.0还是2.0

1 作为device cat /sys/devices/platform/10320000.usb30drd/10320000.dwc3/udc/10320000.dwc3/current_speed 或 /sys/class/udc/10320000.dwc3/current_speed 如下 high-speed usb2.0 super-speed usb3.0 2 作为host linux下使用以下命令查看 &#xff0c;如果显示 速率为…

python关于字符串基础学习

字符串 python字符串是不可改变的 Python不支持单字符类型&#xff0c;单字符也是作为一个字符串使用的。 字符串编码 python3直接支持Unicode,可以表示世界上任何书面语言的字符 python3的字符默认就是16位Unicode编码&#xff0c;ASCII是Unicode的子集 使用内置函数 ord()…

c++初步

作业&#xff1a; 定义自己的命名空间&#xff0c;其中有string类型的变量&#xff0c;再定义两个函数&#xff0c;一个函数完成字符串的输入&#xff0c;一个函数完成求字符串长度&#xff0c;再定义一个全局函数完成对该字符串的反转 #include <iostream> #include &…

辽渤湾海现已加入2024第七届燕窝天然滋补品博览会

参展企业介绍 大连辽渤湾海产品有限公司&#xff0c;是一家主营海参、鲍鱼、海胆等大连海产品的加工和销售的综合型水产企业&#xff0c;拥有国内精良的整条加工流水线&#xff0c;拥有上千平米的现代化加工办公场地的现代化企业。现已发展成为大连海参产品的主导型深加工基地。…

SpringBoot 三种拦截http请求方式Filter,Interceptor和AOP

1 Filter Filter常被叫做过滤器&#xff0c;filter的调用周期大致如下 也就是说filter在servlet之前&#xff0c;没有办法在filter中获取springboot中的java bean对象。 Filter生命周期方法 init:在服务器启动后&#xff0c;会创建Filter对象&#xff0c;然后调用init方法。…

无货源违规又现,现在还能做抖音小店吗?无货源商家该怎么调整?

大家好&#xff0c;我是电商花花。 最近好像又有很多人的店铺被查无货源违规&#xff0c;店铺还被扣12分&#xff0c;也申诉不了。 如果想要长期的做下去&#xff0c;就不要秀那些花里胡哨的操作&#xff0c;也不要为了短暂的自然流量而进行违规操作&#xff0c;为什么你的店…

【网络爬虫】(1) 网络请求,urllib库介绍

各位同学好&#xff0c;今天开始和各位分享一下python网络爬虫技巧&#xff0c;从基本的函数开始&#xff0c;到项目实战。那我们开始吧。 1. 基本概念 这里简单介绍一下后续学习中需要掌握的概念。 &#xff08;1&#xff09;http 和 https 协议。http是超文本传输&#xf…

leetcode mt simple

Leetcode-MT-Simple 文章实际写于2021年&#xff0c;那个炎热的夏天。 Leet Code 美团题库简单类总结&#xff0c;题目按照解法可大致分为数学法、计数法、位运算、双指针法、字符串、哈希表、栈、递归/迭代、排序法、匹配法、记忆化法、二分法、分治法、摩尔投票法、前缀和、…

基于nodejs+vue家装一体化平台python-flask-django-php

提高现下家装一体化平台的准确度&#xff0c;同时降低经济波动带来的不良影响&#xff0c;希望本文能对广大学者的研究提供参考。 前端技术&#xff1a;nodejsvueelementui, Express 框架于Node运行环境的Web框架, 语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&am…

喜获千万元价值补贴,探索 AI 领域新应用:Zilliz 全力支持 AI 初创企业

价值 1000 万元的大额补贴&#xff01;得到领先全行业的向量数据库团队支持&#xff01;尽享独家生态资源&#xff01;「Zilliz AI 初创计划」正式开启&#xff01; 「Zilliz AI 初创计划」是 Zilliz 面向 AI 初创企业推出的一项扶持计划&#xff0c;预计提供总计 1000 万元的 …

书生·浦语大模型实战营——两周带你玩转微调部署评测全链路

引言 人工智能技术的发展日新月异&#xff0c;其中大模型的发展尤其迅速&#xff0c;已然是 AI 时代最炙手可热的当红炸子鸡。 然而&#xff0c;大模型赛道对于小白开发者来说还是有不小的门槛。面对内容质量参差不齐的课程和实际操作中遇到的问题&#xff0c;许多开发者往往…

2核4g服务器能支持多少人访问?阿里云2核4g服务器在线人数

阿里云2核4G服务器多少钱一年&#xff1f;2核4G配置1个月多少钱&#xff1f;2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年。可以在阿里云CLUB中心查看 aliyun.club 当前最新2核4G服务器精准报价、优惠券和活动信息。 阿里云官方2…

【PCL】mac下安装PCL的安装与配置

【PCL】mac下安装PCL的安装与配置 PCL PCL官方文档 PCL&#xff08;Point Cloud Library&#xff09;是在吸收了前人点云相关研究基础上建立起来的大型跨平台开源C编程库&#xff0c;它实现了大量点云相关的通用算法和高效数据结构&#xff0c;涉及到点云获取、滤波、分割、配…

知识图谱推理算法综述(上):基于距离和图传播的模型

背景 知识图谱系统的建设需要工程和算法的紧密配合&#xff0c;在工程层面&#xff0c;去年蚂蚁集团联合 OpenKG 开放知识图谱社区&#xff0c;共同发布了工业级知识图谱语义标准 OpenSPG 并开源&#xff1b;算法层面&#xff0c;蚂蚁从知识融合&#xff0c;知识推理&#xff…

底部填充胶在汽车电子领域的应用有哪些?

底部填充胶在汽车电子领域的应用有哪些&#xff1f; 在汽车电子领域&#xff0c;底部填充胶被广泛应用于IC封装等&#xff0c;以实现小型化、高聚集化方向发展。 底部填充胶在汽车电子领域有多种应用&#xff0c;包括以下方面&#xff1a; 传感器和执行器的封装&#xff1a;汽车…

AJAX(一):初识AJAX、http协议、配置环境、发送AJAX请求、请求时的问题

一、什么是AJAX 1.AJAX 就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据。AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准组合在一起使用的新方式。 2.XML 可扩展标记语言。XML被设计用来传输和…

工业级POE交换机的SSH配置步骤

工业级POE交换机的SSH&#xff08;Secure Shell&#xff09;配置可以通过以下步骤进行&#xff1a; 1. 连接到POE交换机&#xff1a;使用一个支持SSH协议的终端工具&#xff08;如PuTTY&#xff09;连接到POE交换机的管理接口。 2. 登录到POE交换机&#xff1a;输入正确的用户…