当了解到尤大大的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插件貌似落伍了,但是毕竟是小菜鸟呀,学习还是有帮助的,之后希望和大家分享制作的心得