ahxin/Vue3-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

ref 的简单实用

Browse Source
This commit is contained in:
云上贵猪 2025-04-29 20:42:26 +08:00
parent 3af4711dfb
commit 1afc441a09
2 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.idea/workspace.xml generated
View File

@ -4,13 +4,9 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue"> <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="setup 的新写法">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/base.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/base.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/logo.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/vite.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/vite.config.ts" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -71,7 +67,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1745928378301</updated> <updated>1745928378301</updated>
</task> </task>
<option name="localTasksCounter" value="2" /> <task id="LOCAL-00002" summary="setup 的新写法">
<option name="closed" value="true" />
<created>1745930176285</created>
<option name="number" value="00002" />
<option name="presentableId" value="LOCAL-00002" />
<option name="project" value="LOCAL" />
<updated>1745930176285</updated>
</task>
<option name="localTasksCounter" value="3" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -80,6 +84,7 @@
<component name="VcsManagerConfiguration"> <component name="VcsManagerConfiguration">
<MESSAGE value="Vue2 &amp; Vue3 中data 与setup 数据的调用情况" /> <MESSAGE value="Vue2 &amp; Vue3 中data 与setup 数据的调用情况" />
<MESSAGE value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue" /> <MESSAGE value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue" />
<option name="LAST_COMMIT_MESSAGE" value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue" /> <MESSAGE value="setup 的新写法" />
<option name="LAST_COMMIT_MESSAGE" value="setup 的新写法" />
</component> </component>
</project> </project>

33
src/components/Person.vue
View File

@ -1,23 +1,32 @@
<script lang="ts">
export default {
name:'Person',
setup(){
let axxxx: string = '原始写法';
return { axxxx }
}
}
</script>
<script setup lang="ts"> <script setup lang="ts">
import {ref} from "vue";
let age = ref(18);
let name = ref('张三');
const address = ref('广东广州天河...')
function changeName(){
name.value = '李四'
}
function AgeADD(){
age.value +=1
}
let axxxx:string = '新泻法'; let axxxx:string = '新泻法';
</script> </script>
<template> <template>
<main> <main>
<h1>{{axxxx}}</h1> <h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<h1>地址：{{address}}</h1>
<button @click="changeName">修改名字</button>
<button @click="AgeADD">年龄 +1</button>
</main> </main>
</template> </template>
<style scoped> <style scoped>
button {
margin: 0 1.5rem;
}
</style> </style>