Vue：让前端开发变得更有趣，少一些"刀耕火种"，多一些"数据思维" ✨本文通过一个简单的 todos 应用，介绍 Vu

引言

作为一名大三的学生，虽然我还没有像资深前端开发者那样深谙技术的奥秘，但我已经深刻体会到，前端开发的复杂性真的是逐步加剧啊。👀 你有没有想过，以前写前端代码时，是否就像在“刀耕火种”一样艰难？每当业务需求复杂一点，我们就得手动操作 DOM、写一大堆事件监听代码，搞得自己头大得要命。

不过，幸运的是，Vue 的出现改变了这一切。它就像是一股清流，让前端开发变得更加简洁、灵活，也让我们不再陷入那些繁琐的 DOM 操作和事件绑定的泥潭中。Vue 让我们能更专注于业务逻辑，把精力放在实现功能上，而不是浪费在底层细节上。🎉

本文就从一个个经典的 HTML 示例出发，来聊聊 Vue 的哲学 —— 它如何帮助我们把繁琐的前端开发变得更有趣、更高效。

这就是一个简单的todos的基本操作，应该大多数读者都写过这种类似的程序。

一、前端的原始社会：DOM 操作的“刀耕火种”时代 ⚔️

在 Vue 出现之前，前端开发可以说是“刀耕火种”的时代。想要让网页上的某个元素变化，我们往往需要手动操作 DOM，依赖 JavaScript 底层的 API 去修改页面内容，事件监听更是一个大工程。

你还记得那时候的代码吗？每次想改变页面内容，得写一堆繁琐的 JavaScript 来操作 DOM：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2 id="app"></h2>
  <input type="text" id="todu-input">

  <script>
    var app = document.getElementById('app');
    var todoInput = document.getElementById('todu-input');
    todoInput.addEventListener("keyup", function (event) {
      var val = event.target.value;
      console.log(val, todoInput.value, this.value);
      app.innerHTML = val;
    })
  </script>
</body>

</html>

在这个例子中，我们通过 JavaScript 监听 keyup 事件，获取输入框的内容，并更新页面。看起来没有什么问题，但问题在于：随着页面的复杂度增加，你需要不断写更多类似的代码，去更新页面上的各种元素。

这时候，Vue 出现了！🚀

Vue 的出现，像是打破了这个“刀耕火种”的时代。它通过数据绑定和组件化的思想，让开发者从繁琐的 DOM 操作中解放出来，专注于数据和业务逻辑。

二、从 jQuery 到 Vue：前端开发的“封建”社会到“现代化”转型 🏰➡️🌍

在 Vue 之前的时代，最流行的前端工具莫过于 jQuery，它以简洁的语法和强大的 DOM 操作能力，让前端开发者省去了很多繁琐的步骤，成为了“封建”社会的产物。我们通过 jQuery，可以快速实现 DOM 操作、事件绑定，甚至做一些动画效果。

例如，下面的代码展示了如何用 jQuery 设置输入框的值：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2 id="app"></h2>
  <input type="text" id="todu-input">

  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $('#todu-input').val('haha')
  </script>
</body>

</html>

可以看到，使用 jQuery 修改输入框的值非常简洁，几行代码就完成了操作。这个时代的前端开发，虽然相较于“刀耕火种”的时代有所进步，但依旧没有脱离直接操作 DOM 的模式，面对复杂的业务逻辑，依然容易陷入困境。

随着 Web 技术的发展，特别是 JS 代码量的剧增，性能也开始成为前端开发的重要考量。这个时候，现代前端框架如 Vue 和 React 的出现，标志着前端开发从“封建”社会进入了一个更加注重数据和组件化的新时代。

三、Vue 的哲学：关注数据，解放业务 💡

Vue 的设计哲学，可以归纳为“关注数据，解放业务”。它通过 数据绑定 和 双向绑定 这样的技术，彻底摒弃了直接操作 DOM 的做法，让开发者可以更专注于业务开发，提升开发效率。

让我们通过一个更实际的例子来看一下 Vue 如何改变前端开发的面貌：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VUE 更专注业务 (数据 + 配套语法)</title>
</head>

<body>
  <div id="app">
    <h2>{{title}}</h2>
    <input type="text" id="todu-input" v-model="title">
  </div>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
  <script>
    const App = {
      title: "Hello World",
      // vue 2.0 写法
      data() {
        return {
          title: this.title
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

在这个例子中，Vue 使用了 v-model 指令实现了 双向数据绑定，即：输入框的值和数据对象 title 始终保持同步。你无需再手动更新 DOM，Vue 会帮你处理这些细节。

双向绑定的魔力：省时、省力！

通过 v-model，我们可以做到：

用户在输入框输入内容，title 的值会自动更新。
反过来，修改 title 的值，输入框的内容也会自动更新。

这是传统 JavaScript 无法实现的简洁方式。你只需关注业务数据，Vue 会自动帮你管理 DOM 的更新，让前端开发变得更加愉悦和高效。

四、前端应用的进化：从“动态数据”到“响应式”开发 💻

Vue 最吸引人的地方之一是它的 响应式 数据系统。当你修改数据时，Vue 会自动检测到变化，并更新 DOM。无需手动去管理 DOM，Vue 会智能地将数据和视图绑定在一起。

下面的 todos 应用就是一个典型的例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue todos </title>
  <style>
    .done {
      color: gray;
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <div id="app">

    <input type="text" v-model="title" @keydown.enter="addTodo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <!-- 动态样式任务，提供了语法支持 -->
        <span :class="{done: todo.done}">{{todo.title}}</span>
      </li>
    </ul>
  </div>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
  <script>
    const App = {
      data() {
        return {
          title: "",
          todos: [
            { title: "吃饭", done: false },
            { title: "睡觉", done: true },
          ]
        }
      },
      methods: {
        addTodo() {
          this.todos.push({
            title: this.title,
            done: false
          })
          this.title = ""
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

核心亮点：

双向绑定：输入框和 title 的值始终同步。
响应式：当我们向 todos 数组添加新任务时，Vue 会自动更新视图。
动态样式：通过 :class 绑定，任务完成时，我们可以动态地为任务添加样式（比如加上删除线）。

五、Vue 的哲学：简洁、高效、专注业务 🚀

Vue 通过 数据驱动视图 和 响应式编程，让我们无需关注复杂的 DOM 操作，能够专注

于业务逻辑和数据流的管理。它不仅简化了前端开发过程，还通过优化性能，确保我们能够在开发过程中轻松应对大规模的应用。

总结一下 Vue 的哲学：

关注数据：通过数据驱动视图的方式，我们只需关注数据，Vue 会自动更新视图。
简洁高效：双向绑定和响应式系统让我们的开发效率大大提高。
让开发者更专注：我们可以将精力集中在业务逻辑上，而不必再纠结于复杂的 DOM 操作。

Vue 让前端开发变得更加有趣、轻松，谁说前端不可以既简单又高效呢？ 😉

结语：让我们一起拥抱 Vue，解放生产力！💪

从最初的 DOM 操作到现代的响应式框架，前端技术的进化让我们看到了 Vue 的巨大优势。它不仅是一个工具，更是一种 开发哲学，让我们将更多精力集中在实现功能上，而非被繁琐的细节所困扰。今天的前端开发，因 Vue 而变得更加有趣、高效和专注。

如果你还没有使用 Vue，那你真的错过了一种超棒的开发体验！快来一起感受这个魔法框架吧！✨

希望你喜欢这篇文章，如果你觉得有用，记得给我点个赞哦！🎉

Vue：让前端开发变得更有趣，少一些"刀耕火种"，多一些"数据思维" ✨

引言