【Vue第3章】使用Vue脚手架_Vue2

目录

3.1 初始化脚手架

3.1.1 说明

3.1.2 具体步骤

3.1.3 模板项目的结构

3.1.4 笔记与代码

3.1.4.1 笔记

3.1.4.2 01_src_分析脚手架

3.2 ref与props

3.2.1 ref

3.2.2 props

3.2.3 笔记与代码

3.2.3.1 笔记

3.2.3.2 02_src_ref属性

3.2.3.3 03_src_props配置

3.3 混入

3.3.1 笔记与代码

3.3.1.1 笔记

3.3.1.2 04_src_mixin混入(合)

3.4 插件与scoped样式

3.4.1 笔记与代码

3.4.1.1 笔记

3.4.1.2 05_src_插件

3.4.1.3 06_src_scoped样式

3.5 Todo-list案例

3.5.1 组件化编码流程(通用)

3.5.2 笔记与代码

3.5.2.1 笔记

3.5.2.2 07_src_TodoList案例

3.5.2.3 08_浏览器本地存储

3.5.2.4 09_src_TodoList_本地存储

3.6 Vue中的自定义事件

3.6.1 绑定事件监听

3.6.2 触发事件

3.6.3 笔记与代码

3.6.3.1 笔记

3.6.3.2 10_src_组件自定义事件

3.6.3.3 11_src_TodoList_自定义事件

3.7 全局事件总线

3.7.1 理解

3.7.2 指定事件总线对象

3.7.3 绑定事件

3.7.4 分发事件

3.7.5 解绑事件

3.7.6 笔记与代码

3.7.6.1 笔记

3.7.6.2 12_src_全局事件总线

3.7.6.3 13_src_TodoList_事件总线

3.8 消息订阅与发布

3.8.1 理解

3.8.2 使用PubSubJS

3.8.3 笔记与代码

3.8.3.1 笔记

3.8.3.2 14_src_消息订阅与发布

3.8.3.3 15_src_TodoList_pubsub

3.8.3.4 16_src_TodoList_nextTick(编辑功能)

3.9 过度与动画

3.9.1 效果

3.9.2 vue动画的理解

3.9.3 基本过渡动画的编码

3.9.4 笔记与代码

3.9.4.1 笔记

3.9.4.2 17_src_过度与动画

3.9.4.3 18_src_TodoList_动画


3.1 初始化脚手架

3.1.1 说明

【Vue第3章】使用Vue脚手架_Vue2_第1张图片

Vue脚手架即Vue CLI(command line interface,命令行接口工具,简称脚手架)

3.1.2 具体步骤

【Vue第3章】使用Vue脚手架_Vue2_第2张图片

配置npm淘宝镜像:npm config set registry https://registry.npm.taobao.org

3.1.3 模板项目的结构

【Vue第3章】使用Vue脚手架_Vue2_第3张图片【Vue第3章】使用Vue脚手架_Vue2_第4张图片【Vue第3章】使用Vue脚手架_Vue2_第5张图片

3.1.4 笔记与代码

3.1.4.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第6张图片

3.1.4.2 01_src_分析脚手架

【Vue第3章】使用Vue脚手架_Vue2_第7张图片【Vue第3章】使用Vue脚手架_Vue2_第8张图片【Vue第3章】使用Vue脚手架_Vue2_第9张图片【Vue第3章】使用Vue脚手架_Vue2_第10张图片

3.2 ref与props

3.2.1 ref

【Vue第3章】使用Vue脚手架_Vue2_第11张图片

3.2.2 props

【Vue第3章】使用Vue脚手架_Vue2_第12张图片

3.2.3 笔记与代码

3.2.3.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第13张图片

3.2.3.2 02_src_ref属性

【Vue第3章】使用Vue脚手架_Vue2_第14张图片【Vue第3章】使用Vue脚手架_Vue2_第15张图片

3.2.3.3 03_src_props配置

【Vue第3章】使用Vue脚手架_Vue2_第16张图片【Vue第3章】使用Vue脚手架_Vue2_第17张图片【Vue第3章】使用Vue脚手架_Vue2_第18张图片

3.3 混入

3.3.1 笔记与代码

3.3.1.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第19张图片

3.3.1.2 04_src_mixin混入(合)

【Vue第3章】使用Vue脚手架_Vue2_第20张图片【Vue第3章】使用Vue脚手架_Vue2_第21张图片【Vue第3章】使用Vue脚手架_Vue2_第22张图片【Vue第3章】使用Vue脚手架_Vue2_第23张图片【Vue第3章】使用Vue脚手架_Vue2_第24张图片

3.4 插件与scoped样式

【Vue第3章】使用Vue脚手架_Vue2_第25张图片

3.4.1 笔记与代码

3.4.1.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第26张图片

3.4.1.2 05_src_插件

【Vue第3章】使用Vue脚手架_Vue2_第27张图片【Vue第3章】使用Vue脚手架_Vue2_第28张图片【Vue第3章】使用Vue脚手架_Vue2_第29张图片【Vue第3章】使用Vue脚手架_Vue2_第30张图片

3.4.1.3 06_src_scoped样式

【Vue第3章】使用Vue脚手架_Vue2_第31张图片【Vue第3章】使用Vue脚手架_Vue2_第32张图片【Vue第3章】使用Vue脚手架_Vue2_第33张图片【Vue第3章】使用Vue脚手架_Vue2_第34张图片

3.5 Todo-list案例

快速打开markdown文件插件:Open in External App

【Vue第3章】使用Vue脚手架_Vue2_第35张图片

【Vue第3章】使用Vue脚手架_Vue2_第36张图片

3.5.1 组件化编码流程(通用)

【Vue第3章】使用Vue脚手架_Vue2_第37张图片

3.5.2 笔记与代码

【Vue第3章】使用Vue脚手架_Vue2_第38张图片

3.5.2.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第39张图片【Vue第3章】使用Vue脚手架_Vue2_第40张图片

3.5.2.2 07_src_TodoList案例

【Vue第3章】使用Vue脚手架_Vue2_第41张图片【Vue第3章】使用Vue脚手架_Vue2_第42张图片【Vue第3章】使用Vue脚手架_Vue2_第43张图片【Vue第3章】使用Vue脚手架_Vue2_第44张图片【Vue第3章】使用Vue脚手架_Vue2_第45张图片【Vue第3章】使用Vue脚手架_Vue2_第46张图片【Vue第3章】使用Vue脚手架_Vue2_第47张图片【Vue第3章】使用Vue脚手架_Vue2_第48张图片【Vue第3章】使用Vue脚手架_Vue2_第49张图片

3.5.2.3 08_浏览器本地存储

localStorage

【Vue第3章】使用Vue脚手架_Vue2_第50张图片

sessionStorage 

【Vue第3章】使用Vue脚手架_Vue2_第51张图片

3.5.2.4 09_src_TodoList_本地存储

【Vue第3章】使用Vue脚手架_Vue2_第52张图片【Vue第3章】使用Vue脚手架_Vue2_第53张图片

3.6 Vue中的自定义事件

3.6.1 绑定事件监听

【Vue第3章】使用Vue脚手架_Vue2_第54张图片

3.6.2 触发事件

3.6.3 笔记与代码

3.6.3.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第55张图片

3.6.3.2 10_src_组件自定义事件

【Vue第3章】使用Vue脚手架_Vue2_第56张图片【Vue第3章】使用Vue脚手架_Vue2_第57张图片【Vue第3章】使用Vue脚手架_Vue2_第58张图片【Vue第3章】使用Vue脚手架_Vue2_第59张图片【Vue第3章】使用Vue脚手架_Vue2_第60张图片

3.6.3.3 11_src_TodoList_自定义事件

【Vue第3章】使用Vue脚手架_Vue2_第61张图片【Vue第3章】使用Vue脚手架_Vue2_第62张图片【Vue第3章】使用Vue脚手架_Vue2_第63张图片【Vue第3章】使用Vue脚手架_Vue2_第64张图片【Vue第3章】使用Vue脚手架_Vue2_第65张图片【Vue第3章】使用Vue脚手架_Vue2_第66张图片【Vue第3章】使用Vue脚手架_Vue2_第67张图片

