导图社区 Vue基础入门
本思维导图梳理了Vue基础入门的知识，共九个章节。分别从开发基础、开发环境、服务器渲染等多个方面进行了整理，帮助学习者使用。
本思维导图展示了刑法学-刑法总则-第十二章《刑罚消灭制度》的详细内容，完整的框架、详尽的内容梳理，帮助学习者更好地了解、学习、复习相关重难点知识。
本思维导图展示了刑法学-刑法总则-第十一章《刑罚执行制度》的详细内容，完整的框架、详尽的内容梳理，帮助学习者更好地了解、学习、复习相关重难点知识。
本思维导图展示了刑法学-刑法总则-第九章《刑罚概述》的详细内容，完整的框架、详尽的内容梳理，帮助学习者更好地了解、学习、复习相关重难点知识。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
Vue基础入门
第1章 Vue基础入门
初识Vue
前端技术的发展
什么是Vue
Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架
Vue的优势
轻量级：Vue简单、直接，所以Vue使用起来更加友好
数据绑定：数据驱动视图，视图也可以驱动数据
指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为
插件：插件用于对Vue框架功能进行扩展
Vue开发环境
Visual Studio Code编辑器
Vue的下载和引入
git-bash命令行工具
Node.js环境
npm包管理工具
Chrome浏览器和vue-devtools扩展
Hello World案例
webpack打包工具
安装webpack
webpack简单使用
构建Vue项目
第2章 Vue开发基础（上）
Vue实例
创建Vue实例
通过new关键字实例化Vue({})构造函数。
el唯一根标签
在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。
data初始数据
Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。
methods定义方法
methods属性用来定义方法，通过Vue实例可以直接访问这些方法
在定义的方法中，this指向Vue实例本身
定义在methods属性中的方法可以作为页面中的事件处理函数使用
当事件触发后，执行相应的事件处理函数
computed计算属性
计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。
watch状态监听
用来监测Vue实例中的数据变动。
filters过滤器
对数据进行格式化。
Vue数据绑定
绑定样式
内置指令
v-model 双向数据绑定
v-on 监听事件
v-bind 单向数据绑定
v-text 插入文本内容
v-html 插入包含HTML的内容
v-for 列表渲染
v-if 条件渲染
v-show 显示隐藏
学生列表案例
Vue事件
事件监听
在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件行为
.capture 事件捕获
.self 将事件绑定到自身，只有自身才能触发
.once 事件只触发一次
Vue组件
什么是组件
在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。
局部注册组件
Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。
template模板
Vue提供了<template>标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到组件内的template属性上，这样就有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。
组件之间数据传递
组件之间的依赖关系：组件之间的数据传递需要借助一些工具（如props属性）来实现父组件向子组件传递数据信息。
组件切换
v-if与v-else ： Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发。
Vue生命周期
钩子函数
beforeCreate 创建实例对象之前执行
created 创建实例对象之后执行
beforeMount 页面挂载成功之前执行
mounted 页面挂载成功之后执行
beforeUpdate 组件更新之前执行
实例创建
页面挂载
数据更新
实例销毁
第3章 Vue开发基础（下）
全局API
Vue.directive
用来注册自定义指令，为DOM元素添加新的特性。
Vue.use
Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。
Vue.extend
Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展
Vue.set
Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。
Vue.mixin
Vue.mixin用于全局注册一个混入，它将影响之后创建的每个Vue实例。
实例属性
vm.$props
使用vm.$props属性可以接收上级组件向下传递的数据。
vm.$options
Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。
vm.$el
vm.$el用来访问vm实例使用的根DOM元素。
vm.$children
vm.$el用来访问vm实例使用的根DOM元素
vm.$root
vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身。
vm.$slots
用于获取插槽（Slots），插槽就是父组件向子组件传递内容。
vm.$attrs
vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。
全局配置
productionTip
打开或关闭生产信息提示信息，默认为打开状态。
silent
silent可以取消Vue日志和警告，silent默认值为false，开启警告功能。
devtools
表示打开或关闭vue-devtools调试工具，默认值为true，表示vue-devtools工具可用。
组件进阶
mixins
mixins是一种分发Vue组件中可复用功能的方式。mixins是一种分发Vue组件中可复用功能的方式。
render
在Vue中可以使用Vue.render()实现对虚拟DOM的操作。
createElement
createElement()函数返回的并不是一个实际的DOM元素，它返回的其实是一个描述节点（createNodeDescription）。
第4章 Vue过渡和动画
过渡和动画基础
什么是过渡和动画
过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。
transition组件
Vue为<transition>标签内部的元素提供了3个进入过渡的类和3个离开过渡的类
自定义类名
自定义类名的优先级高于普通类名，所以能够很好地与其他第三方CSS库结合使用。
使用@keyframes创建CSS动画
@keyframes规则创建动画，就是将一套CSS样式逐步演变成另一套样式，在创建动画过程中，可以多次改变CSS样式，通过百分比或关键词from和to（等价于0%和100%）来规定动画的状态。
钩子函数实现动画
在<transition>标签中定义了一些动画钩子函数，用来实现动画。钩子函数可以结合CSS过渡（transitions）、动画（animations）使用，还可以单独使用。
Vue结合Velocity.js实现动画
多个元素过渡
不同标签名元素过渡
不相同标签名元素可以使用v-if和v-else来进行过渡，下面通过案例演示不同标签名元素的过渡。
相同标签名元素过渡
当有相同标签名的元素切换时，需要通过key特性设置唯一值来标记，从而让Vue区分它们，因为Vue为了效率只会替换相同标签中的内容。下面通过案例演示当有相同标签名button时，使用v-if和v-else设置key值来实现切换。
过渡模式
渡模式的原理是，设置有序的过渡而不是同时发生过渡。在transition中加入mode属性，它的两个值如下所示。
多个组件过渡
什么是多个组件过渡
多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的<component>元素绑定is属性来实现多组件的过渡。接下来通过案例演示如何实现多个组件的过渡。
案例演示
列表过渡
什么是列表过渡
列表的每一项都需要进行过渡，列表在循环时要给每一个列表项添加唯一的key属性值，这样列表才会有过渡效果。在进行列表过渡时，过渡模式不可用，因为不再互相切换特有的元素。
列表的进入和离开过渡
在浏览器中打开，查看页面效果。单击“随机插入一个数字”，单击“随机移除一个数字”按钮。
列表的排序过渡
为了实现列表平滑过渡，可以借助v-move特性。v-move 对于设置过渡的切换时机和过渡曲线非常有用。
列表的交错过渡
在Vue中可以实现列表的交错过渡效果，它是通过data属性与JavaScript通信来实现的。
可复用的过渡
在Vue中，过渡代码可以通过组件实现复用。若要创建一个可复用的过渡组件，需要将transition或者transition-group作为组件模板结构，然后在其内部通过插槽的方式编写列表结构即可。
第5章 Vue路由
初识路由
什么是后端路由
后端路由是由服务器端进行实现，并完成资源的分发（url与资源/数据的对应关系）
什么是前端路由
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。
vue-router
vue-router工作原理
路由的hash模式是利用了window可以监听onhashchange事件来实现的
vue-router基本使用
vue-router可以实现当用户单击页面中的A按钮时，页面显示内容A；单击B按钮时，页面显示内容B。
路由对象属性
this.$router表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此属性获取到路由器对象，并调用其push()、go()等方法。
用户登录注册案例
案例分析
准备工作
代码实现
动态路由
什么是动态路由
动态路由在来回切换时，由于它们都是指向同一组件，Vue不会销毁再重新创建这个组件，而是复用这个组件。
query方式传参
通过query方式传递参数，使用path属性给定对应的跳转路径（类似于GET请求），在页面跳转的时候，可以在地址栏看到请求参数。
params方式传参
使用params方式则不需要通过查询字符串传参，通常会搭配路由的history模式，将参数放在路径中或隐藏。
嵌套路由
什么是嵌套路由
嵌套子路由的关键属性是children，children也是一组路由，相当于前面讲到的routes，children可以像routes一样的去配置路由数组。
嵌套路由案例
命名路由
什么是命名路由
vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在 routes 中给某个路由设置名称name值。
命名路由案例
命名视图
什么是命名视图
在开发中，有时候想同时展示多个同级视图，而不是嵌套展示，则可以在页面中定义多个单独命名的视图。
命名视图案例
编程式导航
router.push()
router.replace()
router.go()
第6章 Vuex状态管理
初识Vuex
什么是Vuex
Vuex是Vue团队提供的一套组件状态管理维护的解决方案。可以方便的实现组件之间的数据共享。
Vuex的下载和安装
【案例】计数器
Vuex状态管理模式
在Vue中，组件的状态变化是通过Vue单向数据流的设计理念实现的。
Vuex配置选项
actions
actions简单使用：dispatch()方法完成状态分发
mutations
mutations选项中的事件处理方法接收state对象作为参数，即初始数据，使用时只需要在store实例配置对象中定义state即可。
getters
getters计算属性：store实例允许在store中定义getters计算属性，类似于Vue实例的computed。
modules
modules用来在store实例中定义模块对象。
Vuex中的API
模块注册
store实例对象提供了动态创建模块的接口
状态替换
store.replaceState()：可以通过store.replaceState()方法实现状态替换。
【案例】购物车
第7章 Vue开发环境
Vue CLI脚手架工具
安装前注意事项
全局安装@vue/cli
使用vue create命令创建项目
GUI创建项目
插件
CLI插件
在Vue CLI中使用了一套基于插件的架构，将部分核心功能插件添加到脚手架Vue CLI中，为开发者暴露可拓展的API以供开发者对Vue CLI的功能进行灵活的使用。
安装插件
CLI服务和配置文件
CLI服务
在Vue项目中需要使用npm run serve指令来启动项目，其中的serve的内容指的就是vue-cli-service（CLI服务）命令，项目的启动需要借助于vue-cli-service来完成。
配置文件
使用Vue CLI脚手架创建的Vue项目一般都是SPA单页面应用，但是在一些特殊的场景下，需要构建多页面应用。
配置多页应用
环境变量和模式
环境变量
Vue CLI 3构建的项目目录中，移除了config和build这两个配置文件，并在项目根目录中定义了4个文件，用来配置环境变量，
模式
development：用于vue-cli-service serve，即开发环境使用
production：用于vue-cli-service build和vue-cli-service test:e2e，即正式环境使用
test：用于vue-cli-service test:unit使用
静态资源管理
使用相对路径引入静态资源
public目录引入静态资源
第8章 服务器端渲染
初识服务器端渲染
客户端渲染与服务器端渲染的区别
服务器端渲染的注意事项
版本要求
路由模式
服务器端渲染的简单实现
创建vue-ssr项目
服务端渲染的实现，通常有3种方式，第1种是手动进行项目的简单搭建，第2种是使用Vue CLI 3脚手架进行搭建，第3种是利用一些成熟框架来搭建（如Nuxt.js）
渲染vue实例
将vue-server-renderer安装完成后，创建服务器脚本文件test.js，实现将Vue实例的渲染结果输出到控制台中，
Express搭建SSR
Express是一个基于Node.js平台的Web应用开发框架，用来快速开发Web应用
Koa搭建SSR
Koa是一个基于Node.js平台的Web开发框架，致力于成为Web应用和API开发领域更富有表现力的技术框架。
webpack搭建服务器端渲染
基本流程
项目搭建
创建项目
配置vue.config.js
编写项目代码
生成vue-ssr-server-bundle.json
Nuxt.js服务器端渲染框架
创建Nuxt.js项目
页面和路由
页面跳转
第9章 “微商城”项目
开发前准备
项目展示
本项目是一个类似淘宝、京东的电商类移动端网站。
技术方案
一个完整的项目分为前端和后端两部分，本书在配套源代码中提供了已经开发完成的前后端项目，后端项目用于提供API进行数据交互。
项目开发流程
一个项目或者产品从开始到上线都要遵循开发流程，这样有利于团队间的协作，能够按部就班地完成。
配置路由
配置Vuex
配置axios
目录结构
商城首页
页面结构
顶部标题栏
轮播图
九宫格展示区域
底部导航栏
新闻资讯
新闻资讯列表
新闻详情
图片分享
图片列表
图片详情
商品购买
商品详情页
购物车
分类列表
页面结构搭建
分类列表结构由左侧菜单栏和右侧菜单栏两部分组成，
better-scroll的运用
better-scroll是基于原生的JavaScript实现的，不依赖任何框架，是一款重点解决移动端各种滚动场景需求的插件（也支持PC端）。
