Vue小白之旅-初识

滚去睡觉
302 阅读2分钟

引言

在我学习JavaScript的这段时间里，我总能听到身边的人谈论Vue，然而对于Vue是什么，我一无所知。看到这么多人都熟悉Vue，我不禁觉得它一定非常厉害！确实如此，《Vue小白之旅》系列课程应运而生，旨在帮助像我这样的初学者一起踏上学习Vue的征程，逐步掌握Vue的精髓。通过这个系列，我期待与其他小白们一同领略Vue的魅力，共同成长。

什么是Vue？？？

这里要养成一个良好的习惯，在探索未知的工具时，最好先找到说明书(Vue-说明书)，让我们来到官方文档先。

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

用造房子来比喻写代码，用古早的方式来写代码就像人工来堆砌砖块，而用Vue来写代码就像使用3D打印机将房子打印出来，高效、简单且代码健壮性强。有了Vue，我们不再需要重复地造轮子。

Vue初体验

1.导入Vue

要想使用Vue，我们要先导入Vue的库。这里我们选择通过CDN来使用Vue

  • 首先打开我们的Vue官方文档，点击快速上手。

image.png

  • 在快速上手这一栏找到通过CDN使用Vue，复制这段代码。

image.png

  • 来到VSCode的html文件，在body中粘贴复制的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--在这里粘贴-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</body>
</html>

做完这一步，我们就可以在html文件中使用Vue啦！

2.使用Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>Hello World</h2>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const msg = '你好！'
        const tel = {
            template:`<h1>${msg}</h1>`
        }
        const app = Vue.createApp(tel)
        app.mount('#app')
    </script>
</body>
</html>

我们在body中重新添加了一个script标签，我们将在里面完成我们的初体验。

  • const msg = '你好！'

    定义了一个msg的变量

  • const tel = { template:<h1>${msg}</h1> }

    定义了一个组件，里面的 template可不能乱写哦，<h1>${msg}</h1>，加上云括号可以将h1标签识别出来，而${msg}的作用是读取定义的msg变量，这样我们就可以动态改变变量值了。

  • const app = Vue.createApp(tel)

    这里我们创建了一个Vue实例，并且将tel传进去

  • app.mount('#app')

    这里将Vue应用程序挂载到具有id为app的HTML元素上。也就是说，我们在script标签中的操作都是在id为app的HTML元素上

结果

image.png 细心的掘友们会发现，我们页面一开始会出现HelloWorld，然后再变成你好!这是为什么呢？因为我们在script中进行的操作需要耗时，我们在div中本来就写入了一个HelloWorld，当我们的script加载完毕以后，会实现一个覆盖效果，将id为 app 的div中的内容覆盖，于是便出现了上面的效果。

进阶

你会发现，这种写法实在是太麻烦了...所以我们有更好的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <template id="tel">
        <div>
            <h1>你好!🐂{{message}}</h1>
            <h2>{{count}}</h2>
            <button @click="add">+1</button>
            <button @click="jian">-1</button>
        </div>
    </template>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            template:'#tel',
            // data=>数据源
            data:function(){
                return{
                    message:'11111',
                    count:1
                }
            },
            methods:{
                add:function(){
                    this.count++;
                },
                jian:function(){
                    this.count--;
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

在script我们直接将中间步骤缩减，我们将要写入div中的东西放在template标签中，并且命名id传入Vue中的template中,

  • data

    data 是一个数据源，里面专门用来存放我们的数据

  • methods

    这里用来存放我们需要使用的方法

  • {{message}}

    在template中，我们使用这个符号来获取数据源中的数据

  • <button @click="jian">-1

    @click本质上就是监听一个点击事件，后面接点击以后要实现的方法

效果

看完效果，小白们有没有觉得好像写代码变得简单起来

我们不再去获取DoM结构也能修改我们的内容。

结尾

本文带领大家初识Vue，在接下来的一段时间内，我还将持续更新《Vue小白之旅》，陪大家一起努力！

avatar
文章
阅读
粉丝