fix:vue3

15.vue3/vue_project1/src/App.vue

@@ -1,31 +1,18 @@
 <template>
   <div>
-    <Demo1/>
-    <Demo2/>
-    <Demo32/>
+    <Demo1 />
+    <Demo2 />
+    <Demo32 />
+    <Demo4 />
+    <Demo5 />
   </div>
 </template>
 
-<script>
+<script setup name="App">
 import Demo1 from "./components/Demo167.vue";
 import Demo2 from "./components/Demo2.vue";
 import Demo32 from "./components/Demo36.vue";
-export default {
-  // 为什么data是函数
-  // data为什么不是对象
-  // v-model
-  // vue3中可以使用vue2写法
-  // data() {
-  //   return{
-  //     msg:"你好"
-  //   }
-  // }
-  components: {
-    Demo1,
-    Demo2,
-    Demo32
-  },
-};
+import Demo4 from "./components/Demo4.vue";
+import Demo5 from "./components/Demo5.vue";
 </script>
-
-<style lang="scss" scoped></style>
+<style></style>

15.vue3/vue_project1/src/components/Demo4.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h2>第四个</h2>
+    <p>{{ name }}--{{ age }}</p>
+    <button @click="changeName">改名字</button>
+  </div>
+</template>
+<script setup>
+import {ref} from 'vue';
+/**
+ * ref可以定义基本数据类型
+ * 真实值修改 xxx.value
+ */
+let name = ref("胡图图");
+let age = ref(10);
+console.log(name,'默认值',age);
+function changeName() {
+  console.log("点击了");
+  name.value = "胡英俊";
+  age.value = 20;
+  console.log("结束",name);
+}
+</script>
+<style></style>

15.vue3/vue_project1/src/components/Demo5.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h2>第四个</h2>
+    <p>{{ obj.name }}--{{ obj.age }}--{{ obj.love }}</p>
+    <button @click="changeName">换个人</button>
+  </div>
+</template>
+<script setup>
+import { reactive } from 'vue';
+let obj = reactive({
+  name:"蜡笔小新",
+  age: 3,
+  love: '娜娜子'
+})
+console.log(obj)
+function changeName() {
+  // obj.age = 5;
+  // obj.name = '阿呆'
+  // obj.love = '女的'
+  obj = {
+    name: '来财',
+    age:10,
+    love:'dollar'
+  }
+}
+</script>
+<style></style>