Vue 启发式入门

qq_51145696

280人浏览 · 2025-09-29 14:52:08

qq_51145696 · 2025-09-29 14:52:08 发布

🏠 会豪：个人主页

🌟 文章专栏：《Vue入门到进阶》

🍀不积跬步无以至千里，不积小流无以成江海

Vue简单来说就是一个渐进式的JS框架，对于很多入门的前端开发者来说，Vue是一个很不错的Web框架

本人在大学里面主学的是JAVA开发，Spring Boot，SSM框架，数据库等后端技术，但也学过配套的前端技术，主要是前端三剑客（JavaScript，CSS，HTML），还有和JAVA相匹配的JSP技术栈，虽然说JSP已经过世了，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>计数器</title>
    <style>
      /* 对应原scoped样式，这里简化实现基本布局 */
      .counter-container {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
      }

      button {
        padding: 5px 10px;
        cursor: pointer;
      }

      span {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div class="counter-container">
      <button id="addButton">+1</button>
      <span id="valueDisplay">0</span>
    </div>

    <script>
      // 获取DOM元素
      const addButton = document.getElementById('addButton');
      const valueDisplay = document.getElementById('valueDisplay');

      // 初始化计数器值
      let value = 0;

      // 定义加1函数
      function addNum() {
        value++;
        // 更新DOM显示
        valueDisplay.textContent = value.toString();
      }

      // 绑定点击事件
      addButton.addEventListener('click', addNum);
    </script>
  </body>
</html>

效果解读：

点击 +1 的按钮，右侧的数字就是 + 1

我们可以看到这个html代码还是有点麻烦的，还要获取 button 和 span 的dom元素，然后还要绑定点击事件

那接下来我们看看这种原生的html代码转为vue代码会是什么样子

<template>
  <div>
    <button @click="addNum">+1</button>
    <span>{{ value }}</span>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const value = ref(0);
  const addNum = () => {
    value.value++;
  };
</script>

<style scoped></style>

可以说是非常简洁，维护也非常方便快速

后面我将细致化的讲解Vue怎么使用，Vue的每个API是什么意思

Vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

GitHub今日热榜 | 2026-08-06

今日榜单呈现大换血，10个项目中7个为新晋项目。Cloudflare的Agent虚拟环境项目computer空降榜首，提供隔离文件系统和多执行后端支持。腾讯的TencentDB-Agent-Memory虽排名下滑至第3，但日增Star上涨70%。其他亮点包括： loopx为AI Agent团队提供看板管理系统经典面试指南system-design-primer回归榜单 DeepSeek-Reas