spider/js_reverse
1
0
Fork 0
mirror of https://github.com/luzhisheng/js_reverse.git synced 2025-04-19 18:24:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

vue学习

Browse Source
This commit is contained in:
yingfeng.ai 2024-11-06 18:09:19 +08:00
parent 367f39beed
commit 0f623c5fb6
32 changed files with 1003 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
学习VUE/hello_vue3/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>

47
学习VUE/hello_vue3/src/App.vue
View File

@ -1,16 +1,45 @@
<template> <template>
<div> <div class="container-fluid wraper">
<Count/> <h1 class="title">
<br> Vue3 组件间通信
<LoveTalk/> </h1>
<hr>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
<!-- 导航区 -->
<router-link active-class="active" class="list-group-item" to="/props">1. props</router-link>
<router-link active-class="active" class="list-group-item" to="/event">2. 自定义事件</router-link>
<router-link active-class="active" class="list-group-item" to="/mitt">3. mitt</router-link>
<router-link active-class="active" class="list-group-item" to="/model">4. v-model</router-link>
<router-link active-class="active" class="list-group-item" to="/attrs">5. $attrs</router-link>
<router-link active-class="active" class="list-group-item" to="/ref-parent">6. <span class="small">$refs、$parent</span></router-link>
<router-link active-class="active" class="list-group-item" to="/provide-inject">7. provide、inject</router-link>
<router-link active-class="active" class="list-group-item" to="/pinia">8. pinia</router-link>
<router-link active-class="active" class="list-group-item" to="/slot">9. slot</router-link>
</div>
<div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
<div class="panel-body">
<!-- 占位一个展示区 -->
<router-view></router-view>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts" name="App">
import Count from '@/components/Count.vue'
import LoveTalk from '@/components/LoveTalk.vue'
</script> </script>
<style scoped> <style>
.wraper .title {
padding: 20px;
text-align: center;
min-width: 610px;
}
.wraper .small{
font-size: 15px;
}
.wraper .list-group-item {
min-width: 230px;
}
</style> </style>

