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
-
12712吴光慧学习笔记/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", |
|||
"lockfileHash": "e95c9a53", |
|||
"browserHash": "e8fe7240", |
|||
"lockfileHash": "0d539b07", |
|||
"browserHash": "2bc9fe4f", |
|||
"optimized": { |
|||
"vue": { |
|||
"src": "../../vue/dist/vue.runtime.esm-bundler.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 |
|||
} |
|||
}, |
|||
"chunks": {} |
|||
"chunks": { |
|||
"chunk-SFGEOVP2": { |
|||
"file": "chunk-SFGEOVP2.js" |
|||
} |
|||
} |
|||
} |
|||
12712
吴光慧学习笔记/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> |
|||
<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> |
|||
|
|||
<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> |
|||
|
|||
<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> |
|||
@ -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> |
|||
<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> |
|||
|
|||
<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 add(){ |
|||
sum.value+=1 |
|||
} |
|||
|
|||
//方法 |
|||
function changeName(){ |
|||
name = 'zhangsan' |
|||
} |
|||
function changeAge(){ |
|||
age += 1 |
|||
} |
|||
function showTel(){ |
|||
alert(tel) |
|||
} |
|||
return {name,age,changeName,changeAge,showTel} |
|||
} |
|||
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> |
|||
|
|||
<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> |
|||
@ -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' |
|||
|
|||
//引入createApp用于创建应用
|
|||
import { createApp } from 'vue' |
|||
//引入App组件
|
|||
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