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. flask之请求与响应、闪现（阅后即焚）、请求扩展（before,after）、中间件、LOCAL对象、偏函数、

    目录 1.flask请求与响应 2.闪现 3.请求扩展 4.中间件 5.LOCAL对象 6.偏函数 templates 1.flask请求与响应 from flask import Flask,req ...

  2. WPf 带滚动条WrapPanel 自动换行 和控件右键菜单

    原文:WPf 带滚动条WrapPanel 自动换行 和控件右键菜单 技能点包括 WPf 样式的引用 数据的验证和绑定 比较适合初学者 前台: <Window.Resources> < ...

  3. 乘积量化（Product Quantization）

    乘积量化 1.简介 乘积量化(PQ)算法是和VLAD算法是由法国INRIA实验室一同提出来的,为的是加快图像的检索速度,所以它是一种检索算法,在矢量量化(Vector Quantization,VQ) ...

  4. python进阶之垃圾回收

    内存使用: 程序在运行的过程需要开辟内存空间,比如创建一个对象需要一片内存空间,定义变量需要内存空间.有内存的开辟,势必也要有内存的释放,不然只进不出那不是貔貅了吗?即使有开辟有释放在短期内还是会有垃 ...

  5. Paper | Non-local Neural Networks

    目录 1. 动机 2. 相关工作 3. Non-local神经网络 3.1 Formulation 3.2 具体实现形式 3.3 Non-local块 4. 视频分类模型 4.1 2D ConvNet ...

  6. MS SQL OPENJSON JSON

    前段时间,有写过一个小练习<MS SQL读取JSON数据>https://www.cnblogs.com/insus/p/10911739.html 晚上为一个网友的问题,尝试获取较深层节 ...

  7. Tensorflow分布式部署和开发

    关于tensorflow的分布式训练和部署, 官方有个英文的文档介绍,但是写的比较简单, 给的例子也比较简单,刚接触分布式深度学习的可能不太容易理解.在网上看到一些资料,总感觉说的不够通俗易懂,不如自 ...

  8. python解释器和环境安装

    现在最新的是python3.7下载好安装包:python-3.7.0-amd64.exe下载地址:https://www.python.org/getit/ 选择3.7.0下载 选择一款适合自己的编译 ...

  9. 扎心一问！你凭什么成为top1%的Java工程师？

    目录 1.解决生产环境里的突发故障 2.对棘手的线上性能问题进行优化 3.锻造区别于普通码农的核心竞争力 4.打磨架构设计能力 5.你凭什么成为 top1%?   你工作几年了? 是否天天CRUD到吐 ...

  10. 简单探讨一下.NET Core 3.0使用AspectCore的新姿势

    前言 这几天在对EasyCaching做支持.net core 3.0的调整.期间遇到下面这个错误. System.NotSupportedException:"ConfigureServi ...