【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,一经查实,立即删除!

相关文章

MySQL多表联查函数

1 多表联查 1.1 表之间的关系 表和表的关系有: 一对一 老公 --> 老婆 , 人 ---> 身份证/户口本 一对多 皇帝 --> 妻妾 , 人 ---> 房/车 多对多 订单 --> 商品 1.2 合并结果集 合并结果集,是将多表查询的结果纵向合并 语法: select field1,field2 from t1 un…

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…

Git 的cherry-pick含义

目录 1. cherry-pick的基本概念 2. cherry-pick的使用场景 3. cherry-pick的使用方法 结论 1. cherry-pick的基本概念 git cherry-pick是一个Git命令&#xff0c;它允许你选择一个或多个其他分支上的提交&#xff08;commits&#xff09;&#xff0c;并将它们复制到你当前的…

Spring实例化Bean的三种方式

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

HTML5入门笔记

我使用中英互译的方法来制作本次笔记&#xff0c;课程来自网上精品资源 VSCode相关快捷键 选择文件夹和拖拽文件夹来打开 使用&#xff01;加enter&#xff08;回车&#xff09;&#xff0c;输入默认模板 <!DOCTYPE html> <html lang"en"> <head&…

go的Job Scheduling

背景 司内线上服务有很多异步脚本,大量冗余代码,管理很不方便 急需一个美丽的框架,让代码变得美好 包 go get github.com/go-co-op/gocron/v2 介绍 gocron is a job scheduling package which lets you run Go functions at pre-determined intervals. 概念 Job Job封…

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 &…

MySQL数据库索引失效的常见情况

MySQL数据库索引失效的常见情况 01 索引失效负面后果 在MySQL数据库中&#xff0c;当索引失效时&#xff0c;可能会导致以下后果&#xff1a; 全表扫描&#xff1a;如果索引失效&#xff0c;MySQL 可能会选择执行全表扫描来检索数据&#xff0c;这将导致性能下降&#xff0c;…

vue2 配置@指向src

使用的是vue cli创建的项目。 1.安装 path 如果在 Node.js 环境中运行代码&#xff0c;path 模块默认是可用的&#xff0c;则不需要单独安装&#xff0c;否则输入下面命令安装path npm i path -S 2.找到vue.config.js文件&#xff1a; const { defineConfig } require(vu…

辽渤湾海现已加入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方法。…

Leetcode第27题:移除元素

代码实现 class Solution:def removeElement(self, nums: List[int], val: int) -> int:ent_removeTruewhile(ent_remove):if val in nums:nums.remove(val)else:ent_removeFalsereturn len(nums)思路:重复判断列表中是否存在目标值&#xff0c;存在则删除&#xff0c;直到…

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

大家好&#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 万元的 …