From c8956bc0abb01222914414abc50121864ce21b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E4=B8=8A=E8=B4=B5=E7=8C=AA?= <290425385@qq.com>
Date: Tue, 29 Apr 2025 20:03:28 +0800
Subject: [PATCH] =?UTF-8?q?Vue2=20&=20Vue3=20=E4=B8=ADdata=20=E4=B8=8Esetu?=
 =?UTF-8?q?p=20=E6=95=B0=E6=8D=AE=E7=9A=84=E8=B0=83=E7=94=A8=E6=83=85?=
 =?UTF-8?q?=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml       | 78 +++++++++++++++++++++++++++++++++++----
 README.md                 | 35 +-----------------
 src/components/Person.vue | 61 +++++++++++++++---------------
 3 files changed, 101 insertions(+), 73 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index cdab2f9..e98c9c3 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,20 +1,41 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
   <component name="ChangeListManager">
-    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="" />
+    <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$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" 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="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="Vue Composition API Component" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="master" />
+      </map>
+    </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
-  "associatedIndex": 3
-}]]></component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 3
+}</component>
   <component name="ProjectId" id="2wOjf2pz32CUW5I0w9ht0hb3zbS" />
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true">
+    <ConfirmationsSetting value="2" id="Add" />
+  </component>
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
@@ -23,15 +44,20 @@
   "keyToString": {
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "RunOnceActivity.git.unshallow": "true",
-    "git-widget-placeholder": "master",
+    "git-widget-placeholder": "dev",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
     "node.js.selected.package.tslint": "(autodetect)",
     "nodejs_package_manager_path": "npm",
     "settings.editor.selected.configurable": "preferences.keymap",
-    "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/vue3_01_hello/node_modules/typescript/lib",
+    "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
     "vue.rearranger.settings.migration": "true"
+  },
+  "keyToStringList": {
+    "vue.recent.templates": [
+      "Vue Composition API Component"
+    ]
   }
 }]]></component>
   <component name="SharedIndexes">
@@ -49,11 +75,47 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1745919613888</updated>
-      <workItem from="1745919615396" duration="326000" />
+      <workItem from="1745919615396" duration="2730000" />
     </task>
+    <task id="LOCAL-00001" summary="新项目">
+      <option name="closed" value="true" />
+      <created>1745920284467</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1745920284467</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State>
+              <option name="FILTERS">
+                <map>
+                  <entry key="branch">
+                    <value>
+                      <list>
+                        <option value="dev" />
+                      </list>
+                    </value>
+                  </entry>
+                </map>
+              </option>
+            </State>
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="新项目" />
+    <option name="LAST_COMMIT_MESSAGE" value="新项目" />
+  </component>
 </project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 1c93191..d7bdb4b 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,2 @@
-# vue3_01_hello
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-pnpm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-pnpm dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-pnpm build
-```
+# vue3 学习库
+111
diff --git a/src/components/Person.vue b/src/components/Person.vue
index 8aee676..cfb7243 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -1,40 +1,39 @@
 <script  lang="ts">
-  export default {
-    name:'Person',
-    data(){
-      return{
-        name:'张三',
-        age:18,
-        tel: '13700009999'
-      }
-    },
-    methods:{
-      //展示电话
-      showTel(){
-        alert(this.tel)
-      },
-      //修改电话
-      setTel(){
-        this.tel = '137888888888'
-      },
-      //修改年龄
-      setAge(){
-        this.age += 1;
-      }
-
+export default {
+  name: 'Person',
+  data(){
+    return {
+      a: 'vue2 data 中的数据',
+      b: 0,
     }
-
-
+  },
+  // vue2 的方法 methods
+  methods:{
+    vue2Data(){
+      console.log(this.age + 1)
+    }
+  },
+  // 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}
   }
+}
+
+
 </script>
 
 <template>
   <main class="setBox">
-    <h1>姓名:{{name}}</h1>
-    <h1>年龄:{{age}}</h1>
-    <button @click="showTel">电话:{{name}}</button>
-    <button @click="setAge">年龄+1</button>
-    <button @click="setTel">电话修改</button>
+    <h1>setup 的 age:{{age}}</h1>
+    <!--<h1>姓名:{{name}}</h1>-->
+    <hr>
+    <button @click="vue2Data">这是从vue2 调动 vue3 setup的年龄 + 1</button>
   </main>
 </template>
 
@@ -45,6 +44,4 @@
   border-radius: 1.5rem;
   padding: 3rem;
 }
-
-
 </style>