wuguanghui
3 weeks ago
31 changed files with 1353 additions and 12786 deletions
-
3.vscode/settings.json
-
7吴光慧学习笔记/11.1/study/node_modules/.vue-global-types/vue_3.5_0.d.ts
-
7吴光慧学习笔记/11.1/study/node_modules/.vue-global-types/vue_99_0.d.ts
-
BIN吴光慧学习笔记/11.4/11.4学习总结-吴光慧.docx
-
59吴光慧学习笔记/11.4/props.txt
-
73吴光慧学习笔记/11.4/test1.txt
-
48吴光慧学习笔记/11.4/test2.txt
-
46吴光慧学习笔记/11.4/生命周期.txt
-
300吴光慧学习笔记/hello_vue3/node_modules/.package-lock.json
-
20吴光慧学习笔记/hello_vue3/node_modules/.vite/deps/_metadata.json
-
12708吴光慧学习笔记/hello_vue3/node_modules/.vite/deps/vue.js
-
8吴光慧学习笔记/hello_vue3/node_modules/.vite/deps/vue.js.map
-
7吴光慧学习笔记/hello_vue3/node_modules/.vue-global-types/vue_3.5_0.d.ts
-
7吴光慧学习笔记/hello_vue3/node_modules/.vue-global-types/vue_99_0.d.ts
-
304吴光慧学习笔记/hello_vue3/package-lock.json
-
4吴光慧学习笔记/hello_vue3/package.json
-
73吴光慧学习笔记/hello_vue3/src/App.vue
-
30吴光慧学习笔记/hello_vue3/src/components/About.vue
-
21吴光慧学习笔记/hello_vue3/src/components/Home.vue
-
34吴光慧学习笔记/hello_vue3/src/components/News.vue
-
75吴光慧学习笔记/hello_vue3/src/components/Person.vue
-
43吴光慧学习笔记/hello_vue3/src/components/Person1.vue
-
33吴光慧学习笔记/hello_vue3/src/components/Person2.vue
-
95吴光慧学习笔记/hello_vue3/src/components/TheWelcome.vue
-
39吴光慧学习笔记/hello_vue3/src/components/hooks.vue
-
28吴光慧学习笔记/hello_vue3/src/hooks/useDog.ts
-
18吴光慧学习笔记/hello_vue3/src/hooks/useSum.ts
-
10吴光慧学习笔记/hello_vue3/src/main.ts
-
23吴光慧学习笔记/hello_vue3/src/router/index.ts
-
10吴光慧学习笔记/hello_vue3/src/types/index.ts
-
2吴光慧学习笔记/hello_vue3/tsconfig.app.json
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"Codegeex.RepoIndex": true |
||||
|
} |
||||
@ -0,0 +1,59 @@ |
|||||
|
App.vue |
||||
|
<template> |
||||
|
<Person :list="persons"/> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="App"> |
||||
|
import Person from './components/Person2.vue' |
||||
|
import {reactive} from 'vue' |
||||
|
import {type Persons} from '@/types' |
||||
|
|
||||
|
let persons = reactive<Persons>([ |
||||
|
{id:'e98219e12',name:'张三',age:18}, |
||||
|
{id:'e98219e13',name:'李四',age:19}, |
||||
|
{id:'e98219e14',name:'王五',age:20} |
||||
|
]) |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
Perspon.vue |
||||
|
<template> |
||||
|
<div class="person"> |
||||
|
<ul> |
||||
|
<li v-for="item in list" :key="item.id"> |
||||
|
{{item.name}}--{{item.age}} |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="Person"> |
||||
|
import {defineProps,withDefaults} from 'vue' |
||||
|
import {type PersonInter} from '@/types' |
||||
|
|
||||
|
// 第一种写法：仅接收 |
||||
|
// const props = defineProps(['list']) |
||||
|
|
||||
|
// 第二种写法：接收+限制类型 |
||||
|
// defineProps<{list:Persons}>() |
||||
|
|
||||
|
// 第三种写法：接收+限制类型+指定默认值+限制必要性 |
||||
|
let props = withDefaults(defineProps<{list?:PersonInter[]}>(),{ |
||||
|
list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}] |
||||
|
}) |
||||
|
|
||||
|
//接收list，同时将props保存起来 |
||||
|
// let x = defineProps<{list:Persons}>() |
||||
|
console.log(props) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.person{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
background-color: red; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,73 @@ |
|||||
|
watch |
||||
|
监视`ref`定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】 |
||||
|
若想监视对象内部的数据，要手动开启深度监视。 |
||||
|
|
||||
|
注意： |
||||
|
* 若修改的是`ref`定义的对象中的属性，`newValue` 和 `oldValue` 都是新值，因为它们是同一个对象。 |
||||
|
* 若修改整个`ref`定义的对象，`newValue` 是新值， `oldValue` 是旧值，因为不是同一个对象了。 |
||||
|
/* |
||||
|
监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视 |
||||
|
watch的第一个参数是：被监视的数据 |
||||
|
watch的第二个参数是：监视的回调 |
||||
|
watch的第三个参数是：配置对象（deep、immediate等等.....） |
||||
|
*/ |
||||
|
watch(person,(newValue,oldValue)=>{ |
||||
|
console.log('person变化了',newValue,oldValue) |
||||
|
},{deep:true}) |
||||
|
如果加immediate:true，则初始化时就会立即执行一次回调函数 |
||||
|
|
||||
|
|
||||
|
<template> |
||||
|
<div class="person"> |
||||
|
<h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1> |
||||
|
<h2>姓名：{{ person.name }}</h2> |
||||
|
<h2>年龄：{{ person.age }}</h2> |
||||
|
<h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2> |
||||
|
<button @click="changeName">修改名字</button> |
||||
|
<button @click="changeAge">修改年龄</button> |
||||
|
<button @click="changeC1">修改第一台车</button> |
||||
|
<button @click="changeC2">修改第二台车</button> |
||||
|
<button @click="changeCar">修改整个车</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="Person"> |
||||
|
import {reactive,watch} from 'vue' |
||||
|
|
||||
|
// 数据 |
||||
|
let person = reactive({ |
||||
|
name:'张三', |
||||
|
age:18, |
||||
|
car:{ |
||||
|
c1:'奔驰', |
||||
|
c2:'宝马' |
||||
|
} |
||||
|
}) |
||||
|
// 方法 |
||||
|
function changeName(){ |
||||
|
person.name += '~' |
||||
|
} |
||||
|
function changeAge(){ |
||||
|
person.age += 1 |
||||
|
} |
||||
|
function changeC1(){ |
||||
|
person.car.c1 = '奥迪' |
||||
|
} |
||||
|
function changeC2(){ |
||||
|
person.car.c2 = '大众' |
||||
|
} |
||||
|
function changeCar(){ |
||||
|
person.car = {c1:'雅迪',c2:'爱玛'} |
||||
|
} |
||||
|
|
||||
|
// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式 |
||||
|
/* watch(()=> person.name,(newValue,oldValue)=>{ |
||||
|
console.log('person.name变化了',newValue,oldValue) |
||||
|
}) */ |
||||
|
|
||||
|
// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数 |
||||
|
watch(()=>person.car,(newValue,oldValue)=>{ |
||||
|
console.log('person.car变化了',newValue,oldValue) |
||||
|
},{deep:true}) |
||||
|
</script> |
||||
|
|
||||
@ -0,0 +1,48 @@ |
|||||
|
<template> |
||||
|
<div class="person"> |
||||
|
<h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1> |
||||
|
<h2 id="demo">水温：{{temp}}</h2> |
||||
|
<h2>水位：{{height}}</h2> |
||||
|
<button @click="changePrice">水温+1</button> |
||||
|
<button @click="changeSum">水位+10</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="Person"> |
||||
|
import {ref,watch,watchEffect} from 'vue' |
||||
|
// 数据 |
||||
|
let temp = ref(0) |
||||
|
let height = ref(0) |
||||
|
|
||||
|
// 方法 |
||||
|
function changePrice(){ |
||||
|
temp.value += 10 |
||||
|
} |
||||
|
function changeSum(){ |
||||
|
height.value += 1 |
||||
|
} |
||||
|
|
||||
|
// 用watch实现，需要明确的指出要监视：temp、height |
||||
|
watch([temp,height],(value)=>{ |
||||
|
// 从value中获取最新的temp值、height值 |
||||
|
const [newTemp,newHeight] = value |
||||
|
// 室温达到50℃，或水位达到20cm，立刻联系服务器 |
||||
|
if(newTemp >= 50 || newHeight >= 20){ |
||||
|
console.log('联系服务器') |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 用watchEffect实现，不用 |
||||
|
const stopWtach = watchEffect(()=>{ |
||||
|
// 室温达到50℃，或水位达到20cm，立刻联系服务器 |
||||
|
if(temp.value >= 50 || height.value >= 20){ |
||||
|
console.log(document.getElementById('demo')?.innerText) |
||||
|
console.log('联系服务器') |
||||
|
} |
||||
|
// 水温达到100，或水位达到50，取消监视 |
||||
|
if(temp.value === 100 || height.value === 50){ |
||||
|
console.log('清理了') |
||||
|
stopWtach() |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,46 @@ |
|||||
|
<template> |
||||
|
<div class="person"> |
||||
|
<h2>当前求和为：{{ sum }}</h2> |
||||
|
<button @click="changeSum">点我sum+1</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<!-- vue3写法 --> |
||||
|
<script lang="ts" setup name="Person"> |
||||
|
import { |
||||
|
ref, |
||||
|
onBeforeMount, |
||||
|
onMounted, |
||||
|
onBeforeUpdate, |
||||
|
onUpdated, |
||||
|
onBeforeUnmount, |
||||
|
onUnmounted |
||||
|
} from 'vue' |
||||
|
|
||||
|
// 数据 |
||||
|
let sum = ref(0) |
||||
|
// 方法 |
||||
|
function changeSum() { |
||||
|
sum.value += 1 |
||||
|
} |
||||
|
console.log('setup') |
||||
|
// 生命周期钩子 |
||||
|
onBeforeMount(()=>{ |
||||
|
console.log('挂载之前') |
||||
|
}) |
||||
|
onMounted(()=>{ |
||||
|
console.log('挂载完毕') |
||||
|
}) |
||||
|
onBeforeUpdate(()=>{ |
||||
|
console.log('更新之前') |
||||
|
}) |
||||
|
onUpdated(()=>{ |
||||
|
console.log('更新完毕') |
||||
|
}) |
||||
|
onBeforeUnmount(()=>{ |
||||
|
console.log('卸载之前') |
||||
|
}) |
||||
|
onUnmounted(()=>{ |
||||
|
console.log('卸载完毕') |
||||
|
}) |
||||
|
</script> |
||||
@ -1,15 +1,25 @@ |
|||||
{ |
{ |
||||
"hash": "5514453b", |
|
||||
|
"hash": "547bafd9", |
||||
"configHash": "e5b55508", |
"configHash": "e5b55508", |
||||
"lockfileHash": "e95c9a53", |
|
||||
"browserHash": "e8fe7240", |
|
||||
|
"lockfileHash": "0d539b07", |
||||
|
"browserHash": "2bc9fe4f", |
||||
"optimized": { |
"optimized": { |
||||
"vue": { |
"vue": { |
||||
"src": "../../vue/dist/vue.runtime.esm-bundler.js", |
"src": "../../vue/dist/vue.runtime.esm-bundler.js", |
||||
"file": "vue.js", |
"file": "vue.js", |
||||
"fileHash": "a137d1c9", |
|
||||
|
"fileHash": "5b2b4475", |
||||
|
"needsInterop": false |
||||
|
}, |
||||
|
"vue-router": { |
||||
|
"src": "../../vue-router/dist/vue-router.mjs", |
||||
|
"file": "vue-router.js", |
||||
|
"fileHash": "832988d5", |
||||
"needsInterop": false |
"needsInterop": false |
||||
} |
} |
||||
}, |
}, |
||||
"chunks": {} |
|
||||
|
"chunks": { |
||||
|
"chunk-SFGEOVP2": { |
||||
|
"file": "chunk-SFGEOVP2.js" |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
12708
吴光慧学习笔记/hello_vue3/node_modules/.vite/deps/vue.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
8
吴光慧学习笔记/hello_vue3/node_modules/.vite/deps/vue.js.map
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,18 +1,69 @@ |
|||||
<template> |
<template> |
||||
<Person/> |
|
||||
<Person1/> |
|
||||
<Person2/> |
|
||||
|
<div class="app"> |
||||
|
<h2 class="title">Vue路由测试</h2> |
||||
|
<!-- 导航区 --> |
||||
|
<div class="navigate"> |
||||
|
<RouterLink to="/home" active-class="active">首页</RouterLink> |
||||
|
<RouterLink to="/news" active-class="active">新闻</RouterLink> |
||||
|
<RouterLink to="/about" active-class="active">关于</RouterLink> |
||||
|
</div> |
||||
|
<!-- 展示区 --> |
||||
|
<div class="main-content"> |
||||
|
<RouterView></RouterView> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts"> |
|
||||
import Person from './components/Person.vue' |
|
||||
import Person1 from './components/Person1.vue' |
|
||||
import Person2 from './components/Person2.vue' |
|
||||
export default { |
|
||||
name:'App', //组件名 |
|
||||
components:{Person,Person1,Person2} //注册组件 |
|
||||
} |
|
||||
|
<script lang="ts" setup name="App"> |
||||
|
import { RouterLink, RouterView } from 'vue-router' |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
|
/* 全局样式重置（可选） */ |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* 页面容器 */ |
||||
|
.app { |
||||
|
width: 800px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
/* 标题样式 */ |
||||
|
.title { |
||||
|
background-color: #888; |
||||
|
color: #fff; |
||||
|
padding: 10px 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/* 导航区样式 */ |
||||
|
.navigate { |
||||
|
display: flex; |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
|
||||
|
.navigate a { |
||||
|
padding: 6px 12px; |
||||
|
border-radius: 4px; |
||||
|
text-decoration: none; |
||||
|
margin-right: 10px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* 激活态样式 */ |
||||
|
.navigate a.active { |
||||
|
background-color: #6a994e; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* 内容展示区样式 */ |
||||
|
.main-content { |
||||
|
border: 1px solid #ccc; |
||||
|
min-height: 300px; |
||||
|
padding: 10px; |
||||
|
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,30 @@ |
|||||
|
<template> |
||||
|
<div class="about"> |
||||
|
<h2>关于我们</h2> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="About"> |
||||
|
import { onMounted,onUnmounted } from 'vue' |
||||
|
|
||||
|
onMounted(()=>{ |
||||
|
console.log('about mounted') |
||||
|
}) |
||||
|
|
||||
|
onUnmounted(()=>{ |
||||
|
console.log('about unmounted') |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.about{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 100vh; |
||||
|
color:rgb(85,84,84); |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<div class="home"> |
||||
|
<img src="" alt=""></img> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="Home"> |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.home{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 100vh; |
||||
|
background-color: #f5f5f5; |
||||
|
color: #333; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,34 @@ |
|||||
|
<template> |
||||
|
<div class="news"> |
||||
|
<ul> |
||||
|
<li><a href="#">新闻1</a></li> |
||||
|
<li><a href="#">新闻2</a></li> |
||||
|
<li><a href="#">新闻3</a></li> |
||||
|
<li><a href="#">新闻4</a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="News"> |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.news { |
||||
|
padding: 0 20px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 100px; |
||||
|
} |
||||
|
.news ul { |
||||
|
margin-top: 30px; |
||||
|
list-style: none; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.news li>a{ |
||||
|
text-decoration: none; |
||||
|
color: #000; |
||||
|
} |
||||
|
</style> |
||||
@ -1,47 +1,48 @@ |
|||||
<template> |
<template> |
||||
<div class="person"> |
|
||||
<h2>姓名：{{name}}</h2> |
|
||||
<h2>年龄：{{age}}</h2> |
|
||||
<button @click="changeName">修改名字</button> |
|
||||
<button @click="changeAge">年龄+1</button> |
|
||||
<button @click="showTel">点我查看联系方式</button> |
|
||||
</div> |
|
||||
|
<div class="person"> |
||||
|
<h2>当前求和为：{{sum}}</h2> |
||||
|
<button @click="add">点我sum+1</button> |
||||
|
|
||||
|
<br> |
||||
|
<img v-for="(dog,index) in dogList" :src="dog" :key="index" > |
||||
|
<button @click="getDog">再来一只狗</button> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts"> |
|
||||
export default { |
|
||||
name:'Person', |
|
||||
setup(){ |
|
||||
//setup函数中的this是undefined |
|
||||
//数据，原来是写在data中的，此时的name age tel都不是响应式的 |
|
||||
let name = "张三" |
|
||||
let age = 18 |
|
||||
let tel = '13888888' |
|
||||
|
<script lang="ts" setup name="Person"> |
||||
|
import { ref,reactive } from 'vue'; |
||||
|
import axios from 'axios'; |
||||
|
|
||||
|
//数据 |
||||
|
let sum = ref(0) |
||||
|
let dogList = reactive([ |
||||
|
'https://images.dog.ceo/breeds/pembroke/n02113023_4269.jpg' |
||||
|
]) |
||||
|
|
||||
//方法 |
|
||||
function changeName(){ |
|
||||
name = 'zhangsan' |
|
||||
} |
|
||||
function changeAge(){ |
|
||||
age += 1 |
|
||||
} |
|
||||
function showTel(){ |
|
||||
alert(tel) |
|
||||
} |
|
||||
return {name,age,changeName,changeAge,showTel} |
|
||||
} |
|
||||
|
|
||||
|
//方法 |
||||
|
function add(){ |
||||
|
sum.value+=1 |
||||
|
} |
||||
|
|
||||
|
async function getDog(){ |
||||
|
try{ |
||||
|
let result = await axios.get('https://dog.ceo/api/breeds/image/random') |
||||
|
dogList.push(result.data.message) |
||||
|
}catch(error){ |
||||
|
alert(error) |
||||
} |
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
.person{ |
|
||||
background-color: aquamarine; |
|
||||
box-shadow: 0 0 10px; |
|
||||
border-radius: 10px; |
|
||||
padding: 20px; |
|
||||
} |
|
||||
button{ |
|
||||
margin: 0 5px; |
|
||||
} |
|
||||
|
.person{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
background-color: palegoldenrod; |
||||
|
} |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
</style> |
</style> |
||||
@ -1,43 +0,0 @@ |
|||||
<template> |
|
||||
<div class="person"> |
|
||||
<h2>姓名：{{name}}</h2> |
|
||||
<h2>年龄：{{age}}</h2> |
|
||||
<button @click="changeName">修改名字</button> |
|
||||
<button @click="changeAge">年龄+1</button> |
|
||||
<button @click="showTel">点我查看联系方式</button> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup name="Person1"> |
|
||||
import {ref} from 'vue'//ref定义基本类型数据 |
|
||||
//reative定义对象类型数据 |
|
||||
|
|
||||
let name = ref("张三") |
|
||||
let age = ref(18) |
|
||||
let tel = '13888888' |
|
||||
|
|
||||
|
|
||||
//方法 |
|
||||
function changeName(){ |
|
||||
name.value = 'zhangsan' |
|
||||
} |
|
||||
function changeAge(){ |
|
||||
age.value += 1 |
|
||||
} |
|
||||
function showTel(){ |
|
||||
alert(tel) |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.person{ |
|
||||
background-color: aquamarine; |
|
||||
box-shadow: 0 0 10px; |
|
||||
border-radius: 10px; |
|
||||
padding: 20px; |
|
||||
} |
|
||||
button{ |
|
||||
margin: 0 5px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,33 +0,0 @@ |
|||||
<template> |
|
||||
<div class="person"> |
|
||||
<h1>情况一：监视【ref】定义的【基本类型】数据</h1> |
|
||||
<h2>当前求和为：{{sum}}</h2> |
|
||||
<button @click="changeSum">点我sum+1</button> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup name="Person"> |
|
||||
import {ref,watch} from 'vue' |
|
||||
// 数据 |
|
||||
let sum = ref(0) |
|
||||
// 方法 |
|
||||
function changeSum(){ |
|
||||
sum.value += 1 |
|
||||
} |
|
||||
// 监视，情况一：监视【ref】定义的【基本类型】数据 |
|
||||
const stopWatch = watch(sum,(newValue,oldValue)=>{ |
|
||||
console.log('sum变化了',newValue,oldValue) |
|
||||
if(newValue >= 10){ |
|
||||
stopWatch() |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.person{ |
|
||||
background-color: aquamarine; |
|
||||
box-shadow: 0 0 10px; |
|
||||
border-radius: 10px; |
|
||||
padding: 20px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,95 +0,0 @@ |
|||||
<script setup lang="ts"> |
|
||||
import WelcomeItem from './WelcomeItem.vue' |
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue' |
|
||||
import ToolingIcon from './icons/IconTooling.vue' |
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue' |
|
||||
import CommunityIcon from './icons/IconCommunity.vue' |
|
||||
import SupportIcon from './icons/IconSupport.vue' |
|
||||
|
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md') |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<WelcomeItem> |
|
||||
<template #icon> |
|
||||
<DocumentationIcon /> |
|
||||
</template> |
|
||||
<template #heading>Documentation</template> |
|
||||
|
|
||||
Vue’s |
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a> |
|
||||
provides you with all information you need to get started. |
|
||||
</WelcomeItem> |
|
||||
|
|
||||
<WelcomeItem> |
|
||||
<template #icon> |
|
||||
<ToolingIcon /> |
|
||||
</template> |
|
||||
<template #heading>Tooling</template> |
|
||||
|
|
||||
This project is served and bundled with |
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The |
|
||||
recommended IDE setup is |
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> |
|
||||
+ |
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener" |
|
||||
>Vue - Official</a |
|
||||
>. If you need to test your components and web pages, check out |
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a> |
|
||||
and |
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> |
|
||||
/ |
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>. |
|
||||
|
|
||||
<br /> |
|
||||
|
|
||||
More instructions are available in |
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a |
|
||||
>. |
|
||||
</WelcomeItem> |
|
||||
|
|
||||
<WelcomeItem> |
|
||||
<template #icon> |
|
||||
<EcosystemIcon /> |
|
||||
</template> |
|
||||
<template #heading>Ecosystem</template> |
|
||||
|
|
||||
Get official tools and libraries for your project: |
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>, |
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>, |
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and |
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If |
|
||||
you need more resources, we suggest paying |
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a> |
|
||||
a visit. |
|
||||
</WelcomeItem> |
|
||||
|
|
||||
<WelcomeItem> |
|
||||
<template #icon> |
|
||||
<CommunityIcon /> |
|
||||
</template> |
|
||||
<template #heading>Community</template> |
|
||||
|
|
||||
Got stuck? Ask your question on |
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a> |
|
||||
(our official Discord server), or |
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener" |
|
||||
>StackOverflow</a |
|
||||
>. You should also follow the official |
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a> |
|
||||
Bluesky account or the |
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a> |
|
||||
X account for latest news in the Vue world. |
|
||||
</WelcomeItem> |
|
||||
|
|
||||
<WelcomeItem> |
|
||||
<template #icon> |
|
||||
<SupportIcon /> |
|
||||
</template> |
|
||||
<template #heading>Support Vue</template> |
|
||||
|
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help |
|
||||
us by |
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>. |
|
||||
</WelcomeItem> |
|
||||
</template> |
|
||||
@ -0,0 +1,39 @@ |
|||||
|
<template> |
||||
|
<div class="person"> |
||||
|
<h2>当前求和为：{{sum}}</h2> |
||||
|
<button @click="increment">点我+1</button> |
||||
|
<button @click="decrement">点我-1</button> |
||||
|
|
||||
|
<br> |
||||
|
<img v-for="(dog,index) in dogList" :src="dog" :key="index" > |
||||
|
<button @click="getDog">再来一只狗</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import {defineComponent} from 'vue' |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name:'App', |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import useSum from '@/hooks/useSum' |
||||
|
import useDog from '@/hooks/useDog' |
||||
|
|
||||
|
let {sum,increment,decrement} = useSum() |
||||
|
let {dogList,getDog} = useDog() |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.person{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
background-color: palegoldenrod; |
||||
|
} |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
import {reactive,onMounted} from 'vue' |
||||
|
import axios,{AxiosError} from 'axios' |
||||
|
|
||||
|
export default function(){ |
||||
|
let dogList = reactive<string[]>([]) |
||||
|
|
||||
|
// 方法
|
||||
|
async function getDog(){ |
||||
|
try { |
||||
|
// 发请求
|
||||
|
let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random') |
||||
|
// 维护数据
|
||||
|
dogList.push(data.message) |
||||
|
} catch (error) { |
||||
|
// 处理错误
|
||||
|
const err = <AxiosError>error |
||||
|
console.log(err.message) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 挂载钩子
|
||||
|
onMounted(()=>{ |
||||
|
getDog() |
||||
|
}) |
||||
|
|
||||
|
//向外部暴露数据
|
||||
|
return {dogList,getDog} |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
import {ref,onMounted} from 'vue' |
||||
|
|
||||
|
export default function(){ |
||||
|
let sum = ref(0) |
||||
|
|
||||
|
const increment = ()=>{ |
||||
|
sum.value += 1 |
||||
|
} |
||||
|
const decrement = ()=>{ |
||||
|
sum.value -= 1 |
||||
|
} |
||||
|
onMounted(()=>{ |
||||
|
increment() |
||||
|
}) |
||||
|
|
||||
|
//向外部暴露数据
|
||||
|
return {sum,increment,decrement} |
||||
|
} |
||||
@ -1,6 +1,12 @@ |
|||||
import './assets/main.css' |
import './assets/main.css' |
||||
|
|
||||
|
//引入createApp用于创建应用
|
||||
import { createApp } from 'vue' |
import { createApp } from 'vue' |
||||
|
//引入App组件
|
||||
import App from './App.vue' |
import App from './App.vue' |
||||
|
//引入router
|
||||
|
import router from './router' |
||||
|
|
||||
|
const app = createApp(App) |
||||
|
app.use(router) |
||||
|
|
||||
createApp(App).mount('#app') |
|
||||
|
app.mount('#app') |
||||
@ -0,0 +1,23 @@ |
|||||
|
import {createRouter,createWebHistory} from 'vue-router' |
||||
|
import Home from '@/components/Home.vue' |
||||
|
import News from '@/components/News.vue' |
||||
|
import About from '@/components/About.vue' |
||||
|
|
||||
|
const router = createRouter({ |
||||
|
history:createWebHistory(), |
||||
|
routes:[ |
||||
|
{ |
||||
|
path:'/home', |
||||
|
component:Home |
||||
|
}, |
||||
|
{ |
||||
|
path:'/news', |
||||
|
component:News |
||||
|
}, |
||||
|
{ |
||||
|
path:'/about', |
||||
|
component:About |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export default router |
||||
@ -0,0 +1,10 @@ |
|||||
|
//定义一个接口，用于限制person对象的具体属性
|
||||
|
export interface PersonInter { |
||||
|
id:string, |
||||
|
name:string, |
||||
|
age:number |
||||
|
} |
||||
|
|
||||
|
//一个自定义类型
|
||||
|
export type Persons = Array<PersonInter> |
||||
|
//export type Persons = PersonInter[]
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue