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

时间: 2024-10-21 11:22:28

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

vue.js 初体验

Vue.js是什么? 一个构建数据驱动的web界面的库.他不是一个全能框架,技术上重点集中在MVVM中的ViewModel层. Vue.js特点? 轻巧.高性能.可组件化 官网地址:http://cn.vuejs.org/ Vue.js初体验 引入Vue.js独立版本, 至官网下载独立版本.根据提示,开发时选择开发版本. 直接引入Vue.js到静态页面中,从数据绑定开始编写DOM部分和js部分 <div id="app"> {{message}} </div>

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

Vuejs http://cn.vuejs.org/ Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. DEMO效果 前端源码 @{ Lay

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

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个

Android Studio初体验之导入eclipse项目

本篇使用到的Android Studio版本为1.0, Eclipse ADT版本22.3.0. 主要介绍两种导入方式: 先用Eclipse导出为Gradle build files,然后直接用Android Studio导入该项目. 用Android Studio 直接导入Eclipse项目. Android Studio默认使用 Gradle 构建项目, Eclipse 默认使用Ant构建项目.建议Android Studio导入项目时,使用 Gradle 构建项目. 导出Eclipse 项

[email&#160;protected]初体验之前篇-回顾[email&#160;protected]创建项目的流程

模拟实际工作中的操作,假如新开启了一个vue项目,可以先看看上篇博文中的git操作,新建空仓库vue-demo,并拉取到本地,创建本地dev分支后 1. 全局安装vue-cli yarn global add vue-cli // 检查是否已安装成功 vue -V // 2.9.6 2. 使用vue init 创建项目,官方提供了6种模板,对于大多数人而言,工作中选择webpack模板 // 使用vue init 创建项目(.指当前目录) vue init webpack . ? Generat

【腾讯Bugly干货分享】基于 Webpack &amp; Vue &amp; Vue-Router 的 SPA 初体验

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,angularjs 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 vue 发展势头更猛,尤其是即将 release 的2.0版本,号称兼具了 angularjs 和 reactjs 的两者优点.不过现在的官方

.NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家介绍.NET平台下的文档型数据库RavenDB,虽然我以前也在小项目用过其他文档型数据库,但问题很多,小项目还可以,大项目就歇菜了.这个数据库我关注了很久,最近一直在看它的文档,所以把知道的先总结下来. .NET开源目录:[目录]本博客其他.NET开源项目文章目录 本文原文地址:http://www

springboot+支付宝完成秒杀项目的初体验

springboot+支付宝完成秒杀项目的初体验 思考的问题: 首先是秒杀的商品查询,考虑到是热点数据,所以写一个接口读取当日批次的秒杀商品到redis中(那么接下来对商品的操作都放入redis中). 当用户抢购商品时,考虑到的是是否在秒杀时间段内以及商品是抢完的问题.首先需要判断该商品是否在秒杀时间内,然后要查询该商品数量是否足够.当然这些还不够,还要有为了防止高并发的解决方案: 对用户限流:对恶意请求通过ip设置访问次数,超过次数则抛出异常. 利用消息队列的异步请求来削峰. 利用redis做

swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入)

项目需求:做一个图片浏览器,点击图片查看大图,大图模式下,左右滚动能查看不同的图片. 项目的主要核心技术:图片的弹出和消失动画 一.对代码进行重构 1.对代码进行抽取划分 1.1 为什么要对代码进行抽取? swift中,代码全部写在一起,阅读性极差 2.如何对代码进行抽取? 2.1在oc中,可以把功能模块抽取一个个方法 2.2swift中,专门提供 extension ,可以对原有的类进行扩展 3.怎么使用extension 抽取代码? 3.1 把一些方法写在extension(扩展)里面,这样