一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

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

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

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

如何通过CDN导入VUE3

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

<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基本架构

<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容器当中!

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

<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结构,而是直接进行操作!相当方便!下面为大家展示!

<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>

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

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

模板还是固定不变的!

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中直接调用方法名就可以了,不用()执行,它自动就会执行!

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

<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基本结构CDN导入Vue3编程模式

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

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

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

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

原文链接:https://juejin.cn/post/7312352526707032105 作者:Aidan路修远i

(0)
上一篇 2023年12月15日 上午10:59
下一篇 2023年12月15日 上午11:09

相关推荐

发表评论

登录后才能评论