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