vue3

vue3/project3/src/App.vue

@@ -12,7 +12,7 @@
     <Demo8></Demo8>
     <Demo9></Demo9> -->
      <!-- <Demo14 v-if="isshow"></Demo14> -->
-     <Demo15></Demo15>
+     <Demo18></Demo18>
     <!-- <Demo10></Demo10>
     <Demo11></Demo11>
     <Demo12></Demo12>
@@ -54,6 +54,9 @@ import Demo12 from './components/Demo12.vue';
 import Demo13 from './components/Demo13.vue';
 import Demo14 from './components/Demo14.vue';
 import Demo15 from './components/Demo15.vue';
+import Demo16 from './components/Demo16.vue';
+import Demo17 from './components/Demo17.vue';
+import Demo18 from './components/Demo18.vue';
 let isshow  = ref(true);
 </script>
 <style>

vue3/project3/src/components/Demo16.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <h1>这是第一个Demo</h1>
+    <p>我喜欢{{ aa }}</p>
+    <button @click="changeName2">修改名字1</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="First">
+import { ref } from 'vue';
+// 定义变量 需要用ts去指定类型
+let aa = ref<string | number>(12);
+console.log(aa)
+// 定义函数类型
+// function changeName2():string {
+//    return aa.value = '胡图图';
+// }
+function changeName2():void {
+    aa.value = '胡图图';
+    // return
+}
+</script>

vue3/project3/src/components/Demo17.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <p>我叫{{ obj.name }}今年{{ obj.age }}岁</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">换个人</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive} from 'vue';
+// 定义接口去约束对象类型
+
+interface Person {
+    name:string,
+    age: number
+}
+
+let obj:Person = reactive({
+    name:"图图",
+    age:3
+})
+console.log(obj)
+function changeName():void {
+    obj.name = '蜡笔小新'
+}
+function changePerson():void {
+    Object.assign(obj,{name:'喜羊羊',age:7})
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo18.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>第四个</h1>
+    <p>我叫{{ obj.name }}今年{{ obj.age }}岁</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">换个人</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+interface Person {
+    name:string,
+    age:number | string
+}
+let obj = ref<Person>({
+  name: "瑶一瑶",
+  age: 4,
+});
+function changeName():void {
+  obj.value.name = "杨金刚";
+}
+function changePerson():void {
+  obj.value = {
+    name: "杨水珍",
+    age: 4.5,
+  };
+  Object.assign(obj.value, {
+    name: "杨水珍",
+    age: 4.5,
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+</style>