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

Compare commits

base: ahxin:dev
Branches Tags
ahxin:dev
ahxin:learning
ahxin:list01
..
compare: ahxin:learning
Branches Tags
ahxin:dev
ahxin:learning
ahxin:list01

No commits in common. "dev" and "learning" have entirely different histories.
dev ... learning

7 changed files with 180 additions and 188 deletions
Show Stats Expand all files Collapse all files

162
.idea/workspace.xml generated
View File

@ -1,13 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="computed 计算属性，"> <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
</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" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@ -16,32 +10,30 @@
<component name="Git.Settings"> <component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component> </component>
<component name="ProjectColorInfo">{ <component name="ProjectColorInfo"><![CDATA[{
&quot;associatedIndex&quot;: 3 "associatedIndex": 3
}</component> }]]></component>
<component name="ProjectId" id="2wOjf2pz32CUW5I0w9ht0hb3zbS" /> <component name="ProjectId" id="2wOjf2pz32CUW5I0w9ht0hb3zbS" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true"> <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<ConfirmationsSetting value="2" id="Add" />
</component>
<component name="ProjectViewState"> <component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent">{ <component name="PropertiesComponent"><![CDATA[{
&quot;keyToString&quot;: { "keyToString": {
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;, "RunOnceActivity.ShowReadmeOnStart": "true",
&quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;, "RunOnceActivity.git.unshallow": "true",
&quot;git-widget-placeholder&quot;: &quot;dev&quot;, "git-widget-placeholder": "master",
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;, "node.js.detected.package.eslint": "true",
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;, "node.js.detected.package.tslint": "true",
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;, "node.js.selected.package.eslint": "(autodetect)",
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;, "node.js.selected.package.tslint": "(autodetect)",
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;, "nodejs_package_manager_path": "npm",
&quot;settings.editor.selected.configurable&quot;: &quot;preferences.keymap&quot;, "settings.editor.selected.configurable": "preferences.keymap",
&quot;ts.external.directory.path&quot;: &quot;/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib&quot;, "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/vue3_01_hello/node_modules/typescript/lib",
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot; "vue.rearranger.settings.migration": "true"
} }
}</component> }]]></component>
<component name="SharedIndexes"> <component name="SharedIndexes">
<attachedChunks> <attachedChunks>
<set> <set>
@ -58,126 +50,10 @@
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1745919613888</updated> <updated>1745919613888</updated>
<workItem from="1745919615396" duration="326000" /> <workItem from="1745919615396" duration="326000" />
<workItem from="1746189663982" duration="2970000" />
</task> </task>
<task id="LOCAL-00001" summary="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="closed" value="true" />
<created>1745928378301</created>
<option name="number" value="00001" />
<option name="presentableId" value="LOCAL-00001" />
<option name="project" value="LOCAL" />
<updated>1745928378301</updated>
</task>
<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>
<task id="LOCAL-00003" summary="ref 的简单实用">
<option name="closed" value="true" />
<created>1745930547660</created>
<option name="number" value="00003" />
<option name="presentableId" value="LOCAL-00003" />
<option name="project" value="LOCAL" />
<updated>1745930547660</updated>
</task>
<task id="LOCAL-00004" summary="ref 变量 和 reaction 对象的使用">
<option name="closed" value="true" />
<created>1745931199936</created>
<option name="number" value="00004" />
<option name="presentableId" value="LOCAL-00004" />
<option name="project" value="LOCAL" />
<updated>1745931199936</updated>
</task>
<task id="LOCAL-00005" summary="reaction 对象的使用 v-for">
<option name="closed" value="true" />
<created>1745932029058</created>
<option name="number" value="00005" />
<option name="presentableId" value="LOCAL-00005" />
<option name="project" value="LOCAL" />
<updated>1745932029058</updated>
</task>
<task id="LOCAL-00006" summary="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
<option name="closed" value="true" />
<created>1745934177134</created>
<option name="number" value="00006" />
<option name="presentableId" value="LOCAL-00006" />
<option name="project" value="LOCAL" />
<updated>1745934177134</updated>
</task>
<task id="LOCAL-00007" summary="ref、修改对象传入更新数据问题">
<option name="closed" value="true" />
<created>1745934687739</created>
<option name="number" value="00007" />
<option name="presentableId" value="LOCAL-00007" />
<option name="project" value="LOCAL" />
<updated>1745934687740</updated>
</task>
<task id="LOCAL-00008" summary="defineProps，实现简单的父传子">
<option name="closed" value="true" />
<created>1746189895108</created>
<option name="number" value="00008" />
<option name="presentableId" value="LOCAL-00008" />
<option name="project" value="LOCAL" />
<updated>1746189895108</updated>
</task>
<task id="LOCAL-00009" summary="使用 toRefs 让数据变为响应式的">
<option name="closed" value="true" />
<created>1746190968763</created>
<option name="number" value="00009" />
<option name="presentableId" value="LOCAL-00009" />
<option name="project" value="LOCAL" />
<updated>1746190968763</updated>
</task>
<task id="LOCAL-00010" summary="使用 toRef 一次只能取一次数据">
<option name="closed" value="true" />
<created>1746191210625</created>
<option name="number" value="00010" />
<option name="presentableId" value="LOCAL-00010" />
<option name="project" value="LOCAL" />
<updated>1746191210625</updated>
</task>
<task id="LOCAL-00011" summary="computed 计算属性，">
<option name="closed" value="true" />
<created>1746192333201</created>
<option name="number" value="00011" />
<option name="presentableId" value="LOCAL-00011" />
<option name="project" value="LOCAL" />
<updated>1746192333201</updated>
</task>
<option name="localTasksCounter" value="12" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" /> <option name="version" value="3" />
</component> </component>
<component name="Vcs.Log.Tabs.Properties">
<option name="TAB_STATES">
<map>
<entry key="MAIN">
<value>
<State />
</value>
</entry>
</map>
</option>
</component>
<component name="VcsManagerConfiguration">
<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="setup 的新写法" />
<MESSAGE value="ref 的简单实用" />
<MESSAGE value="ref 变量 和 reaction 对象的使用" />
<MESSAGE value="reaction 对象的使用 v-for" />
<MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
<MESSAGE value="ref、修改对象传入更新数据问题" />
<MESSAGE value="defineProps，实现简单的父传子" />
<MESSAGE value="使用 toRefs 让数据变为响应式的" />
<MESSAGE value="使用 toRef 一次只能取一次数据" />
<MESSAGE value="computed 计算属性，" />
<option name="LAST_COMMIT_MESSAGE" value="computed 计算属性，" />
</component>
</project> </project>

