前言

什么是 Vue

Vue 的定义是渐进式的JavaScript框架。所谓渐进式，是指 Vue 框架被设计成可以自底向上逐层应用。我们可以只使用 Vue 框架中提供的某层的功能，也可以与其他第三方库整合使用。

Vue 的优势

Vue 官网给出了以下 Vue 的特点：

易学易用：基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。
性能出色：经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。
灵活多变：丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

为什么要使用 Vue 框架

首先，现在做前端开发，我们不太可能还使用“前端三剑客”——HTML、CSS和JavaScript这种最原始的方式开发非常庞大的应用了，因为这样效率太低。使用一款前端框架，就像现在的工厂使用一套流水线生产产品一样。对于复杂的项目，如果不使用任何框架来开发的话，后期的维护和扩展将会非常困难。

然后，在现在众多的前端开发框架中，Vue 上手容易，且具有良好的性能。因此，如果你想尽快掌握前端开发的核心技能并上手开发大型商业项目，Vue 是一定不会让你失望的。

快速使用 Vue

第一个 Vue 应用

在初学时，我们可以直接使用 CDN 的方式来引入 Vue框架。

首先，我们创建一个文件 Vue.html，写入如下模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 Demo</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
</body>
</html>

可以看到，我们在 head 标签中加入了一个 script 标签，通过 CDN 的方式引入了 Vue 3 版本。

然后，我们尝试使用 Vue 来实现一个简单的计数器。

在 body 标签中添加一个标题和按钮：

<div style="text-align: center;" id="Application">
    <h1>{{ count }}</h1>
    <button v-on:click="clickButton">点击</button>
</div>

{{ count }} 会将当前 Vue组件中定义的 count 变量的值替换过来；v-on:click用来进行组件的单击事件绑定，将单击事件绑定到 clickButton 函数上。

定义 Vue 组件，在 body 标签下添加一个 script 标签：

<script>
    const App = {
        data() {
            return {
                count:0
            }
        },
        methods: {
            clickButton() {
                this.count = this.count + 1
            }
        }
    }
    Vue.createApp(App).mount("#Application")
</script>

实际上定义了一个 JavaScript 对象，其中 data 方法用来返回组价所需的数据；method 属性用来定义组件所需的函数方法。

在浏览器打开，就可以看到计数器的效果啦~

学习使用 Vue | 青训营笔记

前言

什么是 Vue

Vue 的优势

为什么要使用 Vue 框架

快速使用 Vue

第一个 Vue 应用