Vue.js 是一个渐进式的 JavaScript 框架，它的设计目标是通过简单的 API 来构建用户界面。Vue 2.x 版本是目前最常用的版本之一，它通过数据绑定和组件化的方式，使得开发 SPA（单页面应用）变得更加简便和高效。

下面是关于 Vue2 的基础笔记，包括其核心概念、生命周期、常用指令、事件处理、组件化开发等内容。

1. Vue2 核心概念

1.1 Vue 实例

Vue 实例是 Vue 应用的核心，每个 Vue 应用都必须有一个根实例。创建一个 Vue 实例，通常是通过 new Vue() 来进行：

new Vue({
  el: '#app',  // 绑定元素
  data: {
    message: 'Hello Vue!'
  }
})
  • el：指定 Vue 实例挂载的 DOM 元素。
  • data：Vue 实例的数据对象，里面存储着该实例的数据。

1.2 数据绑定

Vue 使用双向数据绑定，通过 {{}} 来渲染视图。例如：

<div id="app">
  <p>{{ message }}</p>
</div>

在 Vue 实例的 data 中定义 message：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

当 message 变化时，视图会自动更新。

1.3 计算属性（computed）

计算属性用于处理基于数据的动态值，通常用来处理复杂的计算逻辑，计算属性会缓存，只有在依赖的数据变化时才会重新计算。

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

1.4 观察者（watch）

watch 监听数据变化并执行特定的操作。适用于异步或开销较大的操作，例如 API 调用。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed:', newVal);
    }
  }
})

2. Vue2 生命周期

Vue 生命周期是指 Vue 实例从创建到销毁的过程中的一系列操作钩子。常见的生命周期钩子包括：

  • beforeCreate：实例初始化之前，数据和事件都没有设置。
  • created：实例创建完成，数据和事件已经设置。
  • beforeMount：挂载之前，模板尚未渲染。
  • mounted：模板渲染完成，DOM 被渲染到页面上。
  • beforeUpdate：数据变化，视图尚未更新。
  • updated：数据变化，视图更新完毕。
  • beforeDestroy：实例销毁之前。
  • destroyed：实例销毁之后。
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted() {
    console.log('Mounted');
  }
})

3. Vue2 常用指令

Vue 提供了一些指令来处理 DOM 绑定。常见的指令有：

  • v-bind：动态绑定 HTML 特性或属性。 <img v-bind:src="imageSrc">
  • v-model：双向绑定表单控件的值。 <input v-model="message">
  • v-for：循环渲染列表。 <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>
  • v-if：条件渲染。 <div v-if="showMessage">Hello World</div>
  • v-show：通过 CSS 控制显示/隐藏。 <div v-show="isVisible">This is visible</div>
  • v-on：绑定事件监听器。 <button v-on:click="doSomething">Click me</button>
  • v-model：双向绑定输入框。 <input v-model="message" />

4. 事件处理

Vue 使用 v-on 来绑定事件处理器，事件处理器可以是方法或内联代码。

4.1 事件处理方法

&lt;button v-on:click="handleClick">Click me&lt;/button>

&lt;script>
  new Vue({
    el: '#app',
    methods: {
      handleClick() {
        console.log('Button clicked');
      }
    }
  })
&lt;/script>

4.2 修饰符

Vue 还提供了事件修饰符，例如 .prevent，.stop，.capture 等。

  • .prevent：调用 event.preventDefault()，阻止默认事件。
  • .stop：调用 event.stopPropagation()，阻止事件冒泡。
&lt;form @submit.prevent="submitForm">Submit&lt;/form>

5. 组件化开发

Vue 的核心特性之一是组件化开发，组件是可复用的、具有独立状态和行为的 UI 单元。每个组件都有自己的模板、脚本和样式。

5.1 定义组件

在 Vue2 中，可以通过 Vue.component 或在单文件组件（.vue 文件）中定义组件。

// 全局注册一个组件
Vue.component('my-component', {
  template: '&lt;p>{{ message }}&lt;/p>',
  data() {
    return {
      message: 'Hello from component'
    };
  }
});

5.2 组件的使用

使用 my-component 组件：

&lt;div id="app">
  &lt;my-component>&lt;/my-component>
&lt;/div>

5.3 局部注册组件

如果你不想全局注册组件，可以在父组件中局部注册。

new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '&lt;p>{{ message }}&lt;/p>',
      data() {
        return { message: 'Hello from local component' }
      }
    }
  }
});

5.4 父子组件传值（Props 和 Events）

  • 父组件传值给子组件：使用 props 进行数据传递。 <my-component :message="parentMessage"></my-component> Vue.component('my-component', { props: ['message'], template: '<p>{{ message }}</p>' });
  • 子组件向父组件发送事件：使用 v-on 或 $emit 机制。 this.$emit('customEvent', data);

6. Vue Router 与 Vuex（全局状态管理）

6.1 Vue Router

Vue Router 是 Vue.js 官方的路由管理工具，可以帮助你在单页面应用（SPA）中进行页面导航。

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomePage from './HomePage.vue';
import AboutPage from './AboutPage.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  el: '#app',
  template: '&lt;App/>'
});

6.2 Vuex

Vuex 是 Vue 的状态管理库，专门用来集中管理应用的状态。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

new Vue({
  el: '#app',
  store,
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
});

总结

Vue2 是一个功能强大的框架，适合快速构建现代的前端应用。通过以下几个方面的学习，你可以高效地开发 Vue 应用：

  • Vue 实例和数据绑定。
  • Vue 生命周期的理解。
  • 常用指令（如 v-if，v-for，v-bind，v-on）的使用。
  • 组件化开发。
  • Vue Router 和 Vuex 用于管理应用的路由和状态。

这些是 Vue2 的一些基础内容，掌握这些基础之后，你可以开始构建更复杂的应用，学习 Vue3 的新特性，如 Composition API 等。