• 欢迎访问佰阅部落
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

VUE:新手入门实战笔记及感悟

其他笔记 佰阅 3年前 (2020-04-07) 2172次浏览 0个评论

为啥要学习vue? 因为近一年多,基本是刷屏导致不得不去关注。实际入手后,尤其是是在有了一些python编程经验后,vue的学习入门就非常好理解,总而言之就是跟python写代码的感觉一样,vue是数据驱动的前端开发框架,因此所有的内容都围绕数据展开,上手就容易了。

VUE:新手入门实战笔记及感悟

0.零基础入门笔记

推荐教程:

学完第一个教程,就会对vue的内容绑定、事件绑定的v-textv-htmlv-on;显示切换,属性绑定的v-showv-ifv-bind;列表循环、表单元绑定v-forv-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做后端开发。


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:VUE:新手入门实战笔记及感悟
喜欢 (1)

您必须 登录 才能发表评论!