《七天轻轻松松掌握vue前端知识》Day 1: Vue.js 入门与核心概念

最新推荐文章于 2025-08-18 21:53:02 发布

豆豆（前端开发+ui设计）

最新推荐文章于 2025-08-18 21:53:02 发布

阅读量313

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/baifangfang521/article/details/146362599

Vue.js 是一个轻量且强大的 JavaScript 框架，用于构建用户界面。它以简单易用和渐进式集成的特性受到开发者喜爱。本文将带你快速入门 Vue.js，了解其核心概念，包括响应式数据和常用指令。我们还将通过一个计数器示例展示 Vue 的基本用法。

1. 安装 Vue.js

你可以通过 CDN 或 npm 安装 Vue.js。对于初学者，推荐使用 CDN：

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

2. 响应式数据

Vue 的核心是响应式数据。当数据发生变化时，界面会自动更新。Vue 3 使用 reactive 或 ref 来实现响应式：

ref：用于基本数据类型（如数字、字符串）。
reactive：用于对象或数组。

3. 常用指令

Vue 提供了一些内置指令来简化 DOM 操作：

v-bind：动态绑定属性。
v-if：条件渲染。
v-for：循环渲染。

4. 示例代码：计数器应用

下面是一个简单的计数器应用，展示 Vue 的响应式和指令用法。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue.js 计数器</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>计数器: {{ count }}</h1>
    <button v-on:click="increment">加 1</button>
    <button v-on:click="decrement">减 1</button>
    <p v-if="count > 0">计数器大于 0</p>
    <ul>
      <li v-for="item in history" :key="item">{{ item }}</li>
    </ul>
  </div>

  <script>
    const { createApp, ref } = Vue;

    const app = createApp({
      setup() {
        const count = ref(0); // 响应式计数器
        const history = ref([]); // 历史记录

        const increment = () => {
          count.value++;
          history.value.push(`加到 ${count.value}`);
        };

        const decrement = () => {
          count.value--;
          history.value.push(`减到 ${count.value}`);
        };

        return {
          count,
          history,
          increment,
          decrement
        };
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

代码解析

HTML 部分：
- {{ count }}：双大括号绑定数据。
- v-on:click：监听点击事件（简写为 @click）。
- v-if：根据条件显示内容。
- v-for：循环渲染历史记录。
JavaScript 部分：
- ref(0)：创建一个初始值为 0 的响应式变量。
- setup()：Vue 3 的组合式 API，用于定义数据和方法。
- mount('#app')：将 Vue 应用挂载到 DOM。