通过二级联动实例，比较Vue.js和原生js/jQuery在设计理念的异同_vue.js制作二级联动菜单总结和心得体会-CSDN博客

本文链接：https://blog.csdn.net/abc701110/article/details/104891413

这段时间，二级联动的例子伴随我们从JavaScript到jQuery，如今学了Vue.js，二级联动的例子又拿出来写了一遍，自己在做网页的时候也会用到，而且一不留神就会写错，今天通过二级联动的实例，比较一下Vue.js和原生js/jQuery的不同。可能说的会有所偏差，但是请原谅一个技术小白水平有限，多多指教哦。

首先，我们先看一下三个版本的二级联动代码：

原生JavaScript

<body>
    大学
    <select id="sltArea">
    </select>
    <select id="sltSchool">
    </select>
</body>

window.onload = function () {
    init();
}
function init(){
    var selector = document.getElementById('sltArea');//选择器：找到将要赋值的select
    var arr = citites;//数据源：循环生成select中option对应的value和innerText
    var option = {var:'cityid',text:'cityname'};//value和innerText与列名之间的对应关系

    //option.val = option['val'];
    setOptionForSelect(selector,arr,option);
    selector.onchange = function(){
        sltSchoolOnChange();
    }
}

function sltSchoolOnChange() {
    var selector = document.getElementById('sltArea');
    var selected = selector.selectedOptions[0].value;
    var newSchools = schools.filter(function (item) {
        return item.cityid == selected;
    })
    var area = document.getElementById('sltSchool');
    area.innerHTML='';
    var data = newSchools;
    var opt = {var:'schoolid',text:'schoolname'};
    setOptionForSelect(area,data,opt);
}
function setOptionForSelect(selector,arr,option){
    for(var i = 0;i<arr.length;i++){
        var opt = document.createElement('option');
        opt.value = arr[i][option.var];//arr[i]['cityid']=>arr[i].cityid;
        opt.innerText = arr[i][option.text];
        selector.appendChild(opt);
    }
}

jQuery

<body>
    大学
    <select id="sltArea">
    </select>
    <select id="sltSchool">
    </select>
</body>

$(document).ready(function () {

   initSelect();
})

var cities = [
    {cityid:0,cityname:'全部'},
    {cityid:1,cityname:'天津'},
    {cityid:2,cityname:'北京'}
]
var schools = [
    {schoolid:0,schoolname:'全部',cityid:0},
    {schoolid:1,schoolname:'天津大学',cityid:1},
    {schoolid:2,schoolname:'南开大学',cityid:1},
    {schoolid:3,schoolname:'北京大学',cityid:2}
]
function initSelect(){


    var selector = $('#sltArea');
    var arr = cities;
    var option = {var:'cityid',text:'cityname'};
    var select = $('#sltSchool');

    setOptionForSelect(selector,arr,option);
    select.html(sltSchoolOnChange());
    selector.bind('change',function () {
        sltSchoolOnChange();
    })
}
function sltSchoolOnChange() {
    var area = $('#sltArea');
    var select = $('#sltSchool');
    var selected = area.val();
    var newSchool = schools.filter(function (item) {
        return item.cityid == selected;
    })
    select.html('');
    var data = newSchool;
    var opt = {var:'schoolid',text:'schoolname'};
    setOptionForSelect(select,data,opt);
}

function setOptionForSelect(select,arr,opt){
    for(var i = 0;i < arr.length;i++){
        var option = $('<option></option>').val(arr[i][opt.var]).html(arr[i][opt.text]);
        select.append(option);
    }
}

原生JavaScript与jQuery版的二级联动是DOM驱动的。首先，初始化左侧select数据及右侧select。其次。当左侧下拉框值变化的时候，去改变右侧的select的值。这些都是DOM操作。

Vue.js

<div id="app">
    <select v-model="cityId" @change="sltChange">
        <option v-for="city in cities" :value="city.cityId">{{city.cityName}}</option>
    </select>
    <select v-model="schId">
        <option v-for="school in rightSchools" :value="school.schId">{{school.schoolName}}</option>
    </select>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            cities: [
                {cityId: 1, cityName: '北京'},
                {cityId: 2, cityName: '天津'},
            ],
            schools: [
                {
                    schId: 1, schoolName: '北京大学', cityId: 1
                }, {
                    schId: 2, schoolName: '天津大学', cityId: 2
                }
            ],
            rightSchools: [],
            cityId: 1,
            schId: 1
        },
        methods:{
            sltChange:function () {
                var that = this;
                this.rightSchools = this.schools.filter(function (item) {
                    return item.cityId == that.cityId;
                })
                this.schId = this.rightSchools[0].schId;
            }
        }
    })

</script>

Vue.js版的二级联动是数据驱动视图。数据和视图分离，使用数据响应式原理，进行双向数据绑定，使我们不用再描述完业务逻辑之后，再去管视图层的数据显示。以二级联动为例，原生Javascript和jQuery在显示第二个select框数据时要先清空之前的数据，而Vue.js就不需要有这个步骤。

至于设计理念，作为一个小白，已经被它们的设计模式弄懵。只是在这里说一下自己的见解。一开始用JavaScript写东西，觉得很不错呀，什么都可以写，JavaScript无所不能，后来“懒”驱使着我们要造轮子了，于是就有了jQuery类库，推而广之，就有了我们的前端模板引擎、前端框架。到了Vue.js这里，我们已经不需要再操作DOM，可以专注于业务逻辑。Vue.js是一套构建用户界面的框架，只关注MVC中的视图层。