前端学习-vue视频学习002-简单项目（使用部分vue2语法）

尚硅谷视频教程

main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue---使用vue2语法

<template>
    <!-- html -->
    <div class="app">
        <h1>hello</h1>
        <Person/>
    </div>
</template>

<script lang="ts">
    import Person from './components/Person.vue';
    export default {
        name:'App', //组件名
        components:{Person} // 注册组件
    }
</script>

<style>
    /* 样式 */
    .app {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

App.vue---使用vue3语法

<template>
    <Person/>   
</template>

<script lang="ts" setup name="App">
    import Person from './components/Person.vue';

    // export default {
    //     name:'App',
    //     components:{Person}
    // }
</script>

添加组件Person（使用vue2）

<template>
    <!-- html -->
    <div class="person">
        <h2>name: {{ name }}</h2>
        <h2>age: {{ age }}</h2>
        <button @click="changeName">click to change name</button>
        <button @click="changeAge">click to change age</button>
        <button @click="showTel">click to get tel</button>
    </div>
</template>

<script>
    export default {
        name : 'Person',
        // vue2
        data() {
            return {
                name:'aaa',
                age:20,
                tel:12388888888
            }
        },
        methods:{
            showTel() {
                alert(this.tel)
            },
            changeName() {
                this.name = 'maliou'
            },
            changeAge() {
                this.age += 1
            }
        }
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }
</style>