Vue 3 快速入门

Vue是一款流行的JavaScript框架，用于构建交互性强、响应迅速的前端应用程序。它的简单性和灵活性使得它成为许多开发者的首选。

Vue作者尤雨溪在2020年9月份推出了Vue 3，目前 Vue 3已经发展得十分成熟了，能够应对各种大小项目的开发。Vue官方文档已经标明 " Vue 2 将于 2023年12月31日停止维护 "，对现在开始学习Vue的初学者来说，直接学习Vue 3已经足够了。

在这篇文章中，我们将一起探索Vue 3的基础概念和使用方法，让你快速入门。

认识 Vue

Vue是一个渐进式框架，意味着你可以逐步采用它的特性，而不必全部使用。Vue的核心思想是将应用分解为组件，每个组件都管理自己的状态和行为，使得代码更易维护和理解。

举个栗子🌰：

在JS中要想在页面的div标签下显示一个h2标签"Hello Vue"内容，应该怎么实现？

html 复制代码

<body>
    <div id="app"></div>

<script>
    let app = document.getElementById("app")
    let h2 = document.createElement("h2")
    h2.innerHTML = "Hello Vue"
    app.appendChild(h2)
</script>
</body>

在原生JS中，我们只能老老实实地创建DOM结构，然后将DOM结构插入div下。

那在Vue中怎么实现呢？

html 复制代码

<body>
    <div id="app"></div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        template:'<h2>Hello Vue</h2>'
    }).mount('#app')
</script>
</body>

首先我们通过 CDN 使用引入Vue框架

html 复制代码

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

可参照官方文档（快速上手 | Vue.js (vuejs.org)）

接着用Vue的createApp方法创建一个<h2>Hello World</h2>组件，然后用mount方法挂载到id为app的容器下面。

这样我们在页面中也能看到相同的效果。

这段简单的代码对比，体现了Vue组件化的思想，组件化思想将应用拆解为独立、可复用的组件，提高了代码的模块化、可维护性和可重用性，降低了耦合度，使开发更灵活、高效。

文本插值

文本插值是Vue中一种用于在模板中嵌入动态数据的技术。通过双花括号{{}}，在模板中插入变量、表达式或数据属性，使页面能够实时反映数据的变化。

举个栗子🌰：

相对于上面一个例子而言，h2标签里面的内容Hello Vue我们是无法修改的，原因是我们写死了内容，如果想要修改这个内容，就应该去到template模板中修改，这就导致代码的维护性很差，于是Vue的文本插值就帮我们解决了这个问题。

html 复制代码

<body>
    <div id="app">
    </div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        template:'<h2>{{message}}</h2>',
        data:function(){
            return {
                message :'Hello Vue'
            }
        }
    }).mount('#app')
</script>
</body>

页面效果：

可以发现，相比于开始的代码而言，仅仅多了一个{{}}和一个data:function(){...}，但是能够实现页面内容的动态修改。这是什么原理？

data:function(){...}是一个函数，返回一个对象对象中包含组件中需要用到的数据。这个例子中返回了一个包含 message 属性的对象，而这个 message 属性就是数据源。Vue会追踪这个属性的变化，使得当 message 的值改变时，{{}}中的数据会自动更新以反映最新的值。

Vue 指令

Vue 指令是在 Vue 模板中以 v- 前缀表示的特殊标记，用于向 DOM 元素添加一些特殊行为。指令允许你在模板中声明式地将 Vue 实例的数据绑定到 DOM 元素上，从而实现动态的 DOM 行为。常见的 Vue 指令有v-bind、v-on、v-if等等。

举个栗子🌰：

我们现在想实现一个功能，就是页面上有一个按钮和一个数字，我每次点击这个按钮，这个数字就自动加 1。

我们先分析一下，因为是动态数据，所以不能写死，要用到{{}}，有按钮和一个实现加1的点击事件。动态数据我会了，但是后面怎么解决呢？

我们先在模板中添加一个按钮button，然后再给这个按钮添加一个点击事件，在Vue中，点击事件需要使用v-on指令，将这个按钮绑定点击事件后，我们要在methods中定义我们的方法。

代码如下：

html 复制代码

<body>
    <div id="app">
    </div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        template:
        `
            <h2>{{count}}</h2>
            <button v-on:click="add">+1</button>
        `,
        data:function(){
            return {
                count :0
            }
        },
        methods:{
            add(){
                this.count++
            }
        }
    }).mount('#app')
</script>
</body>

效果：

这里我们用````````云括号将模板template包裹，这样代码就可以换行展示，更加清晰。我们在模板中添加了一个按钮，然后用v-on:click="add"对其进行绑定，这样我们每次点击按钮的时候都会触发add事件，这个事件我们需要写在methods中，这里count的初始值为0，每次点击都会自加1。其中这个this指的是Vue实例。

小结

当我们使用Vue的时候，通过 template 属性可以定义应用的模板。在模板中，我们通过 {{}} 实现文本插值，将数据动态绑定到标签上，data是一个函数用于返回一个存储数据源的对象。此外，通过 v-on:click 指令，我们实现了按钮点击事件的绑定，触发的方法在 methods 定。整个Vue应用通过 mount('#app') 指定挂载点来生效。

最后

看到这里，相信你对Vue有了初步的了解，本文主要是针对初学者，本文所讲，只是Vue学习过程中的冰山一角，为了让初学者有一个初步的认知，如果你对Vue感兴趣，可以自行查阅资料，仔细阅读官方文档（Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)），也可以关注我，我会持续更新Vue系列文章。

希望你在Vue学习过程中能够充实而愉快！持续地实践和探索Vue的强大功能，加油！

已将学习代码上传至 github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 "点赞收藏+关注" ，感谢支持！！