vue3

vue3/晚课/my_project/package-lock.json

@@ -8,6 +8,7 @@
       "name": "my_project",
       "version": "0.0.0",
       "dependencies": {
+        "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.4.21"
       },
       "devDependencies": {
@@ -39,7 +40,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -55,7 +55,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -71,7 +70,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -87,7 +85,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -103,7 +100,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -119,7 +115,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -135,7 +130,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -151,7 +145,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -167,7 +160,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -183,7 +175,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -199,7 +190,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -215,7 +205,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -231,7 +220,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -247,7 +235,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -263,7 +250,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -279,7 +265,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -295,7 +280,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -311,7 +295,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -327,7 +310,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -343,7 +325,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -359,7 +340,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -375,7 +355,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -391,7 +370,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -412,7 +390,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -425,7 +402,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -438,7 +414,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -451,7 +426,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -464,7 +438,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -477,7 +450,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -490,7 +462,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -503,7 +474,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -516,7 +486,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -529,7 +498,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -542,7 +510,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -555,7 +522,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -568,7 +534,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -581,7 +546,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -594,7 +558,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -607,7 +570,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -622,14 +584,13 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/node": {
       "version": "20.12.12",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.12.12.tgz",
       "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -867,7 +828,6 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.20.2.tgz",
       "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -910,7 +870,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -1109,7 +1068,6 @@
       "version": "4.17.2",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.17.2.tgz",
       "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -1190,6 +1148,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
+    },
     "node_modules/typescript": {
       "version": "5.4.5",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.4.5.tgz",
@@ -1207,13 +1171,12 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/vite": {
       "version": "5.2.11",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-5.2.11.tgz",
       "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
@@ -1264,6 +1227,26 @@
         }
       }
     },
+    "node_modules/vite-plugin-vue-setup-extend": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
+      "integrity": "sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.2.29",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/vite-plugin-vue-setup-extend/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.27",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.4.27.tgz",

vue3/晚课/my_project/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.4.21"
   },
   "devDependencies": {

vue3/晚课/my_project/src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="app">
-    <Demo1></Demo1>
+    <Demo4></Demo4>
+    <!-- <Demo3></Demo3> -->
+    <!-- <Demo2></Demo2> -->
+    <!-- <Demo1></Demo1> -->
     <!-- <Demo></Demo> -->
   </div>
 </template>
@@ -8,10 +11,16 @@
 <script>
 import Demo from './components/Demo.vue'
 import Demo1 from './components/Demo1.vue'
+import Demo2 from './components/Demo2.vue'
+import Demo3 from './components/Demo3.vue'
+import Demo4 from './components/Demo4.vue'
 export default {
     components:{
         Demo,
-        Demo1
+        Demo1,
+        Demo2,
+        Demo3,
+        Demo4
     }
 }
 </script>

vue3/晚课/my_project/src/components/Demo2.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="demo2">
+    <h2>姓名：{{ name }}</h2>
+    <h2>年龄：{{ age }}</h2>
+    <h2>性别：{{ sex }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeSex">修改性别</button>
+  </div>
+</template>
+// npm install vite-plugin-vue-setup-extend
+// 在vite.config.ts文件中挂载插件
+<!--setup语法糖:不支持使用this 弱化this  -->
+<script lang="ts" setup name="newDemo">
+let name = "小艾";
+let age = 19;
+let sex = "男";
+function changeName() {
+  name = "小艾2";
+  console.log(name)
+}
+function changeAge() {
+  age = 20;
+  console.log(age)
+}
+function changeSex() {
+  sex = "man";
+  console.log(sex)
+}
+</script>
+<script></script>
+<style></style>

vue3/晚课/my_project/src/components/Demo3.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="demo2">
+    <h2>姓名：{{ name }}</h2>
+    <h2>年龄：{{ age }}</h2>
+    <h2>性别：{{ sex }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeSex">修改性别</button>
+  </div>
+</template>
+<script lang="ts" setup name="newDemo">
+/**
+ * ref  可以定义基本数据类型 会令数据编程RefImpl
+ * 
+ */
+import {ref} from 'vue'
+let name = ref("小艾");
+let age = ref(19);
+let sex = ref("男");
+  console.log(name,'222')
+function changeName() {
+  name.value = "小艾2"
+  // console.log(name)
+}
+function changeAge() {
+  age.value = 20;
+  console.log(age)
+}
+function changeSex() {
+  sex.value = "man";
+  console.log(sex)
+}
+</script>
+<script></script>
+<style></style>

vue3/晚课/my_project/src/components/Demo4.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="demo4">
+    <ul>
+      <li v-for="(item,index) in arr" :key="index">
+        {{ index + 1 }} -- 姓名是：{{item.name}} -- 今年{{item.age}}了
+      </li>
+    </ul>
+    <button @click="changeName">修改第一项的姓名</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Demo4">
+// reactive 用于引用数据类型 proxy代理转换响应式
+import {reactive} from 'vue';
+let arr = reactive([
+  {
+    name: "张三",
+    age: 18,
+  },
+  {
+    name: "李四",
+    age: 20,
+  },
+  {
+    name: "王五",
+    age: 22,
+  },
+]);
+console.log(arr);
+function changeName() {
+  // name = '赵六'
+  arr[0].name = '赵六'
+}
+</script>
+
+<style></style>

vue3/晚课/my_project/vite.config.ts

@@ -2,11 +2,12 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
+import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    VueSetupExtend()
   ],
   resolve: {
     alias: {