导图社区 vue2 学习笔记
- 33
- 0
- 0
- 举报
vue2 学习笔记
这是一篇关于vue2 学习笔记的思维导图，主要内容包括：第一章 简介，第二章 基础学习，第三章 组件化编程、脚手架，TodoList案例，浏览器本地存储，组件之间数据传递，动画效果，配置代理，github获取用户列表案例，插槽，Vuex，路由，UI组件库，组件化编程，基础学习。
编辑于2025-03-11 13:57:06- 基础语法
- vue2 学习笔记
- 相似推荐
- 大纲
Vue3学习
社区资源
官方文档
学习资源
API参考
第三方库
UI框架
辅助工具
社区论坛
问题解答
经验分享;
Vue3与Vue2对比
差异点
响应式系统的改变
Composition API的引入
迁移指南
升级工具
兼容性问题
Vue3新特性
Fragments
支持多个根节点
Teleport
组件内DOM转移
Suspense
异步组件加载
Composition API
更好的逻辑复用
Vue3简介
Vue.js的最新版本
2020年发布
提供新特性与改进
核心功能
响应式系统
组件化开发
虚拟DOM
安装与配置
使用CDN引入
直接在HTML中添加script标签
使用npm或yarn安装
创建Vue3项目
使用Vue CLI
使用Vite
环境搭建
Node.js环境
包管理器配置
基础语法
模板语法
插值表达式
{{ message }}
指令
vbind
vmodel
组件基础
创建组件
使用Vue.extend()
使用单文件组件(.vue)
组件注册
全局注册
局部注册
路由管理
Vue Router安装
npm或yarn安装
路由配置
定义路由
路由组件
导航守卫
全局守卫
路由独享守卫
组件内守卫
Vue3项目实战
项目结构
文件组织
目录结构
组件设计
复用性设计
组件通信
性能优化
代码分割
懒加载
测试与调试
单元测试
端到端测试
Composition API
setup函数
组件的入口
响应式状态管理
响应式引用
ref和reactive的使用
生命周期钩子
onMounted()
onUnmounted()
组合式函数
定义可复用逻辑
setup()中的使用
响应式系统
响应式原理
依赖追踪
依赖收集
响应式API
reactive()
创建响应式对象
ref()
创建响应式引用
computed()
计算属性
watchEffect()
响应式副作用
组件通信
Props传递
父传子
子传父
自定义事件
子组件触发
父组件监听
插槽
默认插槽
具名插槽
作用域插槽
模板语法深入
条件渲染
vif
velseif
velse
列表渲染
vfor
key的使用
事件处理
von
事件修饰符
表单输入绑定
vmodel
vmodel的修饰符
状态管理
Vuex介绍
状态管理库
集中式存储管理
Vuex 5与Composition API
使用setup()管理状态
使用mapActions和mapGetters
Pinia
Vuex的替代方案
更简单的API
VUE学习
基础知识
什么是Vue.js
轻量级JavaScript框架
用于构建用户界面
采用数据驱动的视图更新机制
Vue.js的特点
双向数据绑定
组件化开发
虚拟DOM
易于上手和集成
Vue.js的安装
CDN引入
在HTML文件中通过script标签引入Vue.js
npm安装
使用npm命令行工具安装Vue.js
Vue CLI创建项目
使用Vue CLI快速搭建项目结构
核心概念
模板语法
插值表达式
使用{{}}进行文本插值
指令
vbind用于绑定属性
von用于监听DOM事件
vmodel实现表单输入和应用状态的双向绑定
计算属性
定义依赖响应式数据的属性
缓存机制提高性能
组件系统
创建组件
使用Vue.extend()定义组件结构
使用Vue.component()注册全局组件
组件通信
props向下传递数据
$emit向上发送事件
$refs访问子组件实例
$parent和$children访问父组件和子组件
过渡效果
单元素/组件的过渡
使用<transition>包裹元素或组件
定义enter和leave动画
列表过渡
使用<transitiongroup>包裹列表
列表项的enter和leave动画
进阶特性
混入（Mixins）
复用组件间的代码
混入对象可以包含任意组件选项
自定义指令
创建可复用的DOM操作
钩子函数
bind和inserted用于绑定和插入节点
update和componentUpdated用于更新和组件更新
插件开发
创建Vue插件
提供一个install方法
可以添加全局方法、混入、自定义指令等
工具和生态系统
Vue Router
单页面应用路由管理
动态路由匹配
导航守卫
Vuex
状态管理模式
集中式存储管理应用的所有组件状态
核心概念包括state、getters、mutations、actions
Vue CLI
命令行工具
快速搭建Vue项目
提供项目配置和构建工具
Vue Devtools
浏览器扩展
提供组件调试工具
查看组件层级和状态
实战应用
构建单页应用（SPA）
理解SPA的概念
使用Vue Router构建路由
状态管理实践
使用Vuex管理应用状态
实现状态的持久化存储
服务端渲染（SSR）
使用Nuxt.js实现Vue的SSR
优化首屏加载速度和SEO
性能优化
代码分割和懒加载
使用vonce和vmemo优化渲染性能
使用虚拟滚动处理大量列表数据
社区和资源
官方文档
Vue.js官方文档
提供详细API和指南
学习Vue.js的最佳起点
社区论坛和问答
Stack Overflow
提问和解答Vue相关问题
Vue.js subreddit
分享资源和讨论Vue相关话题
开源项目和示例
GitHub上的Vue项目
学习他人代码和项目结构
官方示例库
提供各种场景下的Vue使用示例
学习资源
在线教程和课程
通过视频和文字教程学习Vue.js
书籍推荐
阅读专业书籍深化理解
博客和文章
关注Vue.js相关博客和文章获取最新动态
尚硅谷Vue3入门
setup函数
setup语法糖
响应式数据
ref
reactive
主题
vue2 学习笔记
第一章 简介
vue 是什么
vue特点
采用组件化模式，提高代码复用率，代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
命令式编码:每个指令都需要自己去实现  声明式编码：只是声明一件事，具体的实现就不用管 
使用虚拟DOM和优秀的Diff算法，尽量复用DOM节点

学习VUE之前要掌握的JS知识
ES6语法规范
ES6模块化
包管理器
npm
yarn
原型、原型链
数组常用方法
axios
promise
安装VUE
直接 <script> 引入
npm
第二章 基础学习
模板语法
插值语法
通常用于标签体里的内容
指令语法
通常用于标签属性 用于解析标签
解析标签属性 v-bind:
简写 : <a v-bind:href="url">学习</a> <a :href="url">学习</a>
数据绑定
v-bind
通常用于元素到页面展示，页面上的变化不需要反作用于元素
v-model
通常用于表单数据的双向绑定
el 与容器绑定的两种写法
我们常用的 el: "#root"
MVVM 模型
M：模型，对应data中的数据
V：试图，模板
VM：试图模型，对应Vue实例对象
数据代理

回顾Object.defineProperty方法
 
通过一个对象代理对另一个对象中属性的操作
vue中的数据代理

事件处理

事件修饰符

prevent
stop
once
常用
capture
self
passive
键盘事件
按键别名

tab是keyup的时候就切换走焦点了，所以要用keydown使用
vue未提供别名的按键，可以根据按键的原始key值去绑定，但注意要转为短横线命名，比如 CapsLock 要转为 caps-lock
系统修饰建

计算属性

属性监视
 
watch 可以监视计算属性和一般属性
深度监视
 
计算属性和属性监视的区别

绑定样式
绑定class，有三种情况

绑定style，两种情况

条件渲染

v-if/v-else-if/v-else
列表渲染

v-for
<li v-for="(p,index) of persons" :key="p.id"> {{p.name}}-{{p.age}}</li>
检测属性变化的原理

检测对象属性的变化
Vue.set的使用
vue中数组中的方法 push/pop/shift/unshit/splice 等方式是封装过的
vm.student.hobby.push 方法和 Array.prototype.push 的方法是不一样的，Vue 会再封装一次实现响应式
数据劫持
收集表单数据

过滤器

过滤器可以串联
内置指令
v-bind
v-model
v-for
v-if
v-show
v-text
写什么显示什么
v-html
支持 html 标签的解析
v-cloak
v-once
v-pre
自定义指令

调用时机
1. 指令与元素成功绑定时(一上来)
2. 指令所在的模板被重新解析时
回调里的方法的 this 就是 Window
生命周期

beforeCreate()
created()
beforeMount()
mounted()
beforeUpate()
updated()
beforeDestroy()
destroyed()
第三章 组件化编程、脚手架
组件
 
非单文件组件
组件嵌套
几个注意点
组件名

VueComponent

vc 和 vm 的区别
vc 和 vm 重要的内置关系
 
使用 Vue 脚手架

安装
npm install -g @vue/cli
vue create test
脚手架默认配置
vue inspect > output.js
脚手架项目文件结构

ref属性

props
不要修改外部传过来的属性

mixins

data 是以组件中的为主，混合是组件中没有才会有效
生命周期函数是两边写的都有效
插件

样式

安装 less-loader
TodoList案例
组件化编码流程(通用)
1. 实现静态组件
定义四个静态组件
2. 展示动态数据
数据类型，名称是什么
数据保存在哪个组件
安装 nanoid
npm i -g nanoid
数据在哪个组件，操作数据的方法也在那个组件里
浏览器本地存储
组件之间数据传递
props 传递
自定义事件
全局事件总线
$bus
实现组件之间的通讯
销毁组件的时候，记得清除注册的自定义事件
消息订阅与发布
npm i pubsub-js
动画效果
配置代理
发送 ajax 的库
原始的 xhr
jQuery
axios
fetch
vue-resource
github获取用户列表案例
插槽
默认插槽
具名插槽
作用于插槽
Vuex
集中式状态管理插件
多组件共享数据
全局事件总线
VueX实现
安装vuex
vue2 要安装 vuex3 npm i vuex@3 -g
什么时候用VueX
多个组件依赖同一状态
不同组件的行为需要变更同一状态
三个角色
Actions
业务逻辑一般都是写在 Actions 中
Mutations
State
数据
简化写法
mapState
mapGetters
mapMutations
mapActions
模块化开发
路由
npm ls vue-router (-g)查看已安装的依赖
npm i -g vue-router@3
vue2 只能使用 vue-router v3 的版本，最新是 v4，但只能在 vue3 中使用
路由组件和一般组件
pages 放置路由组件
components 放置一般组件
注意
路由切换，实际上是销毁组件再重新创建路由到的组件
嵌套路由/多级路由
路由能接收两种参数，路由消息传递
query参数
params参数
注意：路由使用 params 传递参数时，若使用 to 的对象写法，则不能使用 path 配置，只能使用 name 配置
命名路由
简化路由跳转的写法
编程时路由导航
不借助 router-linker 实现路由跳转
<keep-alive> 缓存路由组件
让不展示的路由保持挂载，不被销毁
include 一定要写组件名，组件名
如果不写 include 的，所有展示到这的路由组件都会缓存
两个组件才有的生命周期
activated
deactivated
路由守卫
类似于权限问题
全局路由守卫
前后置路由守卫
独享路由守卫
只有前置守卫
组件内路由守卫
根据路由规则进入，离开的时候才会执行 必须是根据路由规则进入
beforeRouteEnter
beforeRouteLeave
路由器工作模式
hash
history
UI组件库
组件化编程
模块和组件
组件：实现应用中局部功能代码和资源的集合
非单文件组件
创建组件Vue.extend
组件定义不要写el配置项，因为最终所有的组件都要被vm所管理，由vm决定服务于哪个容器
注册组件 Vue.component
全局注册和局部注册
使用组件
VueComponent
vue 实例和 vc 实例的关系，重要的内置关系
VueComponent.prototype.__proto__ === Vue.prototype === vm.__proto__
单文件组件
CLI
command line interface
安装脚手架 npm install -g @vue/cli
yarn global add @vue/cli
脚手架文件结构
修改脚手架默认配置
输出脚手架默认的配置 vue inspect > output.js
https://cli.vuejs.org/zh/config/
ref属性
给原生DOM添加ref标识，得到的就是DOM对象
vc.$refs['name']
给组件打ref标识，得到的就是 vc 对象
给组件写id属性，js 根据id获取到的就是渲染后组件的真实DOM
props
接收 props 的是不能改的
data和props中的属性冲突了，以 props为准
props 会优先接收处理
可以这么处理： props: [ 'age' ], data(){ return { myAge: this.age } } data的 myAge 属性可以从 props 的 age 读取，这就说明，props 属性会比 data 中的属性先被处理，否则 this 获取不到 props 的值
mixin混入
data 中属性以自身为主
生命周期钩子是都要，执行完混入中了再执行自身写的钩子函数
全局混合
插件
style scoped
npm view webpack versions 查看 webpack一共有多少版本
npm i less-loader@7 安装 less-loader 7 版本
浏览器本地存储
localStorage
sessionStorage
自定义事件
组件绑定自定义事件
绑定自定义事件<Student @personalEvent="getStudentName" />
解绑自定义事件
谁触发的事件，事件回调方法里的this就是谁
全局事件总线
beforeCreate(){}
消息订阅与发布
第三方库 pubsub-js
npm i pubsub-js 并非插件，而是第三方库，直接引入即可
注意发布订阅回调里 this 的指向
nextTick
其指定的回调会在指定的DOM节点更新完毕之后再执行
配置代理
vue-resource
插件库
插槽
在 app 解析完成之后再插入到子组件中的，所以样式要写到 app 中，把样式写子组件实际上也可以
具名插槽
<slot name="center">我是默认值</slot>
<img slot="center" src="" alt="delicious food"/>
作用域插槽
由子组件传递数据到提供插槽内容的组件(app)
<slot :games="games" :msg="msg">传递数据
<template scope="content">接收数据
vuex
集中式状态管理插件
多组件数据共享状态
使用场景
多个组件依赖于某一数据同一状态
来自不同组件的行为需要变更同一状态
原理
三大组件，由一个东西去领导，一般叫做 store

