vue思路:vue和jquery哪个好?

2019-09-30  本文已影响0人  党云龙

vue和jquery哪个好?


jquery作为风靡一时的js库,其优雅的链式写法和简单粗暴的操作方式——可以说在react和vue出来之前独霸天下。那么vue相比jquery的优势又在哪呢?

根据龙哥这么多年的使用经验:我得出得结论是各有千秋,比如jquery做效果很棒,vue解析数据渲染页面速度快,如果你做的是分离式开发,无疑你需要选择数据解析更强的vue,但是如果你做的是传统的mvc不分离开发,那么建议你选择jquery。这两者在思路上还是有所区别的,比如我们并不能用jquery操作dom的思维去写vue...

例如说我只要制作一个选项卡效果:


一个简单的选项卡
<template>
    <div>
        <div class="tabName">
            <div v-for="(item,index) in tabName" @click="tabgoto(index)" :class="{active:index==tabindex}">{{item}}</div>
        </div>
        <div class="tabBody">
            <p v-for="item in tabtxt[tabindex]">{{item}}</p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'tab',
        data() {
            return {
                tabindex: 0,
                tabName: ["选项卡标题一", "选项卡标题二"],
                tabtxt: [
                    [
                        "循环内容一", "循环内容一", "循环内容一", "循环内容一"
                    ],
                    [
                        "循环内容二", "循环内容二", "循环内容二", "循环内容二"
                    ]
                ]
            }
        },
        methods: {
            tabgoto(index) {
                this.tabindex = index;
            }
        }
    }
</script>
<style lang="less">
    .tabName {
        div {
            display: inline-block;
            margin-right: 20px;
            cursor: pointer;
            background: #eee;
            border: 1px solid #ccc;
            border-bottom: 0;
            padding: 10px;
        }
        .active {
            background: #eee;
            transform: translateY(1px);
        }
    }
    .tabBody {
        border: 1px solid #ccc;
        background: #eee;
        padding-left: 20px;
        width: 400px;
    }
</style>

为什么不使用jquery?


不要用jquery那种dom的思路放到vue中去操作。
vue本身是操作数据的,
例如说,做一个tab选项卡,如果是jquery,我们第一步会想,当前点的那个,从dom中jquery(“#name”)给他找出来,再运行function。
等于是你遍历了两遍dom。效率是非常低的。其实你应该想想,如果你这个操作,只是去比较一下两个数组,是不是效率最起码提高10倍??

转变思路!


可是这样再vue中是行不同的
你要想想,tab其实是一个数组,按照1,0,0,0去排列
1就是展开的那个,
你只要知道当前的active是哪一个就行了,然后判断tab按钮上的1和下面展示内容的1的位置是不是相等,就可以了。
在这个世界中,0和1,就可以创造万物,是最简单的东西创造万物,而不是每个万物都独立,所有一切的东西都有一个最简单的起源。这就是计算机。

上一篇 下一篇

猜你喜欢

热点阅读