Vue入坑史,从一个简单的项目说起(二)

前端是一个大坑,因为它入门简单,而越往后越难。越往后学的东西就越多,我现在可能已经意识到了:东西是学不完的。所以我选择回归到它的本质,从基础学起。

上一篇我也不知道瞎扯了一些什么东西,这篇继续瞎扯。

学习要先看到最后的效果

我有一个怪癖,看书喜欢从后往前看。可能我是一个急躁的人,不喜欢前面的拖拖拉拉,没玩没了的细节。学习一个新知识,我就想知道最后的效果,然后再决定是否要回过头来看细节。其实我学习VueReact的时候,我JavaScript都还没搞明白,所以现在也是边接触新的东西,边补JavaScript基础。

说的这里,我觉得也先贴上我的项目的效果图吧。

登录效果

登录效果图

注销效果

注销效果图

聊天效果

这张图有点大,貌似经常加载失败。

聊天效果图

简单的说明一下

我确实是一个比较懒的人,同时我又是一个急躁的人,所以等不及去找应用里的那些图标,想先把效果给做出来,后期可能会补上也可能不会补。

登录和注销可能是个假的,后台不会有任何动作;好吧,聊天可能也是个假的,因为对方可能是个机器人。

没有很炫的效果,也没有很复杂的功能,但该用上的知识几乎都用上了,所以我说这对于初学者还是很有帮助的。首先,有vue-router来实现前端路由,有vuex来管理数据流动,还有vue的过渡动画,有自定义指令directive,有自定义插件,最后还有组件的Slot内容分发。Vue组件开发的思想体现的还算到位。

同时,也可以参考我的另一个完整的项目,尤其是在vuex的使用上更具有参考性。

码字不易,如果你觉得对你有帮助,到GitHub上帮忙star一下,在此先行谢过了。

不聊技术,只谈体会

如果要谈技术,对于初学者我想没有什么比官方文档更好的了,最主要的是它是纯中文啊。当然,以后有时间我会另外写几篇文章,专门分享前端技术方面的知识。

我最开始看到Vue这个词的时候,大约是在去年11月份左右吧,那篇文章主要就是说前端需要学习的东西。在那篇文章中,也看到了像BabelJadeSassLessTypeScriptCoffeeScriptNode.jswebpack等一大堆闻所未闻的新词,这对于只懂HTML+CSS+JS的我瞬间懵逼了。可能也是从那时候起,我才算正式的入了前端这个大坑吧。

Vue与React

对于我这个严重患有选择困难症的人来说,Vue与React之间也是纠结了许久。其实我是先学React的,主要是因为它出自著名的Facebook之手,所以潜意识下就觉得它更牛逼一些。可是React基本上都是英文资料,看起来实在费劲,当时也是花了很多功夫才勉强的写了一个小项目。后面由React又引出了FluxRedux,最受不了的是全部都是英文文档。坚持了一段时间之后,急躁的心有些耐不住性子了,于是就果断放弃转学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,而且也支持一些常用的命令,比如cdrmls等,让命令行用起来更像命令行。如果你在node.js环境下开发项目,那么我强烈推荐这款工具。

说到这里,我也强烈建议使用git来进行项目的版本控制,因为它可以让你有反悔的机会。我之前因为手贱不小心用了rm -rf src/这条命令(本来是想删其他目录的),回车的一瞬间,我的内心是崩溃的(经历过的人才会懂)。src/是源文件目录,也就是说前面写的所有代码全都白费了,而且我的项目当时还没有托管到远程的GitHub上,也没有任何备份。万幸的是我之前用了git版本控制工具,一条命令src/目录原模原样的又回来了。当然,git的用处远不止如此。

后记

又胡扯了一篇,不管你喜不喜欢,都希望你喜欢一下,你的支持是我坚持的动力。现在技术类文章网上一搜也是一大堆,所以我觉得写一些个人经历和心得体会,可能对初学者更有帮助。

后面也会写一些纯技术性的文章,把自己遇到的难题和踩过的坑全部整理出来,尽量让初学者少走一些弯路。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,469评论 25 707
  • 移动端车牌识别是一项基于OCR识别的应用技术。移动端车牌识别过程主要包含五个步骤,其中包括图像采集、图像预处理、车...
    车牌识别王大猫阅读 621评论 0 1
  • 研究对象:刚体 研究方法:实验,分析-归纳-总结基本定律>>>>抽象化数学模型>>>在基本定律的基础上,by逻辑推...
    余味dandelion阅读 611评论 2 0
  • 4.11 中午健身,练到后来觉得肩背有些紧,有些不舒服。用养生功放松,练完就觉得没那么难受了。 明天打算歇一歇,在...
    花儿flora阅读 600评论 0 51