01、App.vue程式碼如下:
<template> <div class="app"> <h1>好好學習,天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/PersonNew.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、PersonNew.vue的寫法
<template> <div class="person"> <h2>姓名{{ name }}</h2> <h2>年齡{{ age }}</h2> <h2>地址{{ address }}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">修改年齡</button> <button @click="showTel">檢視聯絡方式</button> </div> </template> <!--需要寫上setup--> <script lang="ts" setup> import {ref} from 'vue' // 定義資料 let name = ref('張三') let age = ref(18) let address = ref('聖弗蘭-西斯科') // 對資料的修改都需要加上.value function changeName() { name.value = '李四' } function changeAge() { age.value += 1 } function showTel() { alert('13800138000') } </script> <!--樣式 scoped表示僅本單元有效--> <style scoped> .person { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; button { margin: 0 5px; } } </style>
03、執行效果如下: