Vue 基本介绍

官方网站

中文官网：https://cn.vuejs.org/guide/introduction.html。

作者：尤雨溪（EvanYou）。

简介

Vue 是目前前端领域最火的三大框架之一。

三大框架是google 旗下的 Angular，facebook 旗下 React，以及本次教程所讲述的 Vue，它的设计者是尤雨溪。

Vue 是一套构建用户界面的渐进式框架，即支持用户逐步使用 Vue，从最小的库使用到复杂的单页应用。

Vue 的特点

响应式数据绑定：数据和 DOM 之间的绑定简单直观。

轻量级：Vue 提供了许多独立的功能或库，可以根据项目选用Vue的功能。

构建工具集成：可与构建工具（如：Webpack）很好地配合使用。

Vue 的价值

Vue3 是一个现代化的前端框架，采用了最新的技术和最佳的实践。

目前 Vue 在业界也有大量的用户和案例，基于渐进式和轻量级的优势许多公司将 Vue 作为前端开发的技术栈。

这意味着，掌握了 Vue 的内容，将获取到更多有此需求的工作机会。

Vue 开发工具

推荐 VSCode 作为 Vue 开发工具，并安装相应的插件，让学习过程更得心应手。

下载地址：https://code.visualstudio.com/Download

VSCode 推荐插件：
- JavaScript (ES6) code snippets：包含 VSCode 的 ES6 语法中的 JavaScript 代码段。
- Vetur：VSCode 支持 VUE 的工具，有语法高亮、格式化、错误检查、自动完成等功能。
- Auto Close Tag：自动添加 HTML/XML 结束标签。
- Auto Rename Tag：自动重命名对应的 HTML/XML 标签。
- Highlight Matching Tag：突出显示匹配的开始和结束标签。
- open in browser：预览 HTML 文件。

工具准备好之后，我们再看之后上边的代码如何实现。

Vue 引用方式

在使用 Vue 时，可以通过在线或本地两种引用方式。本教程统一使用在线引用方式

在线引用
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

本地引用
- 可以将在线引用中的地址通过浏览器打开，然后手动将内容保存到 js 文件中使用。

Vue 示例

以下是一个最简单的项目示例，如同学习其他编程语言一样，从一个简单的 Hello World 来了解这个最简单的 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>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        // 导入 Vue 中的 createApp 和 ref 函数
        const { createApp, ref } = Vue

        // 在页面加载完成事件中添加创建Vue实例的方法
        window.onload = function(){
            createApp({
                setup() {
                    // 定义一个响应式对象
                    const message = ref('Hello World!')
                    // 将响应数据返回
                    return {
                        message
                    }
                }
            }).mount('#app');
        }

      </script>

</head>
<body>

    <!-- 添加元素，通过Vue展示数据 -->
    <div id="app">{{ message }}</div>

</body>
</html>

Vue API 风格

Vue 可以按两种不同的风格书写：选项式 API 和组合式 API。

选项式 API (Options API)

选项式 API 可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。

选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的 Vue 实例。

组合式 API (Composition API)

组合式 API 可以使用导入的 API 函数来描述组件逻辑。

在 HTML 文件中直接使用 Vue 时，可以使用 setup() 函数完成 Vue 实例中的代做逻辑，代码思想就像直接在 JS 文件中编写 JS 代码类似，最后通过 return 将需要暴露的内容返回。

在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。

比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

该选哪一个？

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。

实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

当不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。

当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。

当前教程选择使用组合式 API做为代码的API风格。