知识库

Appearance

Vue 2 入门指南 ​

什么是 Vue.js ​

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面，无论是简单还是复杂的界面。

Vue 2 的核心特性 ​

1. 响应式数据绑定 ​

Vue 的响应式系统会自动追踪依赖并在数据变化时更新 DOM，无需手动操作 DOM。

javascript
// 创建一个 Vue 实例
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

// 当 message 变化时，DOM 会自动更新
vm.message = 'Hello World!'

2. 组件化开发 ​

Vue 允许你将界面拆分为独立的、可复用的组件，每个组件都包含自己的模板、逻辑和样式。

javascript
// 定义一个组件
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

// 使用组件
new Vue({
  el: '#app',
  data: {
    todos: [{ text: '学习 Vue' }, { text: '构建项目' }, { text: '部署上线' }]
  }
})

3. 模板语法 ​

Vue 使用基于 HTML 的模板语法，允许你声明式地将 DOM 绑定到底层组件实例的数据。

html
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

4. 指令系统 ​

Vue 提供了丰富的指令，如 v-if、v-for、v-bind、v-on 等，用于在模板中实现各种逻辑。

5. 计算属性和监听器 ​

计算属性允许你基于响应式数据定义复杂的计算逻辑，而监听器则用于监听数据变化并执行副作用。

javascript
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('消息从', oldVal, '变为', newVal)
    }
  }
})

6. 生命周期钩子 ​

Vue 实例在不同阶段会触发不同的生命周期钩子，如 created、mounted、updated、destroyed 等，允许你在特定时机执行代码。

Vue 2 与 jQuery 的区别 ​

1. 设计理念 ​

  • Vue: 采用声明式编程范式，关注数据和视图的分离，通过数据驱动视图更新。
  • jQuery: 采用命令式编程范式，直接操作 DOM 来实现界面交互。

2. DOM 操作 ​

  • Vue: 虚拟 DOM 机制，通过 diff 算法高效更新 DOM，减少直接操作 DOM 的次数。
  • jQuery: 直接操作 DOM，每次操作都可能引起页面重排和重绘。

3. 数据管理 ​

  • Vue: 响应式数据系统，数据变化自动触发视图更新。
  • jQuery: 手动管理数据与 DOM 的同步，需要手动更新 DOM。

4. 组件化 ​

  • Vue: 原生支持组件化开发，组件可复用性高。
  • jQuery: 没有原生组件系统，需要通过插件或自定义方式实现组件。

5. 性能 ​

  • Vue: 虚拟 DOM 和高效的 diff 算法，性能更优，尤其是在大型应用中。
  • jQuery: 频繁的 DOM 操作可能导致性能问题，特别是在复杂应用中。

6. 学习曲线 ​

  • Vue: 渐进式框架，学习曲线平缓，易于上手。
  • jQuery: API 简单直观，学习成本低，但在大型应用中维护难度增加。

适用场景 ​

Vue 2 适用场景 ​

  • 单页应用 (SPA)
  • 复杂的前端交互应用
  • 需要组件化开发的项目
  • 对性能要求较高的应用

jQuery 适用场景 ​

  • 简单的 DOM 操作和事件处理
  • 小型项目或现有项目的维护
  • 与其他框架集成使用
  • 需要兼容旧浏览器的项目

快速开始 ​

安装 Vue 2 ​

bash
# 使用 npm
npm install vue@2

# 使用 yarn
yarn add vue@2

基本示例 ​

html
<!DOCTYPE html>
<html>
  <head>
    <title>Vue 2 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <button @click="changeMessage">改变消息</button>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue 2!'
        },
        methods: {
          changeMessage: function () {
            this.message = 'Vue 2 真的很棒！'
          }
        }
      })
    </script>
  </body>
</html>

总结 ​

Vue 2 是一款现代化的前端框架，通过数据驱动和组件化的方式，使前端开发更加高效和可维护。与 jQuery 相比，Vue 2 提供了更先进的开发模式和更好的性能，特别适合构建复杂的现代 Web 应用。

无论是初学者还是经验丰富的开发者，Vue 2 都能为你提供愉悦的开发体验。通过学习 Vue 2，你将掌握现代前端开发的核心技能，为你的项目带来更高的质量和效率。

基于 VitePress 的本地知识库

Copyright © 2026