vue3

Vue3基础.md

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

vue3/project3/src/App.vue

@@ -6,6 +6,8 @@
     <Demo2></Demo2>
     <Demo3></Demo3> -->
     <Demo4></Demo4>
+    <Demo5></Demo5>
+    <Demo6></Demo6>
   </div>
 </template>
 
@@ -31,6 +33,8 @@ import Demo1 from "./components/Demo1.vue";
 import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
 import Demo4 from './components/Demo4.vue';
+import Demo5 from './components/Demo5.vue';
+import Demo6 from './components/Demo6.vue';
 </script>
 <style>
 </style>

vue3/project3/src/components/Demo5.vue

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

vue3/project3/src/components/Demo6.vue

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