023:尚硅谷标签的ref属性学习示例

src/App.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="app">
         <h1>Hello World,你好呀!</h1>
-        <Person/>
+        <h2 ref="title2">我是一个Vue3的项目</h2>
+        <button @click="changeCity">点击改变</button>
+        <Person ref="ren"/>
     </div>
 
 
@@ -9,7 +11,13 @@
     </template>
 
     <script setup lang="ts">
+        import { ref } from 'vue';
+        const title2 = ref('');//定义一个变量
+        const ren = ref('');//定义一个变量
         import Person from './components/Person.vue';
+        function changeCity(){
+            console.log(ren.value)//获取标签
+        }
         
     </script>
 

src/components/Person.vue

@@ -1,14 +1,10 @@
 <template>
 <div class="person">
-<h1>情况5示例</h1>
-<h2>姓名：{{ person.name }}</h2>
-<h2>年龄：{{ person.age }}</h2>
-<h2>汽车：{{ person.car.c1 }}---{{ person.car.c2 }} </h2>
-<button @click="changeName">更改姓名</button>
-<button @click="changeAge">更改年龄</button>
-<button @click="changeCarc1">更改汽车品牌1</button>
-<button @click="changeCarc2">更改汽车品牌2</button>
-<button @click="changeCar">更改所有汽车</button>
+<h1>ref属性标签示例</h1>
+<h2 ref="title2">北京</h2>
+<button @click="changeCity">点击改变</button>
+
+
 
 
     
@@ -18,48 +14,26 @@
     
     <script setup lang="ts">
 
-    import { reactive, watchEffect } from 'vue'
-    let person = reactive({
-        name: 'John',
-        age: 25,
-        car: {
-            c1: '奔驰',
-            c2: '宝马'
-        }
+    import { ref, defineExpose } from 'vue'
+    const title2 = ref('')//ref属性标签示例
+    let a = ref('吃饭')//定义一个变量
+    let b = ref('睡觉')//定义一个变量
+    let c = ref('打豆豆')//定义一个变量
+    let d = ref('完善')//定义一个变量
+    defineExpose({//暴露变量
+        a,
+        b,
+        c,
+        d
 
     })
 
-    function changeName(){
-        person.name += 'Jane'
+    function changeCity(){
+        console.log(title2.value)//获取标签
     }
-    function changeAge(){
-        person.age += 30
 
-    }
-    function changeCarc1(){
-        person.car.c1 = '大众'
-        
-    }
-    function changeCarc2(){
-        person.car.c2 = '奥迪'
-    }
-    function changeCar(){
-        person.car = {
-            c1: '保时捷',
-            c2: '法拉利'
-        }
-    }
-    // watch(()=>person.age, (newValue, oldValue) => {
-    //     console.log('person changed:', newValue, oldValue)
-    // })
-    // watch([person.car,()=>person.name], (newValue, oldValue) => {
-    //     console.log('汽车变化了:', newValue, oldValue)
-    // },{deep:true})
-    watchEffect(()=>{
-        if(person.age>200){
-            console.log('年龄大于200')
-        }
-    })
+    
+    
    
 
     </script>