初识vuejs

转行前端，时间也不短了，也见识到了前端行业的蓬勃发展，以及一些新鲜技术的层出不穷。

由于自身计算机基础的薄弱，更加上一直没有遇上一个公司力推新技术，所以一直以来基本上都是靠着jquery和则zepto行走天涯，也没觉得有什么不妥，再多就是用用一些前端的UI框架，诸如bootstrap，SUI-Mobile。

看着越来越火热的前端mvvm框架代表vuejs，reactjs，angularjs，说不想学，不想懂，必然是虚伪的。但是也一直在克制着。因为有朋友建议，先掌握JavaScript基础，比什么都重要，如果基础牢固，这些框架学起来，真的没那么难。

所以一直坚守着，啃JavaScript的基础，坚持了大概半年时间左右，最开始的计划是到今年下半年，大概七八月份的时候，再开始搞这些mvvm前端框架的，但是架不住计划不如变化，项目组前端组长，在年初的时候，要求大概在年中的时候，我们最起码要在项目中开始使用上这些mvvm框架中的一个。经过几个人的讨论（项目组几个前端都不太懂mvvm框架，基本属于瞎讨论吧^_^），最终决定选用vuejs，至于原因，也没什么好说的，最直接的原因是：据说容易上手。

下面就是开始vuejs的学习了。

我的学习是从看视频开始的（基本上各种技术学习都是从看视频开始的），智能社录制的vuejs，从头到尾看了至少三遍以上，然后就想着是不是找一个小的demo练一下手✋，正好前段时间做了一个移动的活动项目：

这是一个答题的页面，入口是一个按钮，点击之后进入到该页面进行答题，每道题目有10秒钟倒计时，10秒之后，不管有没有做出选择，自动跳转到下一题。在banner上有一个切换的按钮，可以在活动说明和答题页面之间来回切换。今日抢答和我的积分是两个选项卡，可以在答题和积分之间来回切换，在积分页面有兑换奖品的按钮，可以进行各种奖品的兑换，需求就这么一点，是之前的做过的一个项目，这里只是把他用vuejs再走一遍，所以也就直接使用了之前搭建的html页面。使用了SUI-Mobile的UI框架，这里不说任何关于vuejs的语法基础之类的，仅仅描述一下，第一次使用vuejs过程中，遇到的各种痛点。

先烈一下目录结构吧：

在banner上的切换按钮来回切换的时候，遇到了组件之间通信的问题，看视频的时候，老师介绍了可以通过Event.$emit和Event.$on在组件之间相互通信，但是我遇到了这么一个问题，由于我把答题页面和活动说明页面，分别包装成了组件，分为Paper.vue和Desc.vu，这就出现了两个文件之间的组件通信，没办法在任何一个文件（包括App.vue）上定义一个Event = new Vue()以供所有组件使用，中间各种痛苦略去不表，最后才想起来，单独定义一个js文件，即event.js，只有两句代码：

import Vue from "vue"
export default new Vue()

在各个需要用到的.vue文件中直接导入这个模块，就可以共用一个Event了，算是解决了简单组件之间的基本通信问题。

还遇到了一个不知道什么问题的问题，就是选项卡出配置路由

<div class="buttons-tab buttons-bg">
        <router-link to='/paper' class="tab-link button">今日试题</router-link>
        <router-link to='/ranking' class="tab-link button">文曲榜</router-link>
</div>
<router-view></router-view>

然后打开页面调试的时候，点击选项卡，也能够实现路由的跳转，但是很不幸的是，会报错：

就这么个错，各种搜索，然后什么禁止sui-mobile的默认路由之类的，反正各种能想到的方法，都尝试了，实在没办法解决这个报错问题，最后尝试了把路由默认生成a标签改成了span标签，就解决了这个报错问题，虽然解决了问题，可是我还是没明白为什么会报错。

习惯了各种DOM操作，转到vuejs的时候，发现完全可以不用操作DOM，直接操作各种数据即可，思维转换很重要，路还很长，继续努力！