Vue2 入门介绍

一、项目概述

这是一个使用 Vue2 构建的简单计数器应用，展示了 Vue2 的基本概念和核心功能。

<script src='https://unpkg.com/vue@2.7.14/dist/vue.min.js'></script>

通过 CDN 引入 Vue2 核心库，版本为 2.7.14

new Vue({
    el: '#app', // 挂载点：将Vue实例挂载到id为"app"的DOM元素
    data: { ... }, // 数据对象：存储应用状态
    methods: { ... } // 方法：定义应用逻辑
})

<div class="counter-value">{{ count }}</div>

methods: {
    increment() { this.count += this.step; },
    decrement() { this.count -= this.step; },
    reset() { this.count = 0; }
}

定义可以在模板中调用的函数。通过 this 访问 Vue 实例的数据。

<button @click="increment">增加 (+{{ step }})</button>

@click：事件监听器的简写（等同于 v-on:click）。当按钮被点击时，调用 increment 方法。

mounted() {
    console.log('Vue2 计数器应用已加载');
},
beforeDestroy() {
    console.log('Vue2 计数器应用即将销毁');
}

data: {
    count: 0, // 响应式数据
    step: 1, // 响应式数据
}

Vue2 使用 Object.defineProperty 实现响应式。当这些数据发生变化时，依赖它们的视图会自动更新。

提示

这个计数器示例虽然简单，但涵盖了 Vue2 的核心概念，是理解 Vue2 响应式原理和基本用法的绝佳起点。