004、Vue3+TypeScript基础,使用组合式API的写法,并用ref和value响应界面数据
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、运行效果如下: