lodash需要新引入

我使用的是npm方式

使用lodash的_.debounce方法

具体代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js 使用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="ask"><!--vue不能控制body和html的标签-->

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

    <h1>{{result}}</h1>

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        //watch 可以监听多个变量

        watch:{

            //监听word变量

            word:_.debounce(function (newV,oldV) {

                console.log('旧值:'+oldV+'=======>新值:'+newV);

                //这里可以写异步请求我用的是axios

                axios.get('Api.php?word='+newV).then(function (res) {

                    console.log(res,'这是异步返回的值');

                    //这里写异步得到值之后的动作

                    app.result=res.data;

                });

            },3000)

        },

        data:{

            word:'',

            result:''

        }

    });

</script>

</body>

</html>

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

  1. 010——VUE中使用lodash库减少watch对后台请求的压力

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

  3. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  4. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  5. 【转】优秀的Vue UI组件库

    原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...

  6. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  7. Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  8. Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）

    前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...

  9. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

随机推荐

  1. CSP-S需备模板大全

    CSP-S需备模板大全 谨以此文祝愿自己\(CSP-S\,\,2019\,\,\color{red}{RP++!!}\) 算法 二分 while(l<r) { int mid=(l+r+1)&g ...

  2. 向技术领先的华为说No，就是对国家的通信前景说No！

    历史已经证明了,任何一项可以加速人员.物资.能源.金钱.信息迁移的技术,都会让社会原有的生产力成倍地增长.中国在互联网.移动互联网保持令整个世界震惊的飞速发展,以BAT为首的诸多商业帝国建立,还有人们 ...

  3. 反射2-spring boot jpa 注入model即实现查询

    spring boot jpa 使用方法:将对应的model类注入即可// fixed parameter type private Specification<TargetModel> ...

  4. H5双重标题的适配

    在QQ和微信中会自代一个标题栏,而手机浏览器没有标题栏. 因此,我自己写了一个标题栏 <div class="headbar"> <center class=&q ...

  5. SpringBoot系列之profles配置多环境(篇二)

    SpringBoot系列之profles配置多环境(篇二) 继续上篇博客SpringBoot系列之profles配置多环境(篇一)之后,继续写一篇博客进行补充 写Spring项目时,在测试环境是一套数 ...

  6. MyEclipse构建maven项目报错

    直接上图: 这里有三种方案: 1.检查jdk版本:最好换成1.8版本 项目右键-->build path-->configure build Path; 1.2  点击 libraries ...

  7. CodeForces 200D Programming Language

    Recently, Valery have come across an entirely new programming language. Most of all the language att ...

  8. html的特殊符号对照表

    HTML的特殊符号对照表. 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η ...

  9. element UI 调整表格行高

    使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...

  10. PLC与外接按钮开关接线方法图解

    一个电机控制电路如图1所示,电路中使用常开按钮启动电机,用常闭按钮停止电机运行,图1中KM是控制电机电源的继电器.这样的电路若是使用PLC时的外接线图如图2所示.同时为使PLC运行,在PLC中输入由图 ...