【Vue 2.x】之快速入门

艾伦耶格尔

发布于 2025-08-28 15:33:13

13200

代码可运行

文章被收录于专栏：Java基础Java基础

运行总次数：0

代码可运行

Vue.js 2.x 是一款渐进式 JavaScript 框架，以其易用性、灵活性和高性能而闻名。本文将带你快速上手。

一、起步：引入 Vue.js

最简单的入门方式是直接通过 <script> 标签引入 Vue.js：

<!DOCTYPE html>
<html>
<head>
  <title>My First Vue App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

这段代码创建了一个 Vue 实例，并将它挂载到 id="app" 的元素上。data 对象中的 message 属性绑定到 HTML 中的 {{ message }}，实现数据与视图的双向绑定。

二、模板语法

Vue.js 使用简洁的模板语法，可以直接在 HTML 中嵌入动态内容：

插值: {{ expression }} 用于显示动态数据。
指令: 以 v- 开头的特殊属性，用于控制 DOM 行为。例如：
- v-bind: 动态绑定 HTML 属性，例如 v-bind:class="{ active: isActive }"。简写为 :class。
- v-if 和 v-else: 条件渲染元素。
- v-for: 循环渲染列表，例如 v-for="item in items"。
- v-on: 绑定事件监听器，例如 v-on:click="handleClick"。简写为 @click。
- v-model: 双向数据绑定，通常用于表单元素，例如 <input v-model="username">。

示例：

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <input v-model="newItem" @keyup.enter="addItem">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      items: ['apple', 'banana', 'orange'],
      newItem: ''
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      },
      addItem: function () {
        if (this.newItem !== '') {
          this.items.push(this.newItem)
          this.newItem = ''
        }
      }
    }
  })
</script>

三、组件化开发

组件是 Vue.js 的核心概念，它允许你将 UI 分解成独立的、可复用的单元。

示例：

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<p>This is a custom component.</p>'
  })

  new Vue({
    el: '#app'
  })
</script>

四、计算属性和侦听器

计算属性: 基于响应式数据计算得出的值，具有缓存机制，只有依赖的数据发生变化时才会重新计算。
侦听器: 用于监听数据的变化并执行相应的操作。

示例：

<div id="app">
  <p>Original message: "{{ message }}"</p>
  <p>Reversed message: "{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message: function (newMessage, oldMessage) {
      console.log('Message changed from ' + oldMessage + ' to ' + newMessage)
    }
  }
})
</script>

五、生命周期钩子

Vue 实例在不同的生命周期阶段会触发相应的钩子函数，例如 created、mounted、updated、destroyed 等，允许你在特定阶段执行自定义逻辑.

在Vue.js中，生命周期钩子是指在Vue实例的生命周期中，某些特定的时刻会被自动调用的函数。这些钩子函数允许开发者在不同阶段执行代码，例如在实例创建后、挂载前、挂载后、更新前、更新后、销毁前等时刻。以下是Vue实例的生命周期钩子及其用途：

beforeCreate：在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。此时，组件实例的挂载元素$el和数据对象data都还没有被创建。
created：在实例创建完成后被立即调用，此时已完成数据观测、属性和方法的运算，el属性还未显示出来，data已经被set，但是el还没有挂载，所以不能访问到
beforeMount：在挂载开始之前被调用：相关的render函数首次被调用，$el属性和data已经被初始化，但这仍然是在虚拟DOM打补丁之前。
mounted：在el被新创建的vm.el替换，并挂载到实例上去之后调用该钩子。此时可以访问到DOM元素，适合执行依赖于DOM的操作，如使用nextTick。
beforeUpdate：在数据变化导致虚拟DOM重新渲染和打补丁之前调用，此时可以在这个钩子中进一步地更改状态，这不会触发额外的重渲染。
updated：在由于数据更改导致的虚拟DOM重新渲染和打补丁后调用。
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在实例销毁之后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
errorCaptured：当捕获一个来自子孙组件的错误时被调用。这可以用于全局处理错误。