Vue基础教程（1）初识Vue.js世界：Vue.js，前端界的“智能家居系统”：让你告别“手动布线”的黑暗时代！

Vue.js入门与实战详解

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 308 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #智能家居

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

嘿，朋友们！今天咱们聊个前端圈里的大明星——Vue.js。如果你经常捣鼓网页开发，肯定听过它的大名。但别被“框架”这词吓到，Vue可不是什么高冷玩意儿，它更像你家装修时请的智能家居设计师：以前你得手动开关灯、拉窗帘（想想jQuery操作DOM的酸爽），现在呢？动动嘴皮子（改数据），全屋自动响应！Vue就是来帮你告别“手动布线”的黑暗时代的。

一、Vue.js是啥？为啥它一出生就自带“圈粉体质”？

Vue.js由华人大神尤雨溪在2014年创建，它的核心理念就俩字：优雅。别的框架可能逼你学一堆概念才能上手，Vue却坚持“渐进式”——你用多少功能，就学多少东西。比如，你可以先在某个页面里插个小Vue组件试试水，等玩熟了再用它搞全家桶项目。这种低门槛设计，让Vue迅速成了前端界的“网红”。

举个栗子🌰：以前用原生JS更新页面数据，你得这么写：

// 传统方式：手动找到DOM元素，再改内容
document.getElementById('price').innerText = '100元';

而用Vue，你只需要关心数据：

// Vue方式：数据变了，页面自动跟着变
this.price = '100元';

看，是不是像从“手摇拖拉机”换成了“特斯拉自动驾驶”？

二、Vue的三大“黑科技”，让你编码爽到飞起！

响应式数据绑定：Vue的核心魔法！
你的数据（比如用户输入、后台接口返回的值）和页面视图是自动绑定的。数据一变，页面秒更新。这背后是Vue用Object.defineProperty或Proxy实现的监听机制——当然，你不用管这些，只管爽就行！
组件化开发：像搭乐高一样写网页！
把页面拆成按钮、列表、弹窗等独立组件，每个组件自带HTML、CSS、JS。好处？复用性强、维护方便。比如做个电商站，商品卡片组件做好后，全站随便复用！
虚拟DOM：性能加速器！
Vue会在内存里建一个虚拟DOM树，数据变化时先对比虚拟DOM，只更新真实DOM中需要改的部分。这就像装修时只换沙发，而不是砸了整个客厅——效率飙升！

三、手把手实战：用Vue 3写一个“会算账的购物车”

下面咱们撸个完整示例，实现一个动态购物车（效果如下图）。功能包括：添加商品、增减数量、自动计算总价。我用Vue 3的Composition API写，因为这是未来趋势！

步骤1：HTML骨架（Vue挂载点）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>Vue购物车示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .cart { max-width: 600px; margin: 20px auto; }
    button { background: #42b883; color: white; border: none; padding: 5px 10px; cursor: pointer; }
    .item { display: flex; justify-content: space-between; margin: 10px 0; }
  </style>
</head>
<body>
  <div id="app"></div>
  <script>
    // Vue代码写在这里！
  </script>
</body>
</html>

步骤2：Vue实例与数据初始化

在<script>标签里，我们先定义购物车的初始数据：

const { createApp, ref, computed } = Vue;

createApp({
  setup() {
    // 商品列表数据
    const items = ref([
      { id: 1, name: '咖啡机', price: 399, quantity: 1 },
      { id: 2, name: '蓝牙音箱', price: 199, quantity: 2 }
    ]);

    // 计算总价：用computed自动追踪依赖
    const totalPrice = computed(() => {
      return items.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
    });

    // 增加商品数量
    const increase = (id) => {
      const item = items.value.find(item => item.id === id);
      if (item) item.quantity++;
    };

    // 减少商品数量（最少为0）
    const decrease = (id) => {
      const item = items.value.find(item => item.id === id);
      if (item && item.quantity > 0) item.quantity--;
    };

    return { items, totalPrice, increase, decrease };
  }
}).mount('#app');

步骤3：模板渲染——把数据变成界面

在<div id="app">中编写模板：

<div id="app">
  <div class="cart">
    <h2>🛒 我的智能购物车</h2>
    <div v-for="item in items" :key="item.id" class="item">
      <span>{{ item.name }} - {{ item.price }}元</span>
      <div>
        <button @click="decrease(item.id)">-</button>
        <span style="margin: 0 10px;">{{ item.quantity }}</span>
        <button @click="increase(item.id)">+</button>
      </div>
    </div>
    <hr>
    <h3>总价：{{ totalPrice }}元</h3>
  </div>
</div>