Vue -- 光速入门
作者: DocWhite白先生
序: 由于偶然巧合,笔者即将需要去往上海出差,又恰巧上海那边的前端框架应用的是vue而不是笔者最熟悉的React。导致需要在出发前一两天需要火速熟悉Vue的代码风格,语法规则以及实际运用,本文以自己是如何快速掌握基本的Vue开发能力而展开,Let’s go!
一. 起步
1.1 看 官方文档
学习入门任何语言和框架,最好的老师都是官方文档!但是这里需要注意的是,Vue官方文档中力推的项目启动方式依然是传统的通过引入script标签,往全局环境注入了Vue对象,并由此展开Vue的基本使用。而对于早已习惯用 cli方式(命令行方式一键构建项目的老手来说),这种构建方式无疑过于繁琐。
这里我想强调的不是去看官方文档,而且强调一种看文档的习惯。
1.2 回顾前端开发几个点
(1). HTML => 内部:页面结构,对外:页面之间的互动(仅对应于SPA)
(2). CSS => 样式
(3). JS => 交互
(4). 本地缓存(本文暂不涉及)
作为有经验的前端开发人员在开发过程中的工作内容最频繁最多的是什么?以React为例,绝大部分工作无异于
- 使用一堆UI组件堆出一个页面组件,将组件需要展示的数据与组件属性或状态进行绑定以实现数据变动引发Dom变动,和页面所必要的样式。
- 页面可交互部分的操作逻辑(input的onChange,button的onClick等等)。
- 向服务端请求数据以及提交数据。
- 控制Router页面与页面之间的交互逻辑。
- 使用如Redux等第三方库统一管理页面的状态state(对应Vuex)。
在不考虑代码设计是否合理,以及是否符合规范的前提条件下,大多数情况下,前端er只要能完成前面4项的工作内容就已经算是能够完成工作。
所以在学习任何新框架之前,我会先