vue3

11.vue3/vue-project1/src/App.vue

@@ -3,11 +3,19 @@
 <template>
   <div>
     <h1>首页</h1>
-    <Demo1></Demo1>
+    <Demo5></Demo5>
+    <!-- <Demo4></Demo4> -->
+    <!-- <Demo3></Demo3>
+    <Demo2></Demo2>
+    <Demo1></Demo1> -->
   </div>
 </template>
 <script setup name="App">
 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';
 </script>
 <style scoped>
 </style>

11.vue3/vue-project1/src/components/Demo1.vue

@@ -9,9 +9,11 @@
 
 <script setup name="Demo1">
 import { ref } from 'vue';
+    // ref 定义基本数据类型
     // setup 语法糖 不支持使用this
     // 相当于创建阶段
     let a = ref(10);
+    console.log(a,'ref基本')
     console.log(this);
     function changMain() {
         // a = 20;

11.vue3/vue-project1/src/components/Demo2.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    demo2
+    <p>我叫{{ obj.name }}.今年{{ obj.age }}岁,我是{{ obj.sex }}人</p>
+    <button @click="changeName">修改姓名</button>
+    <br>
+    <button @click="changeMain">修改整体</button>
+  </div>
+</template>
+
+
+<script setup name="Demo2">
+import { reactive } from 'vue';
+let obj = reactive({
+  name:"孙悟空",
+  age: 10,
+  sex: "男"
+})
+console.log(obj,'reactive')
+function changeName() {
+  obj.name = '猪八戒'
+}
+function changeMain() {
+  // obj = reactive({
+  //   name:'哆啦A梦',
+  //   age: 7,
+  //   sex:"男"
+  // })
+  Object.assign(obj,{
+    name:"哆啦A梦",
+    age: 7,
+    sex: "男"
+  })
+}
+</script>
+
+<style>
+</style>

11.vue3/vue-project1/src/components/Demo3.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    demo3
+    <p>我叫{{ obj.name }}.今年{{ obj.age }}岁</p>
+    <button @click="changeName">修改姓名</button>
+    <br>
+    <button @click="changeMain">修改整体</button>
+
+  </div>
+</template>
+
+
+<script setup name="Demo3">
+import { ref } from 'vue';
+let obj = ref({
+  name:"喜羊羊",
+  age:2
+})
+console.log(obj,'ref')
+function changeName() {
+  obj.value.name = '灰太狼'
+}
+function changeMain() {
+  // obj.value = {
+  //   name:"小灰灰",
+  //   age: 1
+  // }
+  Object.assign(obj.value,{name:"懒羊羊",age:1})
+}
+</script>
+
+<style>
+</style>

11.vue3/vue-project1/src/components/Demo4.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    demo4
+    <p>我叫{{ obj.name }}.今年{{ obj.age }}岁,我有{{ obj.car.c1 }}和{{ obj.car.c2 }}</p>
+    <button @click="changeMain1">修改名字</button>
+    <br>
+    <button @click="changeMain2">修改车辆一</button>
+    <br>
+    <button @click="changeMain3">修改整体车辆</button>
+    <br>
+    <button @click="changeMain4">修改整体</button>
+  </div>
+</template>
+
+
+<script setup name="Demo4">
+import { ref } from 'vue';
+let obj = ref({
+  name:"喜羊羊",
+  age:2,
+  car:{
+    c1:"玛莎拉蒂",
+    c2:"法拉利"
+  }
+})
+function changeMain1() {
+  obj.value.name = '美羊羊'
+}
+function changeMain2() {
+  obj.value.car.c1 = '迈巴赫'
+}
+function changeMain3() {
+  obj.value.car = {
+    c1:"捷达",
+    c2:"自行车"
+  }
+}
+function changeMain4() {
+  obj.value = {
+    name:"沸羊羊",
+    age: 10,
+    car : {
+      c1:"拖拉机",
+      c2:"挖掘机"
+    }
+  }
+}
+</script>
+
+<style>
+</style>

11.vue3/vue-project1/src/components/Demo5.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    demo4
+    <p>我叫{{ obj.name }}.今年{{ obj.age }}岁,我有{{ obj.car.c1 }}和{{ obj.car.c2 }}</p>
+    <button @click="changeMain1">修改名字</button>
+    <br>
+    <button @click="changeMain2">修改车辆一</button>
+    <br>
+    <button @click="changeMain3">修改整体车辆</button>
+    <br>
+    <button @click="changeMain4">修改整体</button>
+  </div>
+</template>
+
+
+<script setup name="Demo5">
+import { reactive } from 'vue';
+let obj = reactive({
+  name:"喜羊羊",
+  age:2,
+  car:{
+    c1:"玛莎拉蒂",
+    c2:"法拉利"
+  }
+})
+function changeMain1() {
+  obj.name = '肖恩'
+}
+function changeMain2() {
+    obj.car.c1 = '摩托车'
+  
+}
+function changeMain3() {
+    // Object.assign(obj.car,{
+    //     c1:"自行车",
+    //     c2:"脚踏车"
+    // })
+    // obj.car.c1
+    obj.car = {
+        c1:"甲壳虫",
+        c2:"大黄蜂"
+    }
+}
+function changeMain4() {
+    Object.assign(obj,{
+    name:"沸羊羊",
+    age: 10,
+    car : {
+      c1:"拖拉机",
+      c2:"挖掘机"
+    }
+  })
+}
+</script>
+
+<style>
+</style>