vue3

20.vue3/project1/src/App.vue

@@ -3,6 +3,12 @@
     <h1>App</h1>
     <hr>
     <hr>
+    <Demo8></Demo8>
+    <hr>
+    <hr>
+    <Demo7></Demo7>
+    <hr>
+    <hr>
     <Demo6></Demo6>
     <hr>
     <hr>
@@ -29,6 +35,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 lang="scss" scoped>

20.vue3/project1/src/components/Demo7.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <hr />
+    <hr />
+    <h1>Demo7</h1>
+    <h2>今年{{ ages }}岁</h2>
+    <button @click="changeAge">修改年龄</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,toRefs,toRef} from "vue" 
+let obj = reactive({
+    name:"小明",
+    age:10
+})
+// let {name,age} = toRefs(obj);
+let ages = toRef(obj,'age');
+function changeAge() {
+    // age = 20;
+    ages.value = 20;
+}
+// let [a,b,c] = arr;
+// console.log(a,'a');
+// console.log(b,'b');
+// console.log(c,'c');
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project1/src/components/Demo8.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h1>计算属性</h1>
+    <p>姓: <input type="text" v-model="firstName"></p>
+    <p>名: <input type="text" v-model="lastName"></p>
+    <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>
+    <button @click="changeName">修改名字</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, computed} from "vue" 
+let firstName = ref("胡");
+let lastName = ref("图图");
+
+const init = () => {
+    console.log("!")
+    return firstName.value + lastName.value
+}
+
+// 获取
+// let fullName = computed(()=>{
+//     return firstName.value + lastName.value
+// })
+
+let fullName = computed({
+    get() {
+        console.log("?")
+        return firstName.value + lastName.value
+    },
+    set(val) {
+        firstName.value = val.slice(0,1);
+        lastName.value = val.substring(1,3);
+    }
+})
+function changeName() {
+    fullName.value = '喜羊羊'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>