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. react+dva 全局model中异步获取数据state在组件中取不到值

    先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...

  2. 【2019.8.20 NOIP模拟赛 T3】小X的图（history）（可持久化并查集）

    可持久化并查集 显然是可持久化并查集裸题吧... 就是题面长得有点恶心,被闪指导狂喷. 对于\(K\)操作,直接\(O(1)\)赋值修改. 对于\(R\)操作,并查集上直接连边. 对于\(T\)操作, ...

  3. Sharding-JDBC:单库分表的实现

    剧情回顾 前面,我们一共学习了读写分离,垂直拆分,垂直拆分+读写分离.对应的文章分别如下: Sharding-JDBC:查询量大如何优化? Sharding-JDBC:垂直拆分怎么做? 通过上面的优化 ...

  4. javascript中优雅的处理async和await异常

    let handler = async function(needErr) { return new Promise((resolve, reject) => { if (needErr) { ...

  5. Solr java.sql.SQLException: null, message from server: "Host 'xxx' is not allowed to connect to this MySQL server

    在用solr从mysql导入数据的时候,因为linux和本机的数据库不在同一个ip段上, 又因为本地的mysql没有设置远程其它ip可以访问所以就报了如下错误 解决办法: 在mysql任意可以输入查询 ...

  6. 计时 答题 demo

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 禁止页面被复制和禁止右键，一段样式一段JS就行了，无需复杂设定！

    群里小伙伴经常问怎么禁止页面复制和右键,其实这个问题百度一下是很多资料的,我估计小伙伴都懒,所以这里统一回复下: 找到模板里面的</head>,在上面加如下代码就行了 <style ...

  8. Define the Data Model and Set the Initial Data 定义数据模型并设置初始数据

    This topic describes how to define the business model and the business logic for WinForms and ASP.NE ...

  9. HTML学习 day03

    表单 表单   表单:表单域:包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法.     表单控件:(对象.元素):包含了文本框.密码框.隐藏.多行文本框(文本域).复选框.单选框.下拉 ...

  10. MYSQL 复制整个数据库

    同一个服务器 mysqldump old -u root -p123456  | mysql new -u root -p123456 不同服务器(在源数据库服务器上执行) mysqldump old ...