01、App.Vue程式碼:
<template> <div class="app"> <h1>好好學習,天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' export default { // App為根元件 name: 'App', // 註冊Person元件,註冊後,在本單元中可以直接使用Person元件 components: {Person} } </script> <!--樣式 scoped表示僅本單元有效--> <style scoped> .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } </style>
02、Person.vue程式碼如下:
<template> <div class="person"> <h2>一輛{{ car.brand }}車,價值{{ car.price }}</h2> <button @click="changePrice">修改汽車價格</button> </div> </template> <script lang="ts" name="Person001" setup> import {reactive} from 'vue' // 資料變成響應式 let car = reactive({ brand: '寶馬', price: 1000 }) //使用reactive後變成Proxy物件 console.log(car) // 方法 function changePrice() { car.price += 10 } </script> <!--樣式 scoped表示僅本單元有效--> <style scoped> .person { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; button { margin: 0 5px; } } </style>
03、效果如下: