Vue 史上最全学习笔记（2020年1月9日）

目录

✎ VUE学习

◆ VUE学习心路历程

◆ VUE学习视频来源

➀ VUE学习视频百度网盘资源

➁ VUE本笔记学习视频资源

◆ VUE语法

❶ Vue基础语法——模板语法（Three rule of template）

❷ Vue基础语法——创建VUE实例（Create Vue）

❸ Vue生命周期（Vue life）

❹ Vue组件（Components type）

❺ Vue过渡与动画（Vue transition animation）

❻ Vue CLI

➐ Vuex

❽ Vue 实战

➒ Vue 总结

➓ Webpack打包工具

◆ 其他知识

---

✎ VUE学习

◆ VUE学习心路历程

心路历程：2020年的2月份过年回来估计就要进行新项目的开发了，当然还是前后端一起开发，我可是一名JAVA的开发工程师。

      

之前还写了Angular 7.5（北京项目）写了1年的时间，现在为下一个Vue（宁波项目）做好知识储备(┬＿┬)。

Vue 学习01和Vue 学习 02是之前学习的部分内容，学到一半就没有学了，感觉用不上。

现在恨不得知识直接灌顶！！！！！

      

之前学的两节内容，自己都忘记了，zzz撇嘴~，好记性不如打代码实在。

      

◆ VUE学习视频来源

51cto，vue学习视频，讲师杨胜强！！！讲的挺好我自己百度网盘也有另外的学习视频，但是它这个更适合入门级别。

另外的百度网盘分享请期待吧~~~~✿✿✿✿✿✿✿✿

       

➀ VUE学习视频百度网盘资源

PS：注意不是本笔记内容视频哦

➁ VUE本笔记学习视频资源

https://edu.51cto.com/center/course/lesson/index?id=375189（这个是收钱的娃哈哈）

◆ VUE语法

❶ Vue基础语法——模板语法（Three rule of template）

• Vue 学习01——简介和菜鸟级入门【最简单的vue-demo实战】&  "@/utils/x.js"->link

• Vue 学习02——常用模版语法 菜鸟教程【v-if / v-show / v-bind / v-for】

• Vue 学习03——事件处理【v-on / @keydown / 修饰符】

• Vue 表单 —— 表单元素 & watch 监听数据变化 & watch 练习题

❷ Vue基础语法——创建VUE实例（Create Vue）

• Vue 学习04——Vue实例讲解【@blur / computed】

❸ Vue生命周期（Vue life）

• Vue 学习05——Vue生命周期

❹ Vue组件（Components type）

• Vue 学习06——局部/全局组件注册

• Vue 学习07——Vue父子组件通信、非父子组件通信（communication and props）

• Vue 学习08——Vue组件插槽（slot ）

• Vue 学习10——Vue动态组件(:is)（dynamic slot）

❺ Vue过渡与动画（Vue transition animation）

• Vue 学习11——Vue单元素过度

• Vue 学习12——Vue单元素动画

• Vue 学习13——Vue元素过渡

• Vue 动态组件如何实现transition / 如何在vue中进入第三方依赖

• Vue 自定义指令 v-color

❻ Vue CLI

• Vue 学习14——CLI简介（如何新建一个vue项目）

• Vue 学习15——CLI项目结构

• Vue 学习16——CLI路由（路由例子编写）

➐ Vuex

• Vuex操作 / Vuex日志

1. 推荐文章1（15分钟带你入门vuex（vue状态管理）
2. 推荐文章2（Vuex实践）
3. 推荐文章3（Vuex使用logger的日志功能）

❽ Vue 实战

• Vue 学习17（一）——项目实战(杨老师课程)

Ⅰ  vue-cli构建的vue项目中引入stylus文件（）

Ⅱ   使用第三方模块——axios（ajax 请求跨域问题）

Ⅲ   推荐页面-页面结构

Ⅳ   轮播图-插槽实现

Ⅴ   axios Service例子

• Vue 学习17（二）——项目实战(a.vue)

Ⅰ   a.vue基础入门项目实战——（项目初始化、修改根组件、首页页面、三要素基本搭建和json-server）实战01

Ⅱ   a.vue基础入门项目实战——（vue-resource实现Ajax获取信息数据、json-server模拟数据）实战02

Ⅲ   a.vue基础入门项目实战——（超出部分◤省略号...◥ express模拟数据服务）实战03

Ⅳ   a.vue基础入门项目实战——（awesome-vue、image require、slide实现）实战04

➒ Vue 总结

• Vue 学习18 —— VUE打包
• Vue 学习19 —— VUEX实现数据共享

➓ Webpack打包工具

1. 英文官网：https://webpack.js.org/configuration/dev-server（建议看这个）

2. 中文官网：https://www.webpackjs.com/

3. webpack 3 零基础入门教程:http://webpackbook.rails365.net/467005（必看）

4. 设置加速器：https://www.cnblogs.com/nickbai/articles/6249239.html

      加速器必须添加！！！！ （npm config set registry https://registry.npm.taobao.org）

1. 初识 webpack（什么是webpack等）
2. 初识 webpack 配置篇（导入/导出、入口/输出、Loader、Plugins）
3. 初识 webpack bundle.js 四种命名方式（命名长度限制）
4. 初识 webpack 利用stylus将css分离（vue利用stylus分离实战）
5. 初识 webpack 浏览器识别 es6 语法和 css、js 样式分离总结（babel-loader、stylus）
6. 初识 webpack 装饰器@log配置
7. 初识 webpack 安装第三方库（jquery）
8. 初识 webpack 案例（跨域、devtool定位异常、clean、图标文件上传、解析html中的image、制定js或者css或者image添加上域名配置）
9. 初识 webpack 案例（document.write、引用第三方图标、使用template模板打包）
10. 初识 webpack 案例（开发环境中使用 vconsole 和 利用 jsUri 解析 url ）
11. 初识 webpack 案例 （vue执行多个并发请求）[转]
12. 初识 webpack 案例 （vue axios请求封装和Message.xx/Notification.xx)
13. 初识 webpack 案例 （多个entry和output配置、js不同文件的指定引用)
14. 初识 webpack 案例 （source-map和watch的用法)
15. 初识 webpack 案例 （添加版权声明的bannerPlugin)

• webpack常用的插件（必看写的超级棒棒）

◆ 其他知识

1. excel导出