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

项目回顾2-vue的初体验-在已有项目局部使用vue,无须额外配置的更多相关文章

  1. vue.js——初体验

    看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...

  2. MVC + Vue.js 初体验(实现表单操作)

    Vuejs http://cn.vuejs.org/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  3. vue.js 初体验— Chrome 插件开发实录

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...

  4. vue.jsc初体验

    Vue 1.安装脚手架 (1)npm install -g vue-cli (2)Vue -v //查看是否安装成功 (3)Vue init webpack name(名称) (4)Npm insta ...

  5. Laravel 5.4+Vue.js 初体验:Laravel下配置运行Vue.js

    生产材料PHP:PHP 5.6+Laravel 5.4:https://github.com/laravel/laravel/releases/Composer:http://getcomposer. ...

  6. Vue+Vuex初体验

    首先: 安装vuex npm install vuex -S 需要有两个组件(HelloWord.vue 和 HelloDemo.vue)[组件自定义] 注册路由 注册store 测试 一.需要有两个 ...

  7. Python+Flask+Gunicorn 项目实战(一) 从零开始,写一个Markdown解析器 —— 初体验

    (一)前言 在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y ...

  8. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  9. vue-cli@3.x初体验之前篇-回顾vue-cli@2.x创建项目的流程

    模拟实际工作中的操作,假如新开启了一个vue项目,可以先看看上篇博文中的git操作,新建空仓库vue-demo,并拉取到本地,创建本地dev分支后 1. 全局安装vue-cli yarn global ...

随机推荐

  1. jquery checkbox checked

    1.question: when first operate the checkbox with sentence like : $("input[type=checkbox]") ...

  2. maven-dependency-plugin插件的使用

    maven-dependency-plugin插件的使用   maven-dependency-plugin是 处理与依赖相关的插件.它有很多可用的goal,大部分是和依赖构建.分析和解决相关的goa ...

  3. mysql 5.7.15发布

    2016-09-06,mysql发布了5.7更新5.7.15,修复的bug数项目之前的版本已经大大减少,说明越来越稳定了.估计再过三四个版本,就会有很多公司开始考虑生产中使用了.

  4. Exchange 2013 申请证书

    最近在了解Exchange2013,Exchange2013相对于Lync安装相对容易一点,安装完成并不代表就可以用了,还要一些基本的配制,首先介绍一下如何从证书服务器申请 CA. 一.DNS 创建解 ...

  5. SAP中获取当前用户相关信息的两个函数

    函数名:TH_USER_LIST作用:可以得到SM04界面显示样式的表. 函数名:TH_USER_INFO作用:可以得到当前特定用户的机器名.当前活动窗口数.IP地址等信息

  6. AutoCAD .NET二次开发(四)

    在CAD中,属性信息一般是以注记的形式存在,但当属性数据内容较多时,显示就成了问题.扩展属性(Xdata)可以解决这一问题,比如南方Cass中就利用了这一点.我们经常用Lisp来读取操作扩展属性. 查 ...

  7. 案例分享:电信行业零售业务CRM架构

    最近跟一个客户讨论销售领域的移动化需求,谈到了他们的零售业务系统的整体框架,觉得很有分享的必要. 这次聊到的客户是电信行业的巨头,说的是他们的零售业务.电信公司么,卖出去的无非是设备和服务.大体的业务 ...

  8. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q63-Q65)

    Question 63You have a SharePoint farm that has more than 100 custom Features.You upgrade several Fea ...

  9. Android动画translate坐标图

    X坐标图示: Y坐标图示:

  10. Effective Java 阅读笔记——方法

    38:检查参数的有效性 每当编写方法或者构造器的时候,应该考虑它的参数有哪些限制,在方法的开头处对参数进行检查,并且把这些限制写入文档. 注意: 对于公有方法,应该使用@throws标签在文档中说明违 ...