Vue 2 开发指南 - Options API、组件、Vuex、Vue Router 完整教程

vue2 by teachingai/full-stack-skills

207 周安装量

261 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/teachingai/full-stack-skills --skill vue2

Vue JavaScript 框架前端架构

🇨🇳中文介绍

Vue 2 开发指南

概述

本技能提供 Vue 2.x 框架的完整开发指南，包括 Options API、组件系统、路由管理、状态管理（Vuex）、生命周期等核心概念和最佳实践。

核心特性

1. Options API

Vue 2 使用 Options API 组织组件代码。

基本结构 ：

<template>
  <div>
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      message: 'Hello Vue 2',
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}
</script>

2. 响应式数据

data ：定义响应式数据

data() {
  return {
    message: 'Hello',
    count: 0,
    user: {
      name: 'Vue',
      age: 2
    }
  }
}

：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

3. 计算属性和监听器

计算属性 ：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

watch: {
  // 简单监听
  count(newVal, oldVal) {
    // ...
  },
  // 深度监听
  user: {
    handler(newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

组件定义 ：

<template>
  <div>
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: ''
    }
  },
  emits: ['update', 'delete'],
  methods: {
    handleClick() {
      this.$emit('update', this.title)
    }
  }
}
</script>

组件通信 ：

Props：父 → 子
$emit：子 → 父
$parent / $children：父子组件直接访问
$refs：访问子组件实例
Vuex：全局状态管理
EventBus：事件总线

5. 路由管理（Vue Router）

基本配置 ：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

路由使用 ：

<template>
  <div>
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  },
  mounted() {
    console.log(this.$route.params)
  }
}
</script>

6. 状态管理（Vuex）

Store 定义 ：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    INCREMENT(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('INCREMENT')
    }
  }
})

在组件中使用 ：

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

7. 生命周期钩子

export default {
  beforeCreate() {
    // 实例初始化之后，数据观测之前
  },
  created() {
    // 实例创建完成，数据观测完成
  },
  beforeMount() {
    // 挂载开始之前
  },
  mounted() {
    // 挂载完成
  },
  beforeUpdate() {
    // 数据更新时，DOM 更新之前
  },
  updated() {
    // DOM 更新完成
  },
  beforeDestroy() {
    // 实例销毁之前
  },
  destroyed() {
    // 实例销毁完成
  }
}

使用单文件组件（.vue）
合理拆分组件
使用 mixins 复用逻辑

使用 v-if 和 v-show 合理选择
使用 key 优化列表渲染
懒加载路由组件
使用 Object.freeze() 冻结大对象

优先使用 Props 和 Events
复杂状态使用 Vuex
避免过度使用 $parent 和 $children

4. 响应式注意事项

// 添加新属性
this.$set(this.user, 'age', 25)

// 修改数组索引
this.$set(this.items, 0, newItem)

// 修改数组长度
this.items.splice(newLength)

常用工具和插件

Vue CLI ：项目脚手架
Vue Router ：路由管理
Vuex ：状态管理
Element UI ：UI 组件库
Ant Design Vue ：UI 组件库
Axios ：HTTP 客户端

"使用 Vue 2 创建一个计数器组件"
"如何在 Vue 2 中使用 Vuex 进行状态管理？"
"创建一个 Vue 2 项目，使用 Vue CLI"
"Vue 2 的生命周期钩子有哪些？"
"如何在 Vue 2 中实现组件通信？"

Genkit JS 开发指南：AI 应用构建、错误排查与最佳实践

7,700 周安装

Vue 2 开发指南 - Options API、组件、Vuex、Vue Router 完整教程

🇨🇳中文介绍

Vue 2 开发指南

概述

核心特性

1. Options API

2. 响应式数据

相关 Skills

3. 计算属性和监听器

4. 组件开发

5. 路由管理（Vue Router）

6. 状态管理（Vuex）

7. 生命周期钩子

最佳实践

1. 代码组织

2. 性能优化

3. 组件通信

4. 响应式注意事项

常用工具和插件

示例 Prompt

最新 Skills