002、Vue3+TypeScript基础,调用子页面和简单效果
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>姓名{{ name }}</h2> <h2>年龄{{ age }}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">修改年龄</button> <button @click="showTel">查看联系方式</button> </div> </template> <script lang="ts"> // JS或TS export default { name: 'Person', data() { return { name: '张三', age: 18, tel: 13800138000 } }, methods: { changeName() { this.name = '李四' }, changeAge() { this.age += 1 }, showTel() { alert(this.tel) } } } </script> <!--样式 scoped表示仅本单元有效--> <style scoped> .person { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; button { margin: 0 5px; } } </style>
03、效果如下: