VUE3和VUE2

VUE3和VUE2

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

一、新建组件

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

二、编写组件

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

  • html
  • 交互脚本
  • 样式美化
java 复制代码
<template>
    <div> 
    </div>
</template>

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

<style>

</style>
三、添加内容
  • data和methods都是VUE2的写法,但是并没有报错
java 复制代码
<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中引入次控件并注册。
java 复制代码
<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>
五、运行调试
  • 我们可以看到,自定义控件套用在了原本的你好的控件里面。
  • 修改名字:按钮触发修改事件。
  • 修改年龄:按钮触发名字+1。
  • 查看联系方式:显示电话号码。
六、插件工具
  • 我们在上图中,看到了F12调试中,有VUE 的插件,这个插件是免费的,下载好配置一下就可以了。
  • 在百度搜索极简插件,然后搜索VUE,下载到桌面解压,会看到这个文件。
  • 然后在浏览器,找到插件,管理插件,打开开发者模式,把这个拖拽进去就可以了,再次F12的时候就可以查看了。
相关推荐
码上心间13 分钟前
注册发送手机短信
javascript·vue.js·elementui
江城开朗的豌豆14 分钟前
Vue中动态添加对象属性?这个生命周期时机选对了没?
前端·javascript·vue.js
今晚打老虎17 分钟前
c++之基础B(第一课)
开发语言·c++
wa的一声哭了17 分钟前
Python多进程并行multiprocess基础
开发语言·jvm·人工智能·python·机器学习·语言模型·自然语言处理
前端小巷子21 分钟前
深入 Vue v-model
前端·vue.js·面试
枫叶丹431 分钟前
【Qt开发】信号与槽(三)-> 自定义信号和槽
开发语言·qt
奔跑吧邓邓子41 分钟前
从0到1学PHP(三):PHP 流程控制:掌控程序的走向
开发语言·php·流程控制
R-G-B1 小时前
【31】C# WinForm入门到精通 ——保存文件SaveFileDialog 【属性、方法、事件、实例、源码】
开发语言·c#·c# winform·c#保存文件·savefiledialog
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | VerifyAccountUi(验证码组件)
前端·javascript·css·vue.js·vue
yinuo1 小时前
企业微信侧边栏本地开发调试
前端