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

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

联系方式
广告
网站统计

累计发布:211 篇

总点赞量:1322

累计运行:5 年 209 天

建站日期:2018-10-25