Actions(服务员)
dispatch(actionName, param)
业务逻辑可以在这里处理
Mutations(后厨)
commit('mutationKey', param)
State(菜)
Getters
准备getters用于加工state
使用
安装 npm i vuex@3
使用插件
vm 有个 $store 属性
创建store
$store.dispatch方法
$sotre.commit方法
方法加工器
引入 import { mapState, mapGetters, mapMutations, mapActions} from 'vuex';
mapState
sum(){ return this.$store.state.sum }
mapGetters
mapMutations
decrement(){ this.$store.commit('DECREMENT', this.n); }
mapMutations({ increment: 'INCREMENT' })
注意生成的方法的参数
mapActions
多组件数据共享
模块化编码
new 一个模块化的 store
new Vuex.Store({ modules:{ count, person } });
要从 state 模块化读取数据，要开启 namespaced: true
this.$store.state.count.sum
this.$store.dispatch('person/addPersonServer')
this.$store.commit('person/ADD_PERSON', perObj);
this.$store.getters['person/firstPersonName']
基础学习
vue 特点
采用组件化模式
声明式编码，编码人员无需直接操作DOM
相对于命令式编码
使用虚拟DOM，优秀的diff算法，尽量复用DOM节点
小案例
模板语法
插值语法
指令语法
v-bind:
v-model
只能应用在表单类元素上
v-on:
v-if:
v-show
v-text
v-html
危险行为
v-cloak
js阻塞
v-once
只渲染一次
v-pre
加快模板的编译
理解MVVM
数据代理
数据劫持
通过一个对象访问另一个对象的属性
事件处理
接受 vue 的管理
捕获阶段，冒泡阶段
事件修饰符
修饰符可以连续写
键盘事件
一般使用 keyup
键盘事件有个 keyCode 表示按的是哪个按键
计算属性
监视属性
vue 监测数据改变的原理
Observer
Vue.set
自定义指令
生命周期
init阶段
生命周期，事件，但数据代理还未开始
beforeCreate
不能通过 vm 访问 data 和 methods
数据监测，数据代理
created
可以通过 vm 访问 data 和 methods
编译 el: '#root'模板，生成虚拟DOM
挂载阶段
beforeMount
将虚拟DOM转成真实DOM
mounted
vue完成模板解析并把初始的真实dom元素放入页面后
只调用一次
活动阶段
beforeUpdate
数据更新了，页面还没更新
updated
销毁阶段
vm.$destory() 调用这个方法就开始销毁
beforeDestory
还能访问到vm的data和methods，但对数据的操作并不会更新，做一些收尾工作(销毁定时器，取消订阅，解绑事件等)
destoryed
还有三个生命周期钩子
两种模块化技术
common
es6
暴露方式
统一暴漏
分别暴露
默认暴露
vue2
基本语法
安装 yarn/相关命令
npm install -g yarn
yarn --version
yarn config get registry
yarn config set registry https://registry.npmmirror.com
npm uninstall yarn
yarn install
yarn serve
yarn build/yarn run build
脚手架
使用命令
yarn global add @vue/cli
vue --version
vue create {project-name}
yarn serve
项目目录介绍