3.7 全局事件总线

3.7.1 理解

【Vue第3章】使用Vue脚手架_Vue2_第68张图片【Vue第3章】使用Vue脚手架_Vue2_第69张图片

3.7.2 指定事件总线对象

【Vue第3章】使用Vue脚手架_Vue2_第70张图片

3.7.3 绑定事件

3.7.4 分发事件

3.7.5 解绑事件

3.7.6 笔记与代码

全局事件总线原理图:

【Vue第3章】使用Vue脚手架_Vue2_第71张图片

3.7.6.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第72张图片

3.7.6.2 12_src_全局事件总线

【Vue第3章】使用Vue脚手架_Vue2_第73张图片【Vue第3章】使用Vue脚手架_Vue2_第74张图片【Vue第3章】使用Vue脚手架_Vue2_第75张图片【Vue第3章】使用Vue脚手架_Vue2_第76张图片

3.7.6.3 13_src_TodoList_事件总线

【Vue第3章】使用Vue脚手架_Vue2_第77张图片【Vue第3章】使用Vue脚手架_Vue2_第78张图片【Vue第3章】使用Vue脚手架_Vue2_第79张图片【Vue第3章】使用Vue脚手架_Vue2_第80张图片【Vue第3章】使用Vue脚手架_Vue2_第81张图片

3.8 消息订阅与发布

3.8.1 理解

【Vue第3章】使用Vue脚手架_Vue2_第82张图片

3.8.2 使用PubSubJS

【Vue第3章】使用Vue脚手架_Vue2_第83张图片

3.8.3 笔记与代码

消息订阅与发布原理图:

【Vue第3章】使用Vue脚手架_Vue2_第84张图片

3.8.3.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第85张图片【Vue第3章】使用Vue脚手架_Vue2_第86张图片

3.8.3.2 14_src_消息订阅与发布

【Vue第3章】使用Vue脚手架_Vue2_第87张图片【Vue第3章】使用Vue脚手架_Vue2_第88张图片

3.8.3.3 15_src_TodoList_pubsub

【Vue第3章】使用Vue脚手架_Vue2_第89张图片【Vue第3章】使用Vue脚手架_Vue2_第90张图片【Vue第3章】使用Vue脚手架_Vue2_第91张图片

3.8.3.4 16_src_TodoList_nextTick(编辑功能)

【Vue第3章】使用Vue脚手架_Vue2_第92张图片

3.9 过度与动画

【Vue第3章】使用Vue脚手架_Vue2_第93张图片【Vue第3章】使用Vue脚手架_Vue2_第94张图片【Vue第3章】使用Vue脚手架_Vue2_第95张图片

3.9.1 效果

【Vue第3章】使用Vue脚手架_Vue2_第96张图片

3.9.2 vue动画的理解

【Vue第3章】使用Vue脚手架_Vue2_第97张图片【Vue第3章】使用Vue脚手架_Vue2_第98张图片

3.9.3 基本过渡动画的编码

【Vue第3章】使用Vue脚手架_Vue2_第99张图片

3.9.4 笔记与代码

3.9.4.1 笔记

【Vue第3章】使用Vue脚手架_Vue2_第100张图片【Vue第3章】使用Vue脚手架_Vue2_第101张图片

3.9.4.2 17_src_过度与动画

【Vue第3章】使用Vue脚手架_Vue2_第102张图片【Vue第3章】使用Vue脚手架_Vue2_第103张图片【Vue第3章】使用Vue脚手架_Vue2_第104张图片【Vue第3章】使用Vue脚手架_Vue2_第105张图片

3.9.4.3 18_src_TodoList_动画

【Vue第3章】使用Vue脚手架_Vue2_第106张图片【Vue第3章】使用Vue脚手架_Vue2_第107张图片【Vue第3章】使用Vue脚手架_Vue2_第108张图片【Vue第3章】使用Vue脚手架_Vue2_第109张图片

你可能感兴趣的:(vue,vue.js,前端)