为啥要学习 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 做后端开发。