vue3

16.vue3/project1/src/App.vue

@@ -1,11 +1,19 @@
 <template>
   <div>
     <Demo1></Demo1>
+    <hr />
+    <hr />
+    <Demo2></Demo2>
+    <hr />
+    <hr />
+    <Demo3></Demo3>
   </div>
 </template>
 
 <script setup>
 import Demo1 from "./components/Demo1.vue";
+import Demo2 from "./components/Demo2.vue";
+import Demo3 from "./components/Demo3.vue";
 </script>
 
 <style lang="scss" scoped>

16.vue3/project1/src/components/Demo2.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>Demo2</h1>
+    <h2>{{ name }}</h2>
+    <button @click="changeName">修改名字</button>
+  </div>
+</template>
+
+<script setup>
+// ref 定义基本数据类型
+import { ref } from "vue";
+let name = ref("图图");
+console.log(name);
+function changeName() {
+  name.value = "孙悟空";
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project1/src/components/Demo3.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Demo3</h1>
+    <h2>{{ obj.name }}--{{ obj.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">修改整个人</button>
+  </div>
+</template>
+
+<script setup>
+// reactive 定义引用数据类型
+import { reactive } from "vue";
+let obj = reactive({
+  name: "图图",
+  age: 3,
+});
+function changeName() {
+  obj.name = "孙悟空";
+}
+console.log(obj);
+function changePerson() {
+  // obj = {
+  //   name: "猪八戒",
+  //   age: 4,
+  // };
+  Object.assign(obj, {
+    name: "猪八戒",
+    age: 4,
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project1/src/main.js

@@ -1,4 +1,4 @@
-import './assets/main.css'
+// import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'