vue3

13.Vue3/project2/src/App.vue

@@ -6,6 +6,8 @@
     <Demo3/>
     <Demo4/>
     <Demo5/>
+    <Demo6/>
+    <Demo7/>
   </div>
 </template>
 
@@ -15,6 +17,8 @@ import Demo2 from './components/Demo2.vue'
 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'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

13.Vue3/project2/src/components/Demo6.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h1>第六个</h1>
+    <h1>我叫{{obj.name}},今年{{age1}}</h1>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+  </div>
+</template>
+
+<script setup name='demo6'>
+import { ref, reactive,toRefs,toRef} from 'vue'
+// 解构
+// let [x,t,e,s,s] = [1,2,3,4,5]
+let obj = reactive({
+    name:"小明",
+    age:30,
+})
+let age1 = toRef(obj,'age')
+// let {name,age} = toRefs(obj)
+function changeName() {
+    obj.name = '图图'
+}
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project2/src/components/Demo7.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h2>第七个案例</h2>
+    <p>姓:<input type="text" v-model="firstName"/></p>
+    <p>名:<input type="text" v-model="lastName" /></p>
+    <button @click="changeName">出现</button>
+    <p>我叫:{{fullName}}</p>
+    <p>我叫:{{fullName}}</p>
+    <p>我叫:{{fullName}}</p>
+    <p>我叫:{{fullName}}</p>
+    <p>我叫:{{fullName}}</p>
+    <p>我叫:{{fullName}}</p>
+  </div>
+</template>
+
+<script setup name='Demo7'>
+// 计算属性 computed 
+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,'val')
+
+    }
+})
+function changeName() {
+    console.log("点击了")
+    fullName.set('胡-图图')
+}
+function getName() {
+    console.log("哈哈哈")
+    return firstName.value + lastName.value; 
+}
+</script>
+<style lang='scss' scoped>
+
+</style>