vue3

Vue3基础.md

@@ -1,15 +1,15 @@
 ## Vue3
 一款渐进式框架  2020.9.18
 构建响应式页面
-
 ## Setup
- 
+
 ## Vue3组件中如何给组件命名
 1.安装插件XXXX
 2.去vit.config.ts文件中引入声明
 3.在组件的script标签上使用name属性进行命名
 
 ## Ref
+
 ## Reactive
 
 ## Ref与Reactive区别

vue3/project3/src/components/Demo5.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <p>我叫{{ obj.name }}今年{{ obj.age }}岁，我喜欢{{ obj.color.c1 }}和{{ obj.color.c2 }}</p>
+    <p>
+      我叫{{ obj.name }}今年{{ obj.age }}岁，我喜欢{{ obj.color.c1 }}和{{
+        obj.color.c2
+      }}
+    </p>
     <button @click="changePart1">修改名字</button>
     <button @click="changePart2">修改整体</button>
     <button @click="changePart3">修改颜色一</button>
@@ -9,41 +13,40 @@
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
+import { ref, reactive } from "vue";
 let obj = ref({
-    name:'小明',
-    age:10,
-    color: {
-        c1:"红色",
-        c2:"黄色"
-    }
-})
+  name: "小明",
+  age: 10,
+  color: {
+    c1: "红色",
+    c2: "黄色",
+  },
+});
 function changePart1() {
-    obj.value.name = '图图'
+  obj.value.name = "图图";
 }
 function changePart2() {
-    obj.value = {
-        name:'瑶一瑶',
-        age: 4,
+  obj.value = {
+    name: "瑶一瑶",
+    age: 4,
     color: {
-        c1:"红色1",
-        c2:"黄色2"
-    }
-
-    }
+      c1: "红色1",
+      c2: "黄色2",
+    },
+  };
 }
 function changePart3() {
-    obj.value.color.c1 = '紫色'
+  obj.value.color.c1 = "紫色";
 }
 function changePart4() {
-    // obj.value.color = {
-    //     c1:'red',
-    //     c2:'yellow'
-    // }
-    Object.assign(obj.value.color,{c1:'red',c2:'blue'})
-
+  // obj.value.color = {
+  //     c1:'red',
+  //     c2:'yellow'
+  // }
+  Object.assign(obj.value.color, { c1: "red", c2: "blue" });
 }
 </script>
 
 <style lang="scss" scoped>
 </style>
+