VUE3和VUE2

news2024/11/17 21:26:07

VUE3和VUE2

上一篇文章中，我们对VUE3进行了一个初步的认识了解，本篇文章我们来进一步学习一下，顺便看一下VUE2的写法VUE3是否能做到兼容😀。

一、新建组件

我们在components中新建一个组件，名称为Peron，后缀为vue。

在这里插入图片描述

二、编写组件

我们先把基础的结构写出来

html
交互脚本
样式美化

<template>
    <div> 
    </div>
</template>

<script lang="ts"> //注意要添加ts
    export default{
        name:''
    }
</script>

<style>

</style>

三、添加内容

data和methods都是VUE2的写法，但是并没有报错

<template>
    <div class="person">
        <h1>姓名：{{ name }}</h1>
        <h2>年龄：{{ age }}</h2>
        <!-- <h3>电话：{{ tel }}</h3> -->
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
    export default{
        name:'Person',
        data() {
            return {
                name:'落满樱花的羊',
                age:23,
                tel:'1300000000'
            }
        },
        methods:{
            changeName(){
                this.name='luomanyinghuadeyang' 
            },           
            changeAge(){
                this.age+=1
            },
            showTel(){
                alert(this.tel)
            }
        }
    }
</script>

<style>
    .person{
        background-color: #b3f4f7;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>

四、注册控件

因为程序运行打开的主页面是App.vue，所以要在App.vue中引入次控件并注册。

<template>
    <!--html  结构-->
    <div class="app">
        <h1>你好</h1>
        <Person/>
    </div>
</template>

<script lang="ts">
    //脚本 交互
    import Person from './components/Person.vue' //引入组件
    export default{//暴露 默认暴露
        name:'APP', //组件的名字
        components:{Person} //注册组件
    }
</script>

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