25
学习VUE/hello_vue3/src/pages/01_props/Child.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div class="child">
<h3>子组件</h3>
<h4>玩具：{{ toy }}</h4>
<h4>父给的车：{{ car }}</h4>
<button @click="sendToy(toy)">把玩具给父亲</button>
</div>
</template>
<script setup lang="ts" name="Child">
import {ref} from 'vue'
// 数据
let toy = ref('奥特曼')
// 声明接收props
defineProps(['car','sendToy'])
</script>
<style scoped>
.child{
background-color: skyblue;
padding: 10px;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
</style>

28
学习VUE/hello_vue3/src/pages/01_props/Father.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div class="father">
<h3>父组件</h3>
<h4>汽车：{{ car }}</h4>
<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
<Child :car="car" :sendToy="getToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import {ref} from 'vue'
// 数据
let car = ref('奔驰')
let toy = ref('')
// 方法
function getToy(value:string){
toy.value = value
}
</script>
<style scoped>
.father{
background-color:rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
</style>

26
学习VUE/hello_vue3/src/pages/02_custom-event/Child.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="child">
<h3>子组件</h3>
<h4>玩具：{{ toy }}</h4>
<!-- 通过点击事件触发 send-toy 事件 在send-toy 事件中触发saveToy函数，并传入变量toy，变量toy的值是'奥特曼' -->
<button @click="emit('send-toy',toy)">测试</button>
</div>
</template>
<script setup lang="ts" name="Child">
import { ref } from "vue";
// 数据
let toy = ref('奥特曼')
// 声明事件
const emit = defineEmits(['send-toy'])
</script>
<style scoped>
.child{
margin-top: 10px;
background-color: rgb(76, 209, 76);
padding: 10px;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
</style>

31
学习VUE/hello_vue3/src/pages/02_custom-event/Father.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="father">
<h3>父组件</h3>
<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
<!-- 给子组件Child绑定自定义事件 -->
<Child @send-toy="saveToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
let toy = ref('')
// 用于保存传递过来的玩具
function saveToy(value:string){
console.log('saveToy',value)
toy.value = value
}
</script>
<style scoped>
.father{
background-color:rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.father button{
margin-right: 5px;
}
</style>

28
学习VUE/hello_vue3/src/pages/03_mitt/Child1.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div class="child1">
<h3>子组件1</h3>
<h4>玩具：{{ toy }}</h4>
<button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>
</div>
</template>
<script setup lang="ts" name="Child1">
import {ref} from 'vue'
import emitter from '@/utils/emitter';
// 数据
let toy = ref('奥特曼')
</script>
<style scoped>
.child1{
margin-top: 50px;
background-color: skyblue;
padding: 10px;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
.child1 button{
margin-right: 10px;
}
</style>

34
学习VUE/hello_vue3/src/pages/03_mitt/Child2.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="child2">
<h3>子组件2</h3>
<h4>电脑：{{ computer }}</h4>
<h4>哥哥给的玩具：{{ toy }}</h4>
</div>
</template>
<script setup lang="ts" name="Child2">
import {ref,onUnmounted} from 'vue'
import emitter from '@/utils/emitter';
// 数据
let computer = ref('联想')
let toy = ref('')
// 给emitter绑定send-toy事件
emitter.on('send-toy',(value:any)=>{
toy.value = value
})
// 在组件卸载时解绑send-toy事件
onUnmounted(()=>{
emitter.off('send-toy')
})
</script>
<style scoped>
.child2{
margin-top: 50px;
background-color: orange;
padding: 10px;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
</style>

23
学习VUE/hello_vue3/src/pages/03_mitt/Father.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="father">
<h3>父组件</h3>
<Child1/>
<Child2/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
</script>
<style scoped>
.father{
background-color:rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.father button{
margin-left: 5px;
}
</style>

28
学习VUE/hello_vue3/src/pages/04_v-model/AtguiguInput.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<input
type="text"
:value="ming"
@input="emit('update:ming',(<HTMLInputElement>$event.target).value)"
>
<br>
<input
type="text"
:value="mima"
@input="emit('update:mima',(<HTMLInputElement>$event.target).value)"
>
</template>
<script setup lang="ts" name="AtguiguInput">
defineProps(['ming','mima'])
const emit = defineEmits(['update:ming','update:mima'])
</script>
<style scoped>
input {
border: 2px solid black;
background-image: linear-gradient(45deg,red,yellow,green);
height: 30px;
font-size: 20px;
color: white;
}
</style>

36
学习VUE/hello_vue3/src/pages/04_v-model/Father.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div class="father">
<h3>父组件</h3>
<h4>{{ username }}</h4>
<h4>{{ password }}</h4>
<!-- v-model用在html标签上 -->
<!-- <input type="text" v-model="username"> -->
<!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->
<!-- v-model用在组件标签上 -->
<!-- <AtguiguInput v-model="username"/> -->
<!-- <AtguiguInput
:modelValue="username"
@update:modelValue="username = $event"
/> -->
<!-- 修改modelValue -->
<AtguiguInput v-model:ming="username" v-model:mima="password"/>
</div>
</template>
<script setup lang="ts" name="Father">
import { ref } from "vue";
import AtguiguInput from './AtguiguInput.vue'
// 数据
let username = ref('zhansgan')
let password = ref('123456')
</script>
<style scoped>
.father {
padding: 20px;
background-color: rgb(165, 164, 164);
border-radius: 10px;
}
</style>

20
学习VUE/hello_vue3/src/pages/05_$attrs/Child.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div class="child">
<h3>子组件</h3>
<GrandChild v-bind="$attrs"/>
</div>
</template>
<script setup lang="ts" name="Child">
import GrandChild from './GrandChild.vue'
</script>
<style scoped>
.child{
margin-top: 20px;
background-color: skyblue;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>

32
学习VUE/hello_vue3/src/pages/05_$attrs/Father.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="father">
<h3>父组件</h3>
<h4>a：{{a}}</h4>
<h4>b：{{b}}</h4>
<h4>c：{{c}}</h4>
<h4>d：{{d}}</h4>
<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import {ref} from 'vue'
let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)
function updateA(value:number){
a.value += value
}
</script>
<style scoped>
.father{
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
</style>

26
学习VUE/hello_vue3/src/pages/05_$attrs/GrandChild.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="grand-child">
<h3>孙组件</h3>
<h4>a：{{ a }}</h4>
<h4>b：{{ b }}</h4>
<h4>c：{{ c }}</h4>
<h4>d：{{ d }}</h4>
<h4>x：{{ x }}</h4>
<h4>y：{{ y }}</h4>
<button @click="updateA(6)">点我将爷爷那的a更新</button>
</div>
</template>
<script setup lang="ts" name="GrandChild">
defineProps(['a','b','c','d','x','y','updateA'])
</script>
<style scoped>
.grand-child{
margin-top: 20px;
background-color: orange;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>

34
学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child1.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="child1">
<h3>子组件1</h3>
<h4>玩具：{{ toy }}</h4>
<h4>书籍：{{ book }} 本</h4>
<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
</div>
</template>
<script setup lang="ts" name="Child1">
import { ref } from "vue";
// 数据
let toy = ref('奥特曼')
let book = ref(3)
// 方法
function minusHouse(parent:any){
parent.house -= 1
}
// 把数据交给外部
defineExpose({toy,book})
</script>
<style scoped>
.child1{
margin-top: 20px;
background-color: skyblue;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>

26
学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child2.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="child2">
<h3>子组件2</h3>
<h4>电脑：{{ computer }}</h4>
<h4>书籍：{{ book }} 本</h4>
</div>
</template>
<script setup lang="ts" name="Child2">
import { ref } from "vue";
// 数据
let computer = ref('联想')
let book = ref(6)
// 把数据交给外部
defineExpose({computer,book})
</script>
<style scoped>
.child2{
margin-top: 20px;
background-color: orange;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>

65
学习VUE/hello_vue3/src/pages/06_$refs-$parent/Father.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="father">
<h3>父组件</h3>
<h4>房产：{{ house }}</h4>
<button @click="changeToy">修改Child1的玩具</button>
<button @click="changeComputer">修改Child2的电脑</button>
<button @click="getAllChild($refs)">让所有孩子的书变多</button>
<Child1 ref="c1"/>
<Child2 ref="c2"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
import { ref,reactive } from "vue";
let c1 = ref()
let c2 = ref()
// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的
/* let obj = reactive({
a:1,
b:2,
c:ref(3)
})
let x = ref(4)
console.log(obj.a)
console.log(obj.b)
console.log(obj.c)
console.log(x) */
// 数据
let house = ref(4)
// 方法
function changeToy(){
c1.value.toy = '小猪佩奇'
}
function changeComputer(){
c2.value.computer = '华为'
}
function getAllChild(refs:{[key:string]:any}){
console.log(refs)
for (let key in refs){
refs[key].book += 3
}
}
// 向外部提供数据
defineExpose({house})
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.father button {
margin-bottom: 10px;
margin-left: 10px;
}
</style>

20
学习VUE/hello_vue3/src/pages/07_provide-inject/Child.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div class="child">
<h3>我是子组件</h3>
<GrandChild/>
</div>
</template>
<script setup lang="ts" name="Child">
import GrandChild from './GrandChild.vue'
</script>
<style scoped>
.child {
margin-top: 20px;
background-color: skyblue;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>

35
学习VUE/hello_vue3/src/pages/07_provide-inject/Father.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="father">
<h3>父组件</h3>
<h4>银子：{{ money }}万元</h4>
<h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
<Child/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import {ref,reactive,provide} from 'vue'
let money = ref(100)
let car = reactive({
brand:'奔驰',
price:100
})
function updateMoney(value:number){
money.value -= value
}
// 向后代提供数据
provide('moneyContext',{money,updateMoney})
provide('car',car)
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
</style>

24
学习VUE/hello_vue3/src/pages/07_provide-inject/GrandChild.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="grand-child">
<h3>我是孙组件</h3>
<h4>银子：{{ money }}</h4>
<h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
<button @click="updateMoney(6)">花爷爷的钱</button>
</div>
</template>
<script setup lang="ts" name="GrandChild">
import { inject } from "vue";
let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})
let car = inject('car',{brand:'未知',price:0})
</script>
<style scoped>
.grand-child{
background-color: orange;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>

17
学习VUE/hello_vue3/src/pages/08_pinia/Father.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div class="father">
<h3>父组件</h3>
<h3>直接参考之前所讲的pinia即可</h3>
</div>
</template>
<script setup lang="ts" name="Father">
</script>
<style scoped>
.father{
background-color: rgb(165, 165, 165);
padding: 20px;
border-radius: 10px;
}
</style>

52
学习VUE/hello_vue3/src/pages/09_slot/Father.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Game>
<template v-slot="params">
<ul>
<li v-for="y in params.youxi" :key="y.id">
{{ y.name }}
</li>
</ul>
</template>
</Game>
<Game>
<template v-slot="params">
<ol>
<li v-for="item in params.youxi" :key="item.id">
{{ item.name }}
</li>
</ol>
</template>
</Game>
<Game>
<template #default="{youxi}">
<h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
</template>
</Game>
</div>
</div>
</template>
<script setup lang="ts" name="Father">
import Game from './Game.vue'
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>

32
学习VUE/hello_vue3/src/pages/09_slot/Game.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="game">
<h2>游戏列表</h2>
<slot :youxi="games" x="哈哈" y="你好"></slot>
</div>
</template>
<script setup lang="ts" name="Game">
import {reactive} from 'vue'
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
</script>
<style scoped>
.game {
width: 200px;
height: 300px;
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>

52
学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Game>
<template v-slot="params">
<ul>
<li v-for="y in params.youxi" :key="y.id">
{{ y.name }}
</li>
</ul>
</template>
</Game>
<Game>
<template v-slot="params">
<ol>
<li v-for="item in params.youxi" :key="item.id">
{{ item.name }}
</li>
</ol>
</template>
</Game>
<Game>
<template #default="{youxi}">
<h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
</template>
</Game>
</div>
</div>
</template>
<script setup lang="ts" name="Father">
import Game from './Game.vue'
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>

32
学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="game">
<h2>游戏列表</h2>
<slot :youxi="games" x="哈哈" y="你好"></slot>
</div>
</template>
<script setup lang="ts" name="Game">
import {reactive} from 'vue'
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
</script>
<style scoped>
.game {
width: 200px;
height: 300px;
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>

21
学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Category.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div class="category">
<slot name="s1">默认内容1</slot>
<slot name="s2">默认内容2</slot>
</div>
</template>
<script setup lang="ts" name="Category">
</script>
<style scoped>
.category {
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
width: 200px;
height: 300px;
}
</style>

71
学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Father.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Category>
<template v-slot:s2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</template>
<template v-slot:s1>
<h2>热门游戏列表</h2>
</template>
</Category>
<Category>
<template v-slot:s2>
<img :src="imgUrl" alt="">
</template>
<template v-slot:s1>
<h2>今日美食城市</h2>
</template>
</Category>
<Category>
<template #s2>
<video video :src="videoUrl" controls></video>
</template>
<template #s1>
<h2>今日影视推荐</h2>
</template>
</Category>
</div>
</div>
</template>
<script setup lang="ts" name="Father">
import Category from './Category.vue'
import { ref,reactive } from "vue";
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>

27
学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Category.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="category">
<h2>{{title}}</h2>
<slot>默认内容</slot>
</div>
</template>
<script setup lang="ts" name="Category">
defineProps(['title'])
</script>
<style scoped>
.category {
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
width: 200px;
height: 300px;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>

48
学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Category title="热门游戏列表">
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</Category>
<Category title="今日美食城市">
<img :src="imgUrl" alt="">
</Category>
<Category title="今日影视推荐">
<video :src="videoUrl" controls></video>
</Category>
</div>
</div>
</template>
<script setup lang="ts" name="Father">
import Category from './Category.vue'
import { ref,reactive } from "vue";
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>

72
学习VUE/hello_vue3/src/router/index.ts
View File

@ -1,42 +1,52 @@
import {createRouter, createWebHistory} from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import Props from '@/pages/01_props/Father.vue'
import Event from '@/pages/02_custom-event/Father.vue'
import Bus from '@/pages/03_mitt/Father.vue'
import Model from '@/pages/04_v-model/Father.vue'
import AttrsListeners from '@/pages/05_$attrs/Father.vue'
import RefChildrenParent from '@/pages/06_$refs-$parent/Father.vue'
import ProvideInject from '@/pages/07_provide-inject/Father.vue'
import Pinia from '@/pages/08_pinia/Father.vue'
import Slot from '@/pages/09_slot/Father.vue'
import Home from '@/pages/Home.vue' export default createRouter({
import News from '@/pages/News.vue' history: createWebHistory(),
import About from '@/pages/About.vue'
import Details from '@/pages/Details.vue'
//创建路由器
const router = createRouter({
history: createWebHistory(), //路由器的工作模式
routes: [ routes: [
{ {
name: 'home', path: '/props',
path: '/', component: Props
component: Home
}, },
{ {
name: 'news', path: '/event',
path: '/news', component: Event
component: News,
children: [
{
name: 'news-details',
path: 'details', // 注意：子路由的 path 不需要以 "/" 开头
component: Details
}
]
}, },
{ {
name: 'about', path: '/mitt',
path: '/about', component: Bus
component: About
}, },
{ {
path: '/news', path: '/model',
redirect: '/about', // 重定向 component: Model
} },
{
path: '/attrs',
component: AttrsListeners
},
{
path: '/ref-parent',
component: RefChildrenParent
},
{
path: '/provide-inject',
component: ProvideInject
},
{
path: '/pinia',
component: Pinia
},
{
path: '/slot',
component: Slot
},
] ]
}) })
// 暴露出去 router
export default router

29
学习VUE/hello_vue3/src/store/lovetalk.ts
View File

@ -1,13 +1,22 @@
import { defineStore } from 'pinia'; import {defineStore} from 'pinia';
import {reactive} from 'vue'
export const useTalkStore = defineStore('talk', { // 选项式
state() { // export const useTalkStore = defineStore('talk', {
// 获取 localStorage 中的数据，并判断是否存在 // state() {
const storedTalkList = localStorage.getItem('talkList'); // // 获取 localStorage 中的数据，并判断是否存在
// const storedTalkList = localStorage.getItem('talkList');
//
// // 如果存储的 talkList 存在，则解析它，否则使用空数组
// return {
// talkList: storedTalkList ? JSON.parse(storedTalkList) : []
// };
// }
// });
// 如果存储的 talkList 存在，则解析它，否则使用空数组 // 组合式
return { export const useTalkStore = defineStore('talk', () => {
talkList: storedTalkList ? JSON.parse(storedTalkList) : [] const storedTalkList = localStorage.getItem('talkList');
}; const talkList = reactive(storedTalkList ? JSON.parse(storedTalkList) : [])
} return {talkList}
}); });

9
学习VUE/hello_vue3/笔记/store组合式写法.ts Normal file
View File

@ -0,0 +1,9 @@
import {defineStore} from 'pinia';
import {reactive} from 'vue'
// 组合式
export const useTalkStore = defineStore('talk', () => {
const storedTalkList = localStorage.getItem('talkList');
const talkList = reactive(storedTalkList ? JSON.parse(storedTalkList) : [])
return {talkList}
});