为啥要学习 vue？ 因为近一年多，基本是刷屏导致不得不去关注。实际入手后，尤其是是在有了一些 python 编程经验后，vue 的学习入门就非常好理解，总而言之就是跟 python 写代码的感觉一样，vue 是数据驱动的前端开发框架，因此所有的内容都围绕数据展开，上手就容易了。
0.零基础入门笔记
推荐教程：
- 1.黑马 VUE 基础教程（B 站有视频https://www.bilibili.com/video/av75420619/）
- 2.杰哥 VUE 实战（B 站有视频https://www.bilibili.com/video/BV157411V7Dh?p=47）
学完第一个教程，就会对 vue 的内容绑定、事件绑定的v-text、v-html、v-on；显示切换，属性绑定的v-show、v-if、v-bind；列表循环、表单元绑定v-for、v-model理解透彻。
学完第二个教程，可以把 webpack、vue 组件概念学的透彻。
小结：当然，学完上述内容，就会新增很多偷懒的技术。
1.学会 Emmet、stylus、pug 语法，从此写代码飞起
通用技能:Emmet 语法
Emmet 是vs-code默认自带的一种快速语法写入操作，有 html、css 的快捷输入操作。比如输入!可以快速生成标准的html模板。具体的快捷操作参考如下地址：
https://docs.emmet.io/cheat-sheet/
小结：虽然 Emmet 语法可以生成非常标准的 html 或 css 内容，但是依旧拜托不了各种标签<>的显示，最终效果是输入的酣畅淋漓，回车后一夜回到解放前。因此就有下面的两种技能，有点yaml语法格式的感觉，这种文档的特点是缩进决定层次属性，所以视觉上非常简洁、易于理解。比如我们常用的docker-compose.yml。
Stylus 语法：让你告别 css 或 scss
先看一段示例：
<style lang="stylus" scoped>
.main-todo
margin 0 auto
width 600px
background-color #ffffff
box-shadow 0 0 5px #666666
.add-todo
width 100%
padding 16px 16px 16px 36px //上右下左侧
font-size 24px
font-weight inherit
font-family inherit
color #000
appearance none
border none //去掉输入边框
outline none //去掉输入限制边框
</style>>这是一种 css 预处理器，你没看错，去掉了各种杂乱的花括号{}、冒号：、分号；可读性非常高。借助于webpack打包技术，仅需设置一次，后面就可以永远使用这种语法来写 css 代码。非常纯粹，同时也支持 css 函数,用这个写几行代码，就会爱上它。
pug 语法：让你的 html 文档也换上上面的效果
同样来看一段示例：
<template lang="pug">
footer.main-footer Power By Baiyue.one
a(href="https://baiyue.one") 佰阅部落
</template>该语法原本是叫jade，后来与某个商业品牌名冲突，所以才改为pug。
可以看出，这些前言技术都有一点yaml文件格式的味道，同时又保留了最基础的样式选择器.app还有 ID 选择器#app这种通用写法。不再有各种杂乱的花括号、冒号和分号，可读性大大提高，理解上也非常方便，再也不用担心横屏显示器不够看一个花括号里的内容了。
2. 新手学习路线推荐
软件： vs-code 推荐理由：微软开源免费项目，插件市场活跃，自带无数 Ai 智能编程插件，通吃几乎所有的语言代码
环境部署： Docker 推荐理由：全终端通吃，无论 mac、windos 还是 linux，容器化环境，迁移、增删改都是毫秒级，且环境唯一
编程语言：python 推荐理由：一切围绕基础的数据类型操作，解释性语言，易于理解
3. 本次学习 VUE 感悟
折腾vue的过程其实挺漫长的，一直没有良心的入门实战教程，所以仅凭官方文档演示很难有感觉，直到 B 站杰哥出的使用webpack+vue从零开始打造前端项目(2020最新版)，才算是完整的理解了vue的强大之处。后面将继续学习 vuex、vue-route 的基础核心，期待今年能完全入门 vue，后面计划用 vue+axios 做前端开发，用 flask+mysql+docker 做后端开发。
