一、学前准备
1. 你需要掌握的前置知识
- HTML / CSS / JavaScript（ES6 重点）
- 基本命令行操作
- 无需 Vue 基础、无需框架基础
2. 环境安装
- 安装 Node.js（自带 npm）
- 安装 Vue 脚手架：
bash
运行
npm install -g @vue/cli
- 检查是否安装成功：
bash
运行
vue --version
二、第一章：Vue2 核心基础
1. 创建第一个 Vue 项目
运行
vue create vue2-demo
选择：Default ([Vue 2] babel, eslint)
进入项目：
运行
cd vue2-demo
npm run serve
2. Vue 实例与模板语法
vue
<template>
<div id="app">
<!-- 插值表达式 -->
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: "欢迎加入vue2"
}
}
}
</script>
3. 指令大全（高频必考）
v-bind:绑定属性（简写:）v-model双向绑定v-if/v-else/v-else-if条件渲染v-show显示隐藏（切换 display）v-for列表渲染（必须加 key）v-on:绑定事件（简写@）v-text/v-html渲染文本 / HTML
示例：
vue
<input v-model="msg" />
<button @click="changeMsg">点击</button>
<div v-if="isShow">显示</div>
<div v-else>隐藏</div>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
</ul>
三、第二章：Vue 数据与方法
1. data 必须是函数
js
data() {
return {
name: "Vue"
}
}
2. methods 方法
js
methods: {
sayHi() {
alert(this.name)
}
}
3. 计算属性 computed（重要）
适合复杂逻辑、有缓存
js
computed: {
reversedMsg() {
return this.msg.split('').reverse().join('')
}
}
4. 侦听器 watch
监听数据变化：
js
watch: {
msg(newVal, oldVal) {
console.log("你变了")
}
}
四、第三章：组件化开发（重要）
1. 组件定义与使用
创建 components/Hello.vue
vue
<template> <div>我是子组件</div> </template>
父组件使用：
vue
<template>
<Hello />
</template>
<script>
import Hello from './components/Hello.vue'
export default {
}
</script>
2. 父传子 props
父组件：
vue
<Child :title="msg" />
子组件：
js
props: {
title: {
type: String,
required: true
}
}
3. 子传父 $emit
子组件：
js
this.$emit('sendMsg', '我是子组件数据')
父组件：
vue
<Child @sendMsg="handle" />
4. 兄弟组件通信
- 事件总线（bus）
- Vuex（推荐）
5. 生命周期（必考）
8 大生命周期：
- beforeCreate
- created （发送请求常用）
- beforeMount
- mounted （DOM 操作）
- beforeUpdate
- updated
- beforeDestroy
- destroyed （清除定时器）
五、第四章：Vue Router 路由
1. 安装
运行
npm install vue-router@3
2. 路由配置
js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: () => import('./views/About.vue') }
]
const router = new VueRouter({ routes })
export default router
3. 路由跳转
vue
<router-link to="/about">跳转</router-link>
<button @click="$router.push('/about')">编程式导航</button>
4. 路由传参
- query：
/user?id=1
5. 路由守卫
全局守卫：
js
router.beforeEach((to, from, next) => {
if(to.path === '/cart' && !token) next('/login')
else next()
})
六、第五章：Vuex 状态管理
1. 安装
运行
npm install vuex@3
2. 五大核心
- state：数据
- mutations：修改数据（同步）
- actions：异步操作
- getters：计算属性
- modules：模块化
3. 基础使用
js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) { state.count++ }
},
actions: {
asyncAdd({commit}) {
setTimeout(()=>{commit('add')},1000)
}
},
getters: {
doubleCount(state) { return state.count*2 }
}
})
使用：
js
this.$store.state.count
this.$store.commit('add')
this.$store.dispatch('asyncAdd')
七、第六章：插槽 slot
1. 插槽 slot
- 普通插槽
- 子组件留一个坑，父组件填内容
- 子组件（Child.vue）
- <template>
<div>
<h3>我是子组件</h3>
<!– 普通插槽：留坑 –>
<slot></slot>
</div>
</template>父组件<template>
<Child>
<!– 填到子组件的 slot 里 –>
<p>我是父组件填进来的内容</p>
</Child>
</template> - 具名插槽
- 子组件留多个坑，每个坑起名字，父组件对号入座
- 子组件（Child.vue）vue<template>
<div>
<!– 头部坑 –>
<slot name=”header”></slot>
<!– 中间坑（默认） –>
<slot></slot>
<!– 底部坑 –>
<slot name=”footer”></slot>
</div>
</template>父组件（Vue2 写法：slot=”名字”）vue<template>
<Child>
<div slot=”header”>
我是头部内容
</div>
<div slot=”footer”>
我是底部内容
</div>
<!– 不写slot就是默认插槽 –>
<div>我是中间内容</div>
</Child>
</template> - 作用域插槽
- 子组件把自己的数据，传给父组件的插槽内容使用
- 子组件（Child.vue）把数据绑在 slot 上：vue<template>
<div>
<!– 子组件把数据传给插槽 –>
<slot :user=”user” :age=”18″></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: “张三” }
}
}
}
</script>父组件（Vue2 写法：slot-scope）vue<template>
<Child>
<!– slot-scope 接收子组件传过来的数据 –>
<template slot-scope=”scope”>
<p>姓名：{{ scope.user.name }}</p>
<p>年龄：{{ scope.age }}</p>
</template>
</Child>
</template>
八、第七章：axios 网络请求
运行
npm install axios
封装请求：
js
import axios from 'axios'
const request = axios.create({
baseURL: 'http://xxx.com/api'
})
request.interceptors.request.use(config=>{
// 请求头加token
return config
})
export default request
九、第八章：Vue 项目工程化与实战
1. 项目结构规范
plaintext
src/
├── api/ 接口
├── assets/ 静态资源
├── components/公共组件
├── router/ 路由
├── store/ vuex
├── utils/ 工具
├── views/ 页面
└── App.vue