6
src/App.vue
View File

@ -3,8 +3,12 @@ import Person from "@/components/Person.vue";
</script> </script>
<template> <template>
<header>
</header>
<main> <main>
<Person/> <Person />
</main> </main>
</template> </template>

86
src/assets/base.css
View File

@ -0,0 +1,86 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

1
src/assets/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

40
src/assets/main.css
View File

@ -1,9 +1,35 @@
/*@import './base.css';*/ @import './base.css';
*,
*::before, #app {
*::after { max-width: 1280px;
box-sizing: border-box; margin: 0 auto;
margin: 0; padding: 2rem;
padding: 0;
font-weight: normal; font-weight: normal;
} }
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

71
src/components/Person.vue
View File

@ -1,48 +1,47 @@
<script setup lang="ts"> <script lang="ts">
import {ref,computed} from "vue"; export default {
name: 'Person',
let firstName = ref('zhang') data(){
let listName =ref('san') return {
a: 'vue2 data 中的数据',
// 计算属性有缓存 b: 0,
let myName = computed({ }
//return firstName.value + listName.value },
get(){ // vue2 的方法 methods
return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + listName.value methods:{
}, vue2Data(){
set(setName){ console.log(this.age + 1)
const [val1 = '',val2 = ''] = setName.split('-') }
firstName.value = val1 },
listName.value = val2 // setup vue3 新语法
setup(){
let age = 18
//会报错 因为setup 比data 还要在前面 所以无法在此使用 data 中的数据，报错内容：
// Uncaught (in promise) Error: A listener indicated an asynchronous
// response by returning true, but the message channel closed before
// a response was received
//let x = this.a
return {age}
} }
})
function changeName(){
myName.value = 'li-si'
} }
</script> </script>
<template> <template>
<main class="person"> <main class="setBox">
姓：<input type="text" v-model:="firstName"> <h1>setup 的 age:{{age}}</h1>
名：<input type="text" v-model:="listName"> <!--<h1>姓名:{{name}}</h1>-->
<hr>
<button @click="vue2Data">这是从vue2 调动 vue3 setup的年龄 + 1</button>
</main> </main>
<h1>姓名：{{myName}}</h1>
<button @click="changeName">改名</button>
</template> </template>
<style scoped> <style scoped>
button { .setBox {
margin: 0 1rem; width: 100%;
} background-color: palegreen;
.person { border-radius: 1.5rem;
font-size: 2rem; padding: 3rem;
line-height: 2rem;
input{
height: 2rem;
}
} }
</style> </style>

2
vite.config.ts
View File

@ -8,7 +8,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
vueDevTools(), //vueDevTools(),
], ],
resolve: { resolve: {
alias: { alias: {