项目回顾2-vue的初体验-在已有项目局部使用vue，无须额外配置

当了解到尤大大的vue的时候，就很想在项目里用一下，不过当用了vue cli 创建了一个脚手架之后，感觉现有的项目改造难度太大了，毕竟原来是JQ的。这个项目已经上线，基本功能也完成了，客户提出来后台对项目需要有时间，省市，进度，提交时间的筛选，还有项目名的筛选。后台的同事已经沉溺于其他项目，再拉他回来写api有点麻烦。

于是，我决定把vue嵌入到现有的项目中，并不使用npm，webpack，gulp等家伙，也就不用配置啦，就像以前使用jquery插件一样。

这样的话就很简单了

<script src="../source/js/vue.js"></script>

只用这样引入vue.js就可以开工啦。

一、最基本的结构是

var vm = new Vue({
    el: "#mainBody",//绑定根元素
    data: {
    },
    methods: {

    }
})

二、在vue的生命周期中，我在compiled里去ajax获得数据（很挫的还是用的$.ajax），然后赋值给data里的records。然后在methods里写一个用来筛选城市的方法

var vm = new Vue({
    el: "#mainBody",//绑定根元素
    data: {
        records: [],//数据源
        city: "",
        country: "",
    },
    methods: {
        cityFilter: function(data) {
            if ((vm.city !== "" && vm.city !== "市" && vm.city !== data.city) || 
　　　　　　　　(vm.country !== "" && vm.country !== "县(市、区)" && vm.country !== data.country)) {
                return false
            } else {
                return true
            }
        },
    },
    compiled: function() {
        var self = this;
        $.get('/user/getMyEvent.do', function(data) {//通过ajax获得数据源
            if (data.code == 200) {
                self.records = data.info;
                vm.$nextTick(function() {
                    TablePage(".qu-table", 10);
                })
            }
        })

    }
})

 

<tr v-for="record in records | filterBy cityFilter record  " class="processProgram">
                <td class="programName">{{record.eventName}}</td>
</tr>

三、这样我就可以用v-for循环输出一个列表了，用了filterBy来筛选城市，把单个记录record作为参数传给cityFilter.在这个tr里面，可以将record里的内容通过mustache({{}})直接写进去。

四、这样的话，还需要来监听select的值来更新筛选的条件，也就是data里面的city还有country，这里可以用v-model双向绑定，这样只要select里的值改变，filterBy里的函数

cityFilter的结果就会改变，这样列表就会被更新了。

<select id="s_city" name="s_city" v-model="city"></select>

不过我用这种方式的时候遇到一个问题，就是我的分页插件用的是以前的，dom变化之后，分页插件要重新绑定，这时候就比较麻烦，于是我还是比较不争气的用了jquery的写法

    $("#s_city").on('change', function(event) {
        vm.$data.city = $(this).val();
        vm.$data.country = $("#s_county").val();
        Vue.nextTick(function() {
            $(".bottom-search").empty();
            TablePage(".qu-table", 10);
        })
    });

这样修改数据之后，使用nextTick方法，可以在下一次dom变化完成后有一个回调，我在这里就可以重新绑定这个插件了。

但说到底这样还是太挫了，但毕竟整个项目以前都是jquery的……于是我决定用vue重写一下这个分页，下次分享给大家我重写分页的心得。

今天就分享到这里啦，水平有限，每一次写都是用了洪荒之力啦，请各位大牛手下留情啦

---------------------------------------------------------------------------------------------------------------------------

版权所有：http://www.cnblogs.com/wzls/  五木十架

最近在做一个框选拖拉的jQuery插件，还在完善中，https://github.com/lsbrucelincoln/dragS，虽然jQuery插件貌似落伍了，但是毕竟是小菜鸟呀，学习还是有帮助的，之后希望和大家分享制作的心得