vue3

vue3/project3/src/App.vue

@@ -8,6 +8,8 @@
     <Demo4></Demo4>
     <Demo5></Demo5>
     <Demo6></Demo6>
+    <Demo7></Demo7>
+    <Demo8></Demo8>
   </div>
 </template>
 
@@ -35,6 +37,8 @@ import Demo3 from './components/Demo3.vue';
 import Demo4 from './components/Demo4.vue';
 import Demo5 from './components/Demo5.vue';
 import Demo6 from './components/Demo6.vue';
+import Demo7 from './components/Demo7.vue';
+import Demo8 from './components/Demo8.vue';
 </script>
 <style>
 </style>

vue3/project3/src/components/Demo7.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h1>第七个</h1>
+    <p>
+        我叫{{ name }},今年{{ age1 }}岁
+    </p>
+    <button @click="changeName">修改名字</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,toRefs,toRef} from "vue" 
+let obj = reactive({
+    name:'图图',
+    age:10
+})
+const {name,age} = toRefs(obj);
+console.log(name.value,age.value);
+let age1 = toRef(obj,'age')
+console.log(age1,'11')
+function changeName() {
+    // name = '瑶一瑶'
+    name.value = '瑶一瑶'
+}
+// let arr = [1,2,3];
+// // 解构
+// let [a,b,c] = arr;
+// console.log(a,b,c)
+// let obj = {
+//     name:'1',
+//     age:2
+// }
+// console.log(...arr)
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo8.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <h1>Demo8</h1>
+    <p>姓:
+        <input type="text" v-model="firstName">
+        <!-- <input type="text" v-model="firstName" @input="handleInp"> -->
+    </p>
+    <p>名:
+        <input type="text" v-model="lastName">
+    </p>
+    <button @click="setMain">设置</button>
+    
+    <h1>全称:{{ firstName + lastName }}</h1>
+    <!-- <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1>
+    <h1>全称:{{ showMain() }}</h1> -->
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,computed} from "vue" 
+let firstName = ref("");
+let lastName = ref("");
+let fullName = computed({
+    get() {
+        console.log("你好")
+        return firstName.value + lastName.value
+    },
+    set(val) {
+        console.log("出发",val.split('-'))
+        let [x,y] = val.split('-');
+        firstName.value = x;
+        lastName.value = y;
+
+    }
+})
+// function handleInp(e) {
+//     console.log(121,e)
+// }
+function showMain() {
+    console.log("2121")
+    return firstName.value + lastName.value;
+}
+function setMain() {
+    fullName.value = '糖-果'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>