Loading...

如何用Vue打造一个爆款应用

发布者 milleros - 7 个月前

前言

在9102年,没有前端不会用vue,甚至很多后端都开始接手使用vue来搭建后台管理系统,或者一些简单的页面,Vue以他的轻量和高效赢得了大家的青睐。

开篇先来个滑稽,防止你以为这是个正经文章

http-qiniu-milleros-com-emoji-huaji-jpeg

正是因为Vue的普及,越来越多的项目使用Vue作为前端框架,比如bilibili,除此之外,因为移动端(手机)的普及程度还有对HTML、es的支持程度向来都是走在前列的,很多普通岗位上的程序员搭建页面的时候也会首选Vue,哪怕是一个很小的问卷调查。

今天我们就来看看,如何用Vue打造一个爆款应用。

http-qiniu-milleros-com-19-12-24-vrkdzivlciexvcizvmuy4oxiioo5emdd-png

起步

http-qiniu-milleros-com-19-12-24-untitled-png

我们可以看到,Vue文档一打开就已经标明了最好要了解HTML、CSS和JS的中级知识,但是我们也可以选择学习,因为Vue文档写的已经很详尽了,就算你不会前面说的那些中级知识,那么你也可以依葫芦画瓢做出自己想要的页面,但是花费的时间也许会更加的长。

为什么会要求需要中级知识,是因为了解这些知识,我们可以在代码的编写还有项目架构的搭建上,表现的更加的专业,写出质量更好的代码。

当然,看过Vue文档的,都知道我前面说的都是废话,什么专业的架构,质量更好的代码,都是虚的,只要有Vue在手,天下我有

看到这里,大家肯定着急了,这说了半天也没看到你说到底要如何打造一个爆款的Vue应用,不会是一篇水文吧,别着急别着急,大家稍安勿躁,下面我会分情景给大家详细的说一下,各种常见情境下怎么科学的使用Vue。

这篇文章里面写的例子都是我在最近的公司项目代码中发现的,得提前说明一下就是,这个项目是个烂尾项目,之前的开发团队甩手不干了,然后转到我们组来的,这些Vue都是一个敢作敢当的新人加进去的。

检索

这里的场景大概是这样的,在一个弹窗中,有很多分类选项,这些选项可以使用弹窗顶部的搜索框来检索包含特定关键词的选项,检索过程不是本地的,而是要调用接口。

我们先来看看下面这个实现方式,我觉得真的是完美(大概瞟一眼就可以了,看代码后面的解释就行)

<transition-group name="fade">
    <template v-if="!is_searching">
        <div v-for="(value, ikey) in list" class="schoolbox" :key="ikey">
            <p class="type mt-1">{{ikey}}</p>
            <div class="row">
                <div v-for="(v,i) in value" @click="check(v.name,v.id)" class="col-6 pb-2">
                    <div class="label">
                        <if condition="in_cn()">
                            <p>{{v.name}}</p>
                            <p>{{v.english_name}}</p>
                            <else />
                            <p>{{v.english_name}}</p>
                            <p>{{v.name}}</p>
                        </if>
                    </div>
                </div>
            </div>
        </div>
    </template>
</transition-group>

var vm = new Vue({
        el: '#form',
        data: {
            search_name: '',
            list: [],
            school: '',
            school_id: '',
            show_qt: false,
            is_searching: true,
            statusText: '加载中...',
            timer: null
        },
        methods: {
            check(name, id) {
                alertify.closeAll();
                this.show_qt = false;
                this.school = name;
                this.school_id = id;
            },
            showSchQt() {
                alertify.closeAll();
                this.show_qt = true;
                $('#school_name').blur();
                $('#school_name1').show();
                setTimeout(function(){
                    $('#school_name').val('其他学校');
                    $('#school_name1').focus();
                },500);
            },
            search() {
                var that = this;
                this.timer && clearTimeout(this.timer);
                this.timer = setTimeout(function() {
                    that.is_searching = true;
                    $.ajax({
                                    url: 'path/to/get/data',
                                    type: 'post',
                                    dataType: 'json',
                                    data: { name: vm.search_name },
                                    success: function(msg) {
                                        vm.is_searching = false;
                                        vm.statusText = '搜索中...';
                                        vm.list = msg.data;

                                        resizeScroll();
                                    },
                                    error: function(msg) {
                                        layer.alert('网络错误!', { icon: 2 })
                                    }
                                })
                }, 500);
            }
        }
    });

