VueJS - 入门

VueJS - 入门 (Introduction)

欢迎来到 VueJS！Vue 是一个渐进式 JavaScript 框架，旨在构建交互式用户界面。其核心库专注于“视图”层（用户看到和交互的部分），以易于上手、多用途和高性能而闻名。

本教程使用 Vue 3，这是最新的主要版本，它在熟悉的 Options API 之外引入了强大的 Composition API（组合式 API）。

由于 Vue 主要用于前端开发，我们将使用 HTML、CSS 和 JavaScript。让我们从一个基础示例开始，看看 Vue 的实际应用。

您的第一个 Vue 3 应用

这个示例通过 CDN 链接直接使用 Vue，这非常适合快速原型或学习。对于大型项目，推荐使用构建工具（如通过 npm create vue@latest 使用 Vite）来设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 3 Introduction</title>
    <!-- Import Vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        #app {
            font-family: sans-serif;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
        button {
            margin-top: 10px;
            padding: 8px 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- This div is the container for our Vue app -->
    <div id="app">
        <!-- Double curly braces {{ }} are used for text interpolation -->
        <h1>{{ message }}</h1>
        <p>The counter is: {{ counter }}</p>
        <button @click="increment">Increment Counter</button>
    </div>

    <script>
        // Import necessary functions from the global Vue object
        const { createApp, ref } = Vue;

        // Create a new Vue application instance
        const app = createApp({
            // The setup() function is part of the Composition API
            // It's where we define reactive state and functions
            setup() {
                // 'ref' makes a value reactive.
                // When its .value changes, Vue updates the DOM.
                const message = ref('My First Vue 3 App!');
                const counter = ref(0);

                // Define a function to modify the reactive state
                function increment() {
                    counter.value++;
                    message.value = `Counter updated! (${counter.value})`;
                }

                // Expose the state and functions to the template
                return {
                    message,
                    counter,
                    increment
                };
            }
        });

        // Mount the application instance to the DOM element with id="app"
        app.mount('#app');
    </script>
</body>
</html>

解释

HTML 结构： 我们有一个基本的 HTML 页面，其中包含一个 ID 为 app 的 <div> 元素。这个 div 将由我们的 Vue 应用控制。
Vue 导入： 我们使用 <script src="https://unpkg.com/vue@3"></script> 从 CDN 引入 Vue 3。这使得全局的 Vue 对象可用。
创建应用： 我们使用 Vue.createApp({...}) 创建一个应用实例。它接受一个选项对象来定义根组件。
组合式 API (setup()): 我们使用了 setup() 函数，它是 Vue 3 组合式 API 的核心部分。这个函数在组件创建之前执行。我们在这里定义响应式数据和逻辑。
响应式 (ref): 我们使用 Vue.ref() 创建响应式变量（message 和 counter）。ref 将原始值（字符串、数字）包装在一个对象中。要访问或修改值，您需要使用 .value（例如，counter.value++）。当这些 ref 的 .value 改变时，Vue 会自动追踪依赖并更新 DOM。
方法 (Methods)： 我们在 setup 内部定义了一个普通的 JavaScript 函数 increment。这个函数修改响应式的 counter 和 message ref。
暴露给模板： setup 函数返回一个对象。这个对象上的属性（message、counter、increment）在模板 (<div id="app">...</div>) 中可以直接访问。
模板语法：
- {{ message }} 和 {{ counter }}：这是文本插值（也称为“双大括号语法”）。Vue 会用相应响应式变量的当前值替换这些占位符。
- @click="increment": 这是 v-on:click="increment" 的简写。它是一个事件监听器，在按钮被点击时调用 increment 方法。
挂载应用： 最后，app.mount('#app') 告诉 Vue 控制 ID 为 app 的 DOM 元素，并在其中渲染我们组件的模板。

交互性

在您的浏览器中打开这个 HTML 文件。您会看到初始的消息和计数器值。点击“Increment Counter”按钮。注意消息和浏览器中的计数器值如何立即更新而无需重新加载页面。这就是 Vue 响应式系统的作用！

您也可以打开浏览器的开发者控制台，并与应用实例进行交互（尽管在此简单的 CDN 示例中，直接访问 ref 需要更多的设置）。例如，如果您可以访问 setup 返回的值，在控制台中输入 counter.value = 10 会更新页面上显示的计数器。

这个基础示例展示了核心概念：创建 Vue 应用，定义响应式状态，将状态绑定到模板，以及处理用户事件以修改状态。接下来的章节将深入探讨 Vue 的其他特性，如组件、指令、生命周期钩子 (lifecycle hooks) 以及更高级的状态管理。