组件化开发和根组件
组件包含三部分
template
style
script
组件支持 less
style 标签 lang='less' 开启功能 安装包： yarn add less less-loader yarn add less less-loader -D 安装依赖，只开发的时候使用
普通组件
局部注册
全局注册
Vue.component('HmButton', HmButton)
组件
样式
全局样式
局部样式
scoped 只对当前组件生效
给当前组件的所有元素都添加一个自定义属性，css 选择器后面，自动处理，添加了属性选择器
一个组件的 data 选项必须是一个函数
保证每个组件实例，维护独立的一个数据对象
组件通讯
父传子 props
props: ['title', 'name']
prop
组件上注册的一些自定义属性，向子组件传递数据
校验
类型校验
非空校验
默认值
自定义校验
prop 和 data 的区别
单向数据流：父组件的数据更新，会单向的向下流动，影响子组件
data 的数据是自己的，随便改
prop 的数据是外部的，不能随便改，如果要改，谁的数据谁负责
子传父 事件
子组件发送消息通知：this.$emit('changeTitle', 'content') 父组件对消息进行监听： <Son :title="myTitle" @changeTitle='handlerChange'></Son> 父组件提供处理函数：handleChanger(){}
1. 通过 $emit，向父组件发送消息通知
2. 父组件对消息进行监听
3. 父组件提供处理函数
provide/inject
provide() { return { color: color, info: { } } } 接收数据 inject: ['color', 'info']
简单类型非响应式的
复杂类型是响应式的(推荐)
ToDo 案例
深度监视并存储到本地localstorage
在组件模板中获取方法的形参：$event
v-model 原理
value 和 input 事件
修饰符 sync
属性名 :name
事件 update:name
:name.sync 简化
自定义指令
路由
单页面应用程序 SPA
一种映射关系
路由的基本使用
下载yarn add vue-router@3.6.5
引入 import VueRouter from 'vue-router'
安装注册
创建路由对象
注入，将路由对象注入到 vue 实例中建立联系
创建需要的组件，配置路由规则
组件分类
页面组件
复用组件
声明式导航
跳转传参
查询参数传参
模板中使用 $route.query.key 获取传递的参数
动态路由传参
编程式导航
路由重定向
path: '/', redirect: '/home'
路由 404
配置路由最后
path: '*' 前面不匹配就命中最后这一个路由 
模式设置
hash 路由
history 路由
首页动态渲染
axios
安装 axios
确认接口文档
请求数据
动态渲染
api 接口模块