[小白学Vue3]vue3初体验--vue基本结构CDN导入Vue3编程模式

JavaScript太过繁琐?不够优雅?那就导入Vue3!!

今天,我们介绍Vue3的基本结构和一些基本需要学习的地方,我们不介绍如何导入脚手架,我们通过CDN导入VUE3!

注意!我们本篇基于HTML文件进行Vue3基本结构的学习!

如何通过CDN导入VUE3

我们可以去查看官方文档快速入门 |Vue.js (vuejs.org)中查看如何引入,我这里直接把代码给大家!

html 复制代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

为什么使用Vue3

很多人可能会疑问了?我们为什么要使用Vue3呢?

Vue支持我们把html放到js里面写,我们再页面中添加数据就变简单多了!

Vue 3相对于传统JavaScript提供了更高效、更可维护、更现代化的开发体验,通过引入新的特性和优化,使得构建复杂、交互式的前端应用更为容易。

Vue 3的本质可以理解为一种现代化的JavaScript框架,旨在让前端开发更加简单、高效、可维护。它通过提供响应式数据绑定、组件化开发、虚拟DOM等特性,使得开发者能够更自然地关注应用的状态和用户界面,而无需过多关注底层DOM操作。Vue 3的核心理念是通过声明式的方式描述应用的结构和行为,使得代码更直观、可读性更高,同时提供了强大的工具和生态系统,使得构建现代Web应用变得更加容易和愉悦。

Vue3基本架构

html 复制代码
<div id="app">
    
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
    const msg = '你好'
    const tel = {
        template:`<h2>${msg}</h2>`
    }
    const app = Vue.createApp(tel)
    app.mount('#app')
</script>

我们可以看到,在这个html页面当中,存在一个类名为appdiv容器!

接下来定义了两个script标签,这个是允许的,一个负责导入vue,一个负责编写我们的vue指令!

在我们的vue指令当中,定义一个变量msg,和一个对象tel,在tel对象中,我们使用定义了一个字符串模板,用于生成一个Dom结构,也就是一个html结构!

最重要的就是 下面的const app = Vue.createApp(tel) app.mount('#app')这个语句是必须要加的!

我们通过定义一个app,它实际上就是tel对象的实例对象!

app.mount('#app')则是将vue指令中的代码,挂载到id名为apphtml容器当中!

当然,这样写,也还是不够优雅!接下来,我们会将所有的模板以下面的形式进行编写!

html 复制代码
<div id="app">你好</div>
<template id="tel">
    <div>
       内容
    </div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        template:'#tel',
        data:function(){
            return {
                数据1:数据,
            }
        },
        methods:{
        }
    }).mount('#app')
    // mount 挂载
</script>

大家可能会疑问了!阿?这是什么形式??

其实这样是为了更加的方便,template标签t不是不存在的, 是html5中存在的标签 里面会放一个#document-fragment 这个叫文档碎片。这一点我们知道就好!文档碎片可以说是一个没有意义的标签!

template标签中,这里负责写我们的html代码!这里的代码会被js当作字符串读走。

script标签中,时刻记住我们一定要写一个Vue.createApp().mount()进行挂载!

我们直接通过Vue.createApp().mount()进行操作

createApp()的括号中,加入了一个template:'#tel',意思是引用一个id名为teltemplate标签模板,也就是我们上面写的`template``

data是vue中写死的标签,意思是数据源,用于存放各种变量和数据的地方!

methods也是vue中写死的标签,意思是方法/函数,是用于存放函数的地方!

vue3初体验

现在设想一个场景,我们在页面上有一个数字和两个按钮!一个按钮为+,一个按钮为-

点击+,页面上的数字就会+1,点击-号页面上的数字就-1

通过传统的javascript当然可以实现这个效果!不过,我们是不是要通过document.getElementbyId()等等手段获取到页面的元素,再添加点击事件,等等操作,相当繁琐!但是,使用Vue3就不同了!我们不再需要获取页面的Dom结构,而是直接进行操作!相当方便!下面为大家展示!

html 复制代码
<body>
    <div id="app"></div>
    <template id="tel">
        <div>
            <div><h3>数字:{{number}}</h3></div>
            <button @click="add">+</button>
            <button @click="minus">-</button>
        </div>
    </template>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            template:'#tel',
            data:function(){
                return {
                    number:1
                }
            },
            methods:{
                add:function(){
                    this.number++;
                },
                minus:function(){
                    this.number--;
                }
            }
            }
        ).mount('#app')
    </script>
</body>

大家可以看到,这个效果就简单地被我们实现了!

模板还是固定不变的!

template中,我们编写的就是html文件!

一个容器里面装了一个数字,和两个按钮!

**{{number}}是什么?**咦?这个东西有点奇怪!其实这个一点都不奇怪,number是我们从vue的数据源data当中拿到的变量!{{}}是在这个位置上挖一个"坑",用于把我们拿到的数据放进去!

data:在数据源当中 ,我们要在data当中使用一个函数,返回一个对象!这个是固定的格式!在对象中通过key-value 的方式定义我们的数据和变量,这些数据都是可以直接可以拿到我们的template中用的变量!这一下,动态操作是不是就变得更简单啦?

methods方法 :在data的同级下,我们可以写一个methods用于存放我们的方法和各种函数!并且,在这些方法当中,我们是可以直接通过this.变量名拿到我们数据源中的数据的,例如在这个案例当中!我们就用两个方法addminus通过this.number获取到了数据源当中的number变量,直接对它进行操作

button按钮当中,我们也是使用了两个@click="方法名"通过点击事件绑定了add()minus方法,@click我们会在后续当中介绍到!在@click中直接调用方法名就可以了,不用()执行,它自动就会执行!

到这里如果你还不懂的话,我们就再来看看一个简单的数据源获取:

html 复制代码
<div id="app"></div>
    <template id="tel">
        <div>
            <div><h1>介绍:{{introduce}}</h1></div>
        </div>
    </template>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            template:'#tel',
            data:function(){
                return {
                    introduce:'我是Aidan'
                }
            },
            }
        ).mount('#app')
    </script>

看看效果:

大家仔细看看,其实就很容易明白了!

今天,我们关于Vue3基本结构的学习就到这里啦!后续,我还会为大家总结一些vue3的基础指令,脚手架的安装,以及如何开始一个vue项目!

今天,就到这里为止啦!后续文章,我还会持续输出,大家可以先点点关注哦~

个人gitee库:MycodeSpace: 主要应用的仓库,记录学习coding中的点点滴滴 (gitee.com)

相关推荐
慧一居士32 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead34 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js