<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>使用lodash库减少watch对后台请求的压力</title>

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

    <script src="node_modules/axios/dist/axios.js"></script>

    <script src="node_modules/lodash/lodash.js"></script>

</head>

<body>

<div id="lantian">

    <input type="text" v-model="word"/>

    <h1>

        结果：{{result}}

    </h1>

</div>

<script>

    var app = new Vue({

            el: '#lantian',

            watch: {

                //使用debounce时，需要使用：npm install lodash安装lodash。

                word: _.debounce(

                    function (newV, oldV) {

                        axios.get('9.php?word=' + newV).then(function (response) {

                            console.log(response);

                            app.result = response.data;

                        });

                    }, 3000

                )

            },

            data: {

                word: '',

                result: ''

            }

        })

    ;

</script>

</body>

</html>

　　

010——VUE中使用lodash库减少watch对后台请求的压力的更多相关文章

  1. 10.VUE学习之使用lodash库减少watch对后台请求的压力

    问题描述 使用watch监听库里word的值的变化,获取新值后,用oxios发送的ajax异步请求, 此时会多次发送请求,浪费服务器资料. 解决办法 使用lodash库里的_.debounce函数延缓 ...

  2. Vue 使用lodash库减少watch对后台请求压力

    lodash需要新引入 我使用的是npm方式 使用lodash的_.debounce方法 具体代码: <!doctype html> <html lang="en" ...

  3. 在Vue中使用了Swiper ，动态从后台获取数据的之后，swiper滑动失效？？

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

  4. vue中使用lodash

    1.安装:npm i --save lodash 2.引入:import _from 'lodash' 3.使用: <template> <div class="templ ...

  5. 050——VUE中使用js库控制vue过渡动作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 在vue中使用animate库

    <style> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5) } 100% ...

  7. vue中的金额格式0.00 和 后台返回时间格式带T调整正常格式

    <template> <div class="consumption"> <p>{{payTime|Time}}</p> <p ...

  8. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  9. vue中excel导入导出组件

    vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...

随机推荐

  1. Django的模型层（2）- 多表操作（上）

    一.创建模型 例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一(on ...

  2. linux c编程：读写锁

    什么是读写锁读写锁其实还是一种锁,是给一段临界区代码加锁,但是此加锁是在进行写操作的时候才会互斥,而在进行读的时候是可以共享的进行访问临界区的 为什么需要读写锁有时候,在多线程中,有一些公共数据修改的 ...

  3. PHP使用Mongodb

    一.安装Mongodb的PHP扩展 wget http://pecl.php.net/get/mongo-1.2.7.tgz //下载扩展包tar zxvf mongo-1.2.7.tgzcd mon ...

  4. python学习之路-第七天-python面向对象编程简介

    面向对象编程 在python中,同样是类和对象作为重要的组成部分. 而且在python中基本数据类型如int都是有封装类的,都有自己的方法,应该是和java里面的Integer类似吧 类包括域和方法: ...

  5. mysql-xtrabackup

    使用xtrabackup进行MySQL数据库备份 2013年10月04日 ⁄ MySQL ⁄ 共 11306字 ⁄ 使用xtrabackup进行MySQL数据库备份已关闭评论 ⁄ 被围观 34,116 ...

  6. 前端基础之JavaScript（Day53）

    阅读目录 一.JavaScript基础 二.JavaScript对象 三.BOM对象 一.JavaScript基础 http://www.cnblogs.com/yuanchenqi/articles ...

  7. 企业级web nginx服务优化

    1.1)隐藏nginx header 内版本号信息 [root@aliyun ~]# vi /application/nginx/conf/nginx.conf http{ …… server_tok ...

  8. sqlserver导入excel的电话号码（身份证）变为科学计数解决方式

    如果excel中有一列存的是手机号码或者身份证号码,那么导入到sql中时,会把手机或者身份证当作数字格式对待,因而会以科学记数法的形式存在sqlserver表中,解决方式,先将excel文件另存为文本 ...

  9. vue-cli中的build.js配置文件详细解析

    转载自:https://www.cnblogs.com/ye-hcj/p/7096341.html这是vue-cli脚手架工具的生产环境配置入口 package.json中的"build&q ...

  10. java图像加密

    0 前言 为了保护服务器的图像数据,需要用一个图像加密算法来加密服务器的图像:一开始找了一种基于混沌的图像加密算法,效果还是很理想的,是把矩阵图像上的像素点进行上下左右的混乱:后来发现加密后图像会变大 ...