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. 七夕节 (HDU - 1215) 【简单数论】【找因数】

    七夕节 (HDU - 1215) [简单数论][找因数] 标签: 入门讲座题解 数论 题目描述 七夕节那天,月老来到数字王国,他在城门上贴了一张告示,并且和数字王国的人们说:"你们想知道你们 ...

  2. python3的ExecJS安装使用

    参考官方文档安装 pip3 install PyExecJS 代码编写 import execjs ctx = execjs.compile(""" function a ...

  3. Generating a new SSH key

    Open Git Bash. Paste the text below, substituting in your GitHub email address. $ ssh-keygen -t rsa ...

  4. ubuntu 16.04上源码编译和安装cgal并编写CMakeLists.txt | compile and install cgal on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/39ab7ed9/,欢迎阅读最新内容! compile and install cgal on ubuntu 16.04 Guide ...

  5. idea设置类注释和方法注释

    类注释 1.file-->setting-->editor-->file and code templates-->includes--> file header 2.在 ...

  6. 用友的SPS定义

    基于标准产品的支持服务(Standard Product Support,SPS).主要包括:更新升级(软件补丁更新与产品升级).问题解决(产品问题在线或热线解析).知识转移(用友到客户的知识传递). ...

  7. Ubuntu 安装最新版nodejs

    转自:ubuntu快速安装最新版nodejs,只需2步 第一步,去 nodejs 官网 https://nodejs.org 看最新的版本号: 也就是说此时此刻,12.6.0 是最新的版本,不过你求稳 ...

  8. DevExpress的下拉框控件ComboxBoxEdit怎样绑定键值对选项

    场景 DevExpress的下拉框控件ComboBoxEdit控件的使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1028 ...

  9. Docker基础概念与安装

    Docker是什么? Docker最初是dotCloud公司的创始人Solomon Hyks在法国期间发起的一个公司内部项目,它是基于dotCloud公司多年云服务技术的一次革新,并于2013年3月以 ...

  10. 如何给HTML页面的文本设置字符和单词间距

    设置字符和单词间距介绍 属性名 单位 描述 letter-spacing px 设置字符间距 word-spacing px 设置单词间距 letter-spacing设置字符间距 letter-sp ...