生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<template>
    <div class="person">
        <h2>当前求和为：{{sum}}</h2>
        <button @click="add">点击</button>
    </div>
</template>


<script lang="ts" setup>
defineOptions({ name: 'person5' })
import { ref ,onBeforeMount,onMounted,onBeforeUpdate, onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
//数据
let sum = ref(0)

//方法
function add() {
    sum.value+=1
}

//创建
console.log('创建')

//挂载前
onBeforeMount(() => {
    console.log('挂载前')
})
//挂载完毕
onMounted(() => {
    console.log('挂载完毕')
})
//更新前
onBeforeUpdate(() => {
    console.log('更新前')
})
//更新完毕
onUpdated(() => {
    console.log('更新完毕')
})
//卸载前
onBeforeUnmount(() => {
    console.log('卸载前')
 })
//卸载完毕
onUnmounted(() => {
    console.log('卸载完毕')
})

</script>


<style scoped>
.person{
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding:20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <Preson5 v-if="isShow"/>

</template>

<script lang="ts" setup>
defineOptions({ name:'you'})
import Preson5 from './components/Preson5.vue';
import { ref } from 'vue'

let isShow=ref(true)
</script>

路由

1
2
npm i axios
npm i vue-router

1.app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
<div class="app">
    <h2>Vue路由测试</h2>
    <div class="navigate">
        <RouterLink to="/home"active-class="you">首页</RouterLink>
    </div>
    <div class="main-content">
        <RouterView></RouterView>
    </div>
</div>
</template>

<script lang="ts" setup>
import { RouterView,RouterLink } from 'vue-router';

</script>

<style scoped>
.navigate a.you{
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding:20px;
}
</style>

2.index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//创建一个路由器，并暴露出去

//第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/components/Home.vue'

//第二步L：创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes: [
        {
            path: '/home',
            component:Home
       } 
    ]
})
//暴露出去router
export default router

3.Home.vue

1
2
3
<template>
    <div class="home">hksjflasfjlsa</div>
</template>

4.main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//引入createApp用于创建应用
import { createApp } from "vue"
//引入App根组件
import App from './App.vue'
//引入路由器
import router from "./router"

//创建一个应用
const app = createApp(App)
//使用路由器
app.use(router)
//挂在整个应用到app容器中
app.mount('#app')