<!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. Java Concurrent happens-before

    happens-before relation on memory operations such as reads and writes of shared variables. The resul ...

  2. 信息安全意识教育日历——By 安全牛

    安全牛:企业即使投入再好的信息安全技术和产品,也难以解决内部威胁以及社会工程等攻击手段,无法做到全面有效地保护企业信息资产.而通过开展员工的信息安全意识培训教育工作,不仅能降低企业风险.满足合规要求, ...

  3. Linux学习笔记—vim程序编辑器

    vi和vim vim是vi的升级版,支持vi的所有指令 vi的使用 vi分为三种模式:一般模式.编辑模式.命令行模式 一般模式 以vi打开一个文件就直接进入一般模式了,这个模式下可以使用上下左右按键来 ...

  4. JVM虚拟机—JVM的类加载机制

    1 什么是类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对象,用来封装类在方法区内的数据结构 ...

  5. Hbase 学习笔记3----操作以及维护

    一,基本命令: 建表:create 'table','t1','t2'       也可以建表时加coulmn的属性如:create 'table',{NAME => 't1', BLOOMFI ...

  6. python的变量类型(Day6)

    Python的变量类型 变量可以指定不同的数据类型,这些变量可以存储整数,小数或字符. 变量赋值 Python 中的变量赋值不需要类型声明 等号(=)用来给变量赋值,等号左边为变量值,等号右边是存储在 ...

  7. 动态更改WebBrowser数据流内容

    动态更改WebBrowser数据流内容       有时,由于软件的特殊需要,我们希望DELPHI在WebBrowser或embeddedwb里动态更改返回的数据内容,而这需要返回网页的所有原始源码, ...

  8. Codeforces Round #396 (Div. 2) D. Mahmoud and a Dictionary

    地址:http://codeforces.com/contest/766/problem/D 题目: D. Mahmoud and a Dictionary time limit per test 4 ...

  9. Nginx 301与302配置

    说明 1.首先看一个完整代码示例,关于nginx 301 302跳转的. 301跳转设置: server { listen 80; server_name 123.com; rewrite ^/(.* ...

  10. centos 6+安装山逗斯骚尅特

    系统支持:CentOS 6+,Debian 7+,Ubuntu 12+ 内存要求:≥128M 关于本脚本 一键安装 Shadowsocks-Python, ShadowsocksR, Shadowso ...