vue2和vue3的多種語法形式

<template>
    <div class="persion">
        <h2>姓名：{{name}}</h2>
        <h2>年齡：{{age}}</h2>
        <h2>性別：{{sex}}</h2>   
        <button @click="nameTel">點選姓名</button>      
        <button @click="ageTel">點選年齡</button>
        <button @click="showTel">點選顯示電話</button>

    </div>
</template>

<script>

import { vShow } from 'vue';

    export default {
        data() {
            return {
                name: 'mick',
                age:18,
                sex:'男',
                // 新增tel屬性
                tel: '1234567890'
            }
        },
        methods:{
            showTel(){  // 點選事件  呼叫方法
                alert(this.tel)
            },
            nameTel(){
                this.name='zhangsan'
            },
            ageTel(){
                this.age++;
            }
        }
    }
</script>
<style>
    .persion{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

　　

<template>
    <div class="persion">
        <h2>姓名：{{ name }}</h2>
        <h2>年齡：{{ age }}</h2>
        <h2>性別：{{ sex }}</h2>
        <button @click="nameTel">點選姓名</button>
        <button @click="ageTel">點選年齡</button>
        <button @click="showTel">點選顯示電話</button>
    </div>
</template>

<script>
export default {
    name: 'persion',
    setup() {
        let name = '張三';
        let age = 18;
        let sex = '男';
        let tel = '13812345678';

        function nameTel() {
            name = '李四';
            console.log(name);
        }
        function ageTel() {
            age = 20;
            console.log(age);
        }
        function showTel() {
            alert(tel);
        }

        return { name, age, sex, nameTel, ageTel, showTel }
    }
    // 定義方法

}


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

　　

<template>
    <div class="persion">
        <h2>姓名：{{ name }}</h2>
        <h2>年齡：{{ age }}</h2>
        <h2>性別：{{ sex }}</h2>
        <button @click="nameTel">點選姓名</button>
        <button @click="ageTel">點選年齡</button>
        <button @click="showTel">點選顯示電話</button>
    </div>
</template>

<script setup>
        let name = '張三';
        let age = 18;
        let sex = '男';
        let tel = '13812345678';

        function nameTel() {
            name = '李四';
            console.log(name);
        }
        function ageTel() {
            age = 20;
            console.log(age);
        }
        function showTel() {
            alert(tel);
        }

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