vue3（二）
1、ref标签
2、TS中的接口、泛型、自定义类型
3、props父子组件传递数据
4、组件的生命周期
5、初识axios
6、自定义Hooks
7、配置路由的步骤
1、ref标签
ref放在普通html标签上拿到的是DOM元素，放在组件标签上拿到的是组件实例对象
假设有如下代码，要求输出h2标签里的内容
<template>
<div class = "person">
<h1 id="title1">China</h1>
<h2 id="title2">beijing</h2>
<button @click="showLog">点击此处输出h2标签的内容</button>
</div>
</template>
以下做法是错误的，因为id为title2的标签可能有多个，可能出现在别的vue文件中
function showLog(){
console.log(document.getElementById('title2'));
}
正确做法：
<template>
<div class = "person">
<h1 id = "title1">China</h1>
<h2 ref = "title2">beijing</h2>
<button @click="showLog">点击此处输出h2标签的内容</button>
</div>
</template>
<script lang = "ts">
import { ref } from 'vue';
export default{
name: "Person",
setup(){
let title2 = ref();
function showLog(){
console.log(title2.value);
//试试把<style>改成<style scoped>，看看输出的结果会是什么
}
return {
title2,
showLog,
}
}
}
</script>
<style>
div.person{
margin: 50px;
}
</style>
2、TS中的接口、泛型、自定义类型
//文件Person.ts
export interface PersonInter {
id: string,
name: string,
age: number,
}
//文件Person.vue
<script lang = "ts">
import { type PersonInter } from '@/types/Person';
export default{
name: "Person",
setup(){
//用接口定义一个对象
let person_z:PersonInter = {id: 'Lihua', name: "李华", age: 18 };
//以下是泛型的写法：
let personList:Array<PersonInter> = [
{id: 'LiMing', name: "李明", age: 22 },
{id: 'LiXiang', name: "李想", age: 23 }
];
}
}
</script>
自定义类型的写法：
//在文件Person.ts中后面加上内容：
export type Persons = Array<PersonInter>
//并在Person.vue中做相应修改
3、props父子组件传递数据
（后面有详细讲数据传递）
父组件向子组件传递数据
defineProps只能用于<script lang = "ts" setup name="Person">标签！！！
//父组件：App.vue
<template>
<Person :mylist = "personList" /> <!--写在标签里的变量是要传给子组件的变量-->
</template>
<script lang = "ts">
import Person from './components/Person.vue';
import { reactive } from 'vue'
export default{
setup(){
let personList = reactive([
{id: 'LiMing', name: "李明", age: 22 },
{id: 'LiXiang', name: "李想", age: 23 },
{id: 'Lihua', name: "李华", age: 18 }
]);
return{
personList,
}
},
components:{
Person,
}
}
</script>
//子组件：Person.vue
<template>
<div class = "person">
{{ mylist }}
</div>
</template>
<script lang = "ts">
import { toRaw } from 'vue';
export default{
name: "Person",
props: ['mylist'],//props里的数据是只读的
setup(props){
let x = toRaw(props.mylist);//toRaw的作用是把proxy数据转化成普通javascript数据
console.log(x[0]);
}
}
</script>
<style>
div.person{
margin: 50px;
}
</style>
4、组件的生命周期
在vue2中的每个阶段，都会调用指定的生命周期函数
| 创建 | beforeCreate | created |
| 挂载 | beforeMounted | mounted |
| 更新 | beforeUpdate | updated |
| 销毁 | beforeDestory | destoryed |
| 创建 | ||
| 挂载 | onBeforeMounted | onMounted |
| 更新 | onBeforeUpdate | onUpdated |
| 卸载 | onBeforeUnmount | onUnmounted |
5、初识axios
<template>
<div class = "person">
<img class="img-dog" v-for="(i,index) in doglist" :key="index" :src="i">
<br>
<button @click="display">huang</button>
</div>
</template>
<script lang = "ts">
import { reactive } from 'vue';
import axios from 'axios';
export default{
name: "Person",
setup(){
let doglist = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4796.jpg']);
function display(){
getDog();
}
async function getDog(){
try{
let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
console.log(result)
doglist.push(result.data.message)
}catch(error){
alert("获取失败")
}
}
return {
doglist,
display,
}
}
}
</script>
<style>
div.person{
margin: 50px;
}
img.img-dog{
margin-right: 5px;
}
</style>
6、自定义Hooks
使用hooks进行模块化开发，把一种或一类的数据和方法组合起来，这正是vue3组合式API与vue2的选项式API的不同之处
//本文件存储在src/hooks/useDog.ts中
import { reactive } from 'vue';
import axios from 'axios';
export function useDog() {
let doglist = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4796.jpg']);
function display(){
getDog();
}
async function getDog(){
try{
let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
doglist.push(result.data.message)
}catch(error){
alert("获取失败")
}
}
return {
doglist,
display
}
}
//本文件存储在src\components\Person.vue中
<template>
<div class = "person">
<img class="img-dog" v-for="(i,index) in doglist" :key="index" :src="i">
<br>
<button @click="display">点击此处获取狗</button>
</div>
</template>
<script lang = "ts">
import { useDog } from '@/hooks/useDog';
export default{
name: "Person",
setup(){
const { doglist,display } = useDog();
return {
doglist,
display,
}
}
}
</script>
<style>
div.person{
margin: 50px;
}
img.img-dog{
margin-right: 5px;
}
</style>
7、配置路由的步骤
（1）安装路由命令npm i vue-router
（2）编写各路径对应的各种component
（3）编写index.ts文件，一般格式如下。
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
const router = createRouter({
history: createWebHistory(), // 路由器的工作模式
routes: [ // 路由规则
{
path: '/home',
name: 'home',
component: HomeView
}
]
})
export default router
（4）在vue的入口（main.ts）里引入路由
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router' // 本行新加的
const app = createApp(App)
app.use(router) // 本行新加的
app.mount('#app')
（5）在App.vue中放置路由
//本文件是App.vue
<template>
<RouterLink to="/home" active-class="xiao">点击此处回主页</RouterLink>
<br>
<RouterLink to="/about" active-class="zhu">点击此处显示关于</RouterLink>
<br>
<RouterLink to="/news" active-class="peiqi">点击此处显新闻</RouterLink>
` <!-- 普通标签写herf，RouterLink标签写to，或者 :to="{name:""}" -->`
<router-view />
</template>
<script lang = "ts">
import RouterView from 'vue-router'
export default{
}
</script>
