前端是一个大坑,因为它入门简单,而越往后越难。越往后学的东西就越多,我现在可能已经意识到了:东西是学不完的。所以我选择回归到它的本质,从基础学起。
上一篇我也不知道瞎扯了一些什么东西,这篇继续瞎扯。
学习要先看到最后的效果
我有一个怪癖,看书喜欢从后往前看。可能我是一个急躁的人,不喜欢前面的拖拖拉拉,没玩没了的细节。学习一个新知识,我就想知道最后的效果,然后再决定是否要回过头来看细节。其实我学习Vue
或React
的时候,我JavaScript都还没搞明白,所以现在也是边接触新的东西,边补JavaScript基础。
说的这里,我觉得也先贴上我的项目的效果图吧。
登录效果
注销效果
聊天效果
这张图有点大,貌似经常加载失败。
简单的说明一下
我确实是一个比较懒的人,同时我又是一个急躁的人,所以等不及去找应用里的那些图标,想先把效果给做出来,后期可能会补上也可能不会补。
登录和注销可能是个假的,后台不会有任何动作;好吧,聊天可能也是个假的,因为对方可能是个机器人。
没有很炫的效果,也没有很复杂的功能,但该用上的知识几乎都用上了,所以我说这对于初学者还是很有帮助的。首先,有vue-router
来实现前端路由,有vuex
来管理数据流动,还有vue的过渡动画,有自定义指令directive
,有自定义插件,最后还有组件的Slot内容分发。Vue组件开发的思想体现的还算到位。
同时,也可以参考我的另一个完整的项目,尤其是在vuex
的使用上更具有参考性。
码字不易,如果你觉得对你有帮助,到GitHub上帮忙star一下,在此先行谢过了。
不聊技术,只谈体会
如果要谈技术,对于初学者我想没有什么比官方文档更好的了,最主要的是它是纯中文啊。当然,以后有时间我会另外写几篇文章,专门分享前端技术方面的知识。
我最开始看到Vue
这个词的时候,大约是在去年11月份左右吧,那篇文章主要就是说前端需要学习的东西。在那篇文章中,也看到了像Babel
、Jade
、Sass
、Less
、TypeScript
、CoffeeScript
、Node.js
、webpack
等一大堆闻所未闻的新词,这对于只懂HTML+CSS+JS
的我瞬间懵逼了。可能也是从那时候起,我才算正式的入了前端这个大坑吧。
Vue与React
对于我这个严重患有选择困难症的人来说,Vue与React之间也是纠结了许久。其实我是先学React
的,主要是因为它出自著名的Facebook
之手,所以潜意识下就觉得它更牛逼一些。可是React
基本上都是英文资料,看起来实在费劲,当时也是花了很多功夫才勉强的写了一个小项目。后面由React
又引出了Flux
和Redux
,最受不了的是全部都是英文文档。坚持了一段时间之后,急躁的心有些耐不住性子了,于是就果断放弃转学Vue
了。
真正学Vue
就是从今年3月开始的,我不喜欢一点一点的看文档,而是直接上手项目。对我来说,我觉得学习的最好方式就是实践。其实当时也是踩过很多坑,大多数都是环境配置上面的,所以我上篇就建议初学者直接使用官方提供的vue-cli
工具。
Vue是一种新的思想
如果初次接触这种MVVM
的框架,我觉得最重要的就是要理解它的思想,这样学起来才不会很吃力。由于之前学过一段时间的React
,所以对于Vue
的很多知识感觉也是理所当然。其实无论什么框架,很多东西都是相通的,还是那句话,最重要的是思想。
大致的理解:一个界面由很多的模块(组件)构成,组件也就相当于HTML中的一个标签,只不过这个标签的我们自己定义的。所以它(组件)同样具有标签的功能,也就是属性和事件。属性是用来传递参数的,将外部的值传入到组件的内部,然后在组件内部拿到这个值做一些事情。组件是我们自己定义的,就可以完全控制它的样式和状态,还有它的行为(事件)。所以一个组件就可以这样使用:
<!-- my-component 就是一个自定义的组件-->
<my-component value="Hello World!" @myclick="alert('hello')"></my-component>
<!-- 传递一个value参数进去,监听一个myclick事件 -->
对于使用者来说,我们不关心一个组件的内部是如何实现的,我们只关心它实现的功能。就像我们使用原生的input
标签一样,作为一个按钮的时候我们只需要传递一个值进去,然后监听它的点击事件就好了。至于它内部做了些什么,完全不关我们的事。
有一点面向对象的感觉,要干什么,就new
一个对象,通过对象去做,至于这个对象是怎么做到的,我们不关心。可是,这个对象需要我们自己来定义。同样的,Vue中的组件也需要我们自己定义,一旦定义好了,只管拿来用。
别问太多为什么
我想大多数初学者跟我一样,都有一个疑问:我们将自定义的组件直接当做标签一样写在HTML文档中,Vue是怎么做到的?我也很奇怪,但我不会去深究,至少现在这个阶段不会。但我知道,其实在真实的浏览器中,我们写在HTML文档中的组件标签已经按照我们定义的结构替换成了原生的标签。也就是说,在真实的HTML文档中,还是原生的那些标签,只不过Vue通过内部的某种机制将我们写的虚拟标签反应在了真实的HTML文档中。当我们需要更新内容的时候,我们只能改变我们自己定义的虚拟文档结构,然后Vue检测到变化之后,就会将改变的部分通过某种机制重新反应到真实的HTML文档中。
这些是我的一些理解,至于更深的理解,我想我现在应该没那工夫去研究了。对于一个框架,我们拿来用就好了,过于深究其原理实在太累太累。有时候,我们应该学会站在巨人的肩膀上做开发。如果非要问个为什么,我想我可以一直追问到二进制、高低电平、电子电荷的起源……妈呀,太可怕了!
习惯命令行
对于前端开发者来说,当接触到node.js
之后,可能很多时候就不得不使用命令行了,因为很多工具、插件、框架都是基于node.js
的。对于刚接触的人可能不理解,命令行真的很强大,别问为什么,一定要习惯它并且学会一些基本的操作。
记得最开始在学校的时候,老师是叫我们用Dreamweaver
来托拉拽一个网页。后来刚出来工作的时候,我的工具是Webstorm
(好像只有学校的老师才用Dreamweaver
这玩意儿吧)。那时候都是典型的css
+js
目录,index.html
写在根目录。现在,我的工具是Sublime
+命令行。在这里,我要推荐一款Windows下比较好用的命令行工具——Git for Windows。
对于习惯Linux和MacOS的人来说,Windows下的命令行工具实在恶心至极。而这款工具,不仅自带了git
,而且也支持一些常用的命令,比如cd
,rm
,ls
等,让命令行用起来更像命令行。如果你在node.js
环境下开发项目,那么我强烈推荐这款工具。
说到这里,我也强烈建议使用git
来进行项目的版本控制,因为它可以让你有反悔的机会。我之前因为手贱不小心用了rm -rf src/
这条命令(本来是想删其他目录的),回车的一瞬间,我的内心是崩溃的(经历过的人才会懂)。src/
是源文件目录,也就是说前面写的所有代码全都白费了,而且我的项目当时还没有托管到远程的GitHub上,也没有任何备份。万幸的是我之前用了git
版本控制工具,一条命令src/
目录原模原样的又回来了。当然,git
的用处远不止如此。
后记
又胡扯了一篇,不管你喜不喜欢,都希望你喜欢一下,你的支持是我坚持的动力。现在技术类文章网上一搜也是一大堆,所以我觉得写一些个人经历和心得体会,可能对初学者更有帮助。
后面也会写一些纯技术性的文章,把自己遇到的难题和踩过的坑全部整理出来,尽量让初学者少走一些弯路。