首先我们分析一下这个页面为什么可以这么勇敢的引入Vue,我总结了以下优势:

  1. 页面原本使用JQ,没有用过Vue
  2. Vue可以对输入框做双向绑定
  3. Vue可以对元素直接进行方法绑定
  4. Vue内对数据做修改,会自动同步到Dom树上

我们看看,首先第一个页面原本只使用JQuery来做页面的DOM操作以及渲染,那为了不破坏/夹杂代码到以前的JQ代码中,那当然是引入新的Vue啦,这样我后面修改起来也方便,知道我的代码是哪些;

第二个,Vue可以对输入框做双向绑定,那我就来个双向绑定,那多舒服,省去了JQ的各种绑定监听,方便!

第三个,使用Vue直接做方法的绑定,那多舒服啊,写好所有的方法在methods里面,对着Dom元素就是一顿绑定,特别是配合列表渲染,每个元素都能直接绑定带参数的事件,渲染代码都省了,舒服!

第四个,那就更舒服了,换做用JQ,我没修改一次就得调用JQ对Dom元素做一次修改,那我现在直接修改Vue里面的对应数据就可以了,反正他是自动的

现在我们看完了第一个Vue的例子,对Vue的强大还有方便,已经有了初步的认识,我们看到了Vue的适应性,就算是原先没有引入Vue的页面,哪怕是之前用的是JQ,也能直接引入,根本不存在冲突,方便就Vans了。

选择单选项

这个功能场景是这样的,在退款方式中,有集中选项,当选择其中一种之后,要将页面中的对应退款方式的表单展示出来,下面是业务代码:

http-qiniu-milleros-com-19-12-24-untitled-201-png

http-qiniu-milleros-com-19-12-24-untitled-202-png

针对这个业务场景,我总结了下面的优点:

  1. 页面原本使用JQ, balabala(忘记了可以看看案例一第一条)
  2. Vue可以对元素直接进行方法绑定
  3. Vue内对数据做修改,会自动同步到Dom树上
  4. 代码量少

第一个我就不说了,案例一已经讲过了;

第二个我们看看,这里业务要求对退款方式进行单选,那肯定是每个选项绑定一个处理方法啦,只要把参数传进去,在存储一下当前选中的是哪个就好了,展示的时候直接交给优点3,那多方便啊。

“什么?你说这是大炮打蚊子大材小用啊,我看你是想多了,你看看我这里代码量明显就少啊,你看看你用JQ写,肯定比我多出几十行来!”

http-qiniu-milleros-com-19-12-24-untitled-203-png

我搜索了一下整个项目代码,找到了十处位置用了Vue

http-qiniu-milleros-com-19-12-24-untitled-204-png

基本上每处都是像上面两个例子一样,属于Vue轻量化用到极致,JQuery都自愧不如。

看完Vue之后,我还看到了很多对ES新特性的致敬,使用大量的ES6新特性。

“什么?你说兼容性啊,我在我电脑上都是好好地啊,你看一点问题都没有,你看你的电脑上不是也没问题吗?”

这个图是我在项目中搜索出来使用let关键字的搜索截图。

http-qiniu-milleros-com-19-12-24-untitled-205-png

这个项目是用于给别人报名培训机构用的,可以线上管理自己的课程等操作。那使用的人肯定都很有钱怎么会用辣鸡windows上的IE7/8呢,所以兼容性肯定就不是问题啦,let它能保证变量的作用域,这样就减少了变量相互之间的污染,多方便,比var好用多了,用就vans了

http-qiniu-milleros-com-19-12-24-untitled-206-png

看完这篇文章,相信大家对爆品Vue应用都有了自己的认识,总结下来,Vue带给我们的就是轻量、方便;取代JQuery完全不是问题,用Vue一时爽,一直用一直爽

结语

看完前面说的,是不是觉得Vue真的是这个世界上最好用的前端框架,集成事件绑定、数据绑定、渲染于一身的神级框架,尤雨溪他简直就是个天才,大神。

至于用Vue用到这程度的,写出来的产品那肯定是爆品了,还爆炸了。

尤雨溪是大神我赞同,但是用Vue用成这样的人,你真是个天才。

http-qiniu-milleros-com-19-12-24-untitled-207-png

标签纵览

APP(1)SSH(1)Docker(1)Python(1)VueJS(3)Nodejs(3)Linux(5)前端(11)
Loading...