zoukankan      html  css  js  c++  java
  • 初识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,直接操作各种数据即可,思维转换很重要,路还很长,继续努力!

      

  • 相关阅读:
    nginx+keepalived实现高可用
    zookeeper集群和安装dubbo的管控台
    常见设计模式的解析和实现(C++)
    sed的工作原理(pattern space 和 hold space)
    sed学习笔记
    C++协助破案问题
    C++中extern “C”含义深层探索
    阿里巴巴笔试第28题
    阿里巴巴集团2014校园招聘笔试题(研发工程师--北邮站)
    淘宝数据魔方技术架构解析
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6611029.html
Copyright © 2011-2022 走看看