【Vue的深入学习（重点：限流函数）】

已于 2022-08-07 09:42:00 修改
阅读量451 收藏
点赞数
分类专栏： Vue框架 文章标签： vue.js 学习 javascript
于 2022-08-01 22:21:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46839072/article/details/126103918
版权

目录

一、Vue实例的属性和方法

1、什么是Vue实例

Vue实例:又称为Vue组件

(1)Vue2.0创建Vue组件的方法：

new Vue({…})

☀️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue2版本加速器 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>

    <script>
        new Vue({ //Vue2版本
            el:'#app',//挂载元素
            data:{
                msg:'西安邮电大学'
            },
            method:{

            }
        })
    </script>
</body>
</html>

在这里插入图片描述

(2)Vue3.0创建Vue组件的方法：

Vue.createApp({…})

有两种写法：
方式一（不太推荐）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">{{ count }}</div>
    <script>
        const obj = {}
        Vue.createApp({
            data(){
                return{
                    count:120
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

方式二（推荐，很清晰）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">{{ count }}</div>
    <script>
        const obj ={
            data(){
                return {
                    count:120
                }
            }
        }
        let instance = Vue.createApp(obj).mount('#app') //instance就是Vue组件
    </script>
</body>
</html>

在这里插入图片描述

2、Vue组件的属性

(1)存储属性(data)：是一个函数。在组件创建时会调用此函数来构建响应性的数据系统。是组件的存储属性。

获取该属性值的方式：

Vue组件名.变量名
Vue组件名.$data.变量名
本质是访问的同一个数据块

☀️看个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">{{ count }}</div>
    <script>
        const obj ={
            data(){
                return {
                    count:120
                }
            }
        }
        let instance = Vue.createApp(obj).mount('#app') //instance就是Vue组件
        console.log(instance.count)
        console.log(instance.$data.count)

    </script>
</body>
</html>

在这里插入图片描述

(2)计算属性(computed)：通常可以将存储属性的值直接渲染到html的元素上。在有些场景下存储属性的值不适合直接渲染，需要处理之后再进行渲染。在Vue中使用计算属性对数据进行再处理.

注意：

a、存储属性主要用于数据的存取，我们可以通过赋值运算来修改它的属性值。通常,计算属性只用来取值,不会用来存值,因此计算属性默认提供的是取值方法(get方法);计算属性也可以通过赋值进行存数据,但是存数据的方法需要手动实现(set方法)

b、当使用计算属性时,默认调用get方法(该方法不能显式调用)， 当给计算属性赋值时,调用的是set方法(该方法不能显式调用)

☀️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
          <div>{{ type }}</div>
          <button @click="add">Add</button>
    </div>
    <script>
        const obj={
            data(){
                return {
                    count:0
                }
            },
            //定义计算属性
            computed:{
            // type(){  //默认只能计算属性type取值
            //   return this.count>10?"大":"小"
            // }
            type:{
                get(){//实现计算属性type的set方法，用来取计算属性type的值
                    return this.count>10?"大":"小"
                },
                set(newVal){//实现计算属性type的set方法，用来设置计算属性type的值
                   if(newVal=='大'){
                    this.count = 11
                   }else{
                    this.count = 0
                   }
                }
            }
        },
            methods:{
                add(){
                     this.count++
                }
            }
        }
        let instance =Vue.createApp(obj).mount('#app')
        console.log('count='+instance.count)
        console.log('type='+instance.type)

        instance.type = '大'
        console.log('count='+instance.count)
    </script>
</body>
</html>

在这里插入图片描述

(3)侦听属性(属性侦听器)：可以方便的监听某个属性的变化,以完成复杂的业务逻辑。在Vue中的属性侦听器是watch。

☀️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://unpkg.com/vue@next"></script>
<body>
    <div id="app">
        <input type="text" v-model="searchText">
    </div>
    
    <script>
        const obj = {
            data(){
                return {
                    searchText:''
                }
            },
            // 定义属性侦听器
            watch:{
                searchText(oldText,newText){
                    if(newText.length > 10){
                        alert('文本内容太长')
                    }
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

在这里插入图片描述

(4)定义方法的属性(methods)：在该属性下定义Vue组件的函数

3、Vue组件的函数(限流)

(1)限流函数：

a、限流场景：

场景1：点击按钮向服务器发起数据请求,在请求的数据回来之前多次单击按钮是无效的且会消耗资源。
场景2：页面中某个按钮会导致页面的刷新，我们需要限制用户对该按钮进行频繁的操作。

b、限流函数

限流函数：在指定的时间间隔内不允许重复执行同一个函数

示例：页面中有一个按钮,单击按钮后在控制台输出当前的时间，要求这个按钮的两次事件触发间隔不能小于2秒

代码段如下（没有封装之前）：

<script src="https://unpkg.com/vue@next"></script>

<body>
    <div id="app">
        <button @click="myClick">按钮</button>
    </div>
    <script>
      const obj={
        data(){
            return{
            throttle:false
            }
        },
        methods:{
            myClick(){
                if(!this.throttle){
                    console.log(Date())
                }else{
                    return
                }
            this.throttle = true
            setTimeout(()=>{
               this.throttle= false
            },2000)
          }
        }
      }
      Vue.createApp(obj).mount('#app')
    </script>  
</body>

间隔2秒，响应一次，输出一次日期：

在这里插入图片描述

将限流的逻辑封装成单独的工具方法 ----- 一次编写多次使用

代码段如下：

 <script src="https://unpkg.com/vue@next"></script>
<body>
    <div id="app">
        <button @click="myClick">按钮</button>
    </div>
    <script>
        var throttle = false
        function throttleTool(callback,timeout){限流的工具函数
                        if(!throttle){
                            callback()
                        }else{
                            return
                        }
                        throttle = true
                        setTimeout(()=>{
                            throttle = false
                        },timeout)
                    }
          
            const obj = {
            data(){
                return{
                
                }
            },
            methods:{
                myClick(){
                   throttleTool(()=>{
                    console.log(Date())
                   },2000)
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>

间隔2秒，响应一次，输出一次日期：

在这里插入图片描述

(2)使用Lodash库进行函数限流：是一款高性能的JavaScript实用工具库。提供了大量的数组、对象、字符串等边界的操作方法,使开发者更简单的使用JavaScript。在Lodash库中提供了debounce函数进行方法的限流。

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>

☀️还是上面的例子：

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>

<body>
    <div id="app">
        <button @click="myClick">按钮</button>
    </div>
    <script>
        const obj = {
            data(){
                return{
                
                }
            },
            methods:{
                myClick:_.debounce(function(){
                    console.log(Date())
                },2000)
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

间隔2秒，响应一次，输出一次日期：

在这里插入图片描述

二、表单数据的双向绑定：v-model

1、单行文本框的绑定：

<script src="https://unpkg.com/vue@next"></script>
<body>
   <div id="app">
    <input type="text" v-model="signleText">
    <br><br>
    <p>文本框输入的内容是：{{ signleText }}</p>
  </div> 
   <script>
    const obj = {
        data(){
            return{
                signleText:''
            }
        }
    }
    Vue.createApp(obj).mount('#app')
   </script>
</body>
</html>

单行文本框

2、多行文本区的绑定：

<script src="https://unpkg.com/vue@next"></script>
<body>
   <div id="app">
     <textarea rows="10" cols="30" v-model="textarea"></textarea>
    <br><br>
    <p>文本区输入的内容是：{{ textarea }}</p>
  </div> 
   <script>
    const obj = {
        data(){
            return{
                textarea:''
            }
        }
    }
    Vue.createApp(obj).mount('#app')
   </script>
</body>
</html>

文本区

3、复选框的绑定：

复选框的绑定：多个复选框绑定的变量名要相同,并且是数组类型的

<script src="https://unpkg.com/vue@next"></script>
<body>
   <div id="app">
     <input type="checkbox" v-model="checkbox" value="足球" name="hobby">足球
    <input type="checkbox" v-model="checkbox" value="蓝球"name="hobby">蓝球
    <input type="checkbox" v-model="checkbox" value="排球"name="hobby">排球
   <br><br>
   <p>你的选择是：{{ checkbox }}</p>
  </div> 
   <script>
    const obj = {
        data(){
            return{
               checkbox:[],//因为复选框要选择多个，所以选择数组
            }
        }
    }
    Vue.createApp(obj).mount('#app')
   </script>
</body>
</html>

在这里插入图片描述

4、单选按钮的绑定：

<script src="https://unpkg.com/vue@next"></script>
<body>
   <div id="app">
  <input type="radio" v-model="radio" value="男">男
   <input type="radio" v-model="radio" value="女">女
   <br><br>
   <p>你的选择的性别是：{{ radio }}</p>
  </div> 
   <script>
    const obj = {
        data(){
            return{
               radio:'',//因为单选框只能选择一个，所以选择字符串
            }
        }
    }
    Vue.createApp(obj).mount('#app')
   </script>
</body>
</html>

在这里插入图片描述

5、下拉列表框的绑定：

<script src="https://unpkg.com/vue@next"></script>
<body>
   <div id="app">
  <select v-model="select" multiple>
    <option value="A">AAAAA</option>
    <option value="B">BBBBB</option>
    <option value="C">CCCCC</option>
    <option value="D">DDDDD</option>
   </select>
   <br><br>
   <p>你的选择是：{{ select }}</p>
  </div> 
   <script>
    const obj = {
        data(){
            return{
               select:[]
            }
        }
    }
    Vue.createApp(obj).mount('#app')
   </script>
</body>
</html>

下拉列表

6、常用的两个修饰符

(1)lazy：懒加载。当输入框失去焦点时再将输入框和变量进行绑定。

<script src="https://unpkg.com/vue@next"></script>
<body>
   <div id="app">
    <input type="text" v-model.lazy="signleText">
    <br><br>
    <p>文本框输入的内容是：{{ signleText }}</p>
  </div> 
   <script>
    const obj = {
        data(){
            return{
                signleText:''
            }
        }
    }
    Vue.createApp(obj).mount('#app')
   </script>
</body>
</html>

lazy

(2)trim：去掉绑定的文本数据前后的空格


<script src="https://unpkg.com/vue@next"></script>
<body>
   <div id="app">
     <textarea rows="10" cols="30" v-model.trim="textarea"></textarea>
    <br><br>
    <p>文本区输入的内容是：{{ textarea }}</p>
  </div> 
   <script>
    const obj = {
        data(){
            return{
                textarea:''
            }
        }
    }
    Vue.createApp(obj).mount('#app')
   </script>
</body>
</html>

trim

꒰ঌsnail໒꒱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件的限流方法
weixin_61562639的博客
08-01 638
当我们点击按钮向服务器发起数据请求时,在请求的数据回来之前多次单击按钮是无效的且会消耗资源，或者页面中某个按钮会导致页面的刷新，我们需要限制用户对该按钮进行频繁的操作，为了避免该情况的发生，我们将使用Vue中的来解决该问题。......
Vue的深入学习（重点：限流函数）
fcc627的博客
08-03 360
Vue实例：又称为Vue组件（1）Vue2.0创建组件的方法 < script src = " https://cdn.jsdelivr.net/npm/vue@2.6.14 " > < body > < div id = " app " > {{msg}} < script > var app = new Vue({
JS 防抖和节流以及使用lodash库完成防抖和节流
m0_65544665的博客
10-02 1294
JS 防抖和节流以及使用lodash库完成防抖和节流
vue2/3 中的前端事件防抖和限流
最新发布
u012903034的博客
05-10 426
防抖（Debouncing）：在事件被触发后，等待一段时间后执行相应的操作。如果在等待时间内再次触发了相同的事件，则重新计时。适用于需要在事件停止触发一段时间后才执行操作的场景，如搜索框输入、滚动事件等。限流（Throttling）：控制事件触发的频率，确保在一定时间段内只触发一次事件。适用于需要限制事件触发频率的场景，如页面滚动、窗口大小调整等。防抖和限流是优化前端性能和提高用户体验的重要技术。通过合理应用防抖和限流，可以有效控制事件触发频率，避免不必要的资源浪费和性能下降。
1 vue防抖和限流
wujianyouhun的专栏
01-16 2238
防抖与节流在Vue中的使用
Lodash基础以及在防抖与节流中的应用
qq_57223591的博客
07-20 2232
Lodash 是一个一致性、模块化高性能的 JavaScript 工具库它提供了大量的函数，如数组处理、字符串操作、对象处理、函数式编程、日期处理等功能，可以大大提高开发效率。
vue学习日记18：data函数，父传子，子传父
03-21
data函数，父传子，子传父三个的代码
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
04-03
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
vue学习日记17：scoped样式冲突
03-21
vue学习日记17：scoped样式冲突
vue学习日记19：记事本-组件版
03-26
记事本组件版本
深入学习vue示例工程。
07-22
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计...如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。
Node.js-用于处理按并发阈值限流执行的异步函数
08-09
用于处理按并发阈值限流执行的异步函数
手动实现简单限流函数
returnadsss的博客
08-30 445
手动实现简单限流函数（含思路）
有趣的函数系列之（一）- 限流函数
weixin_34096182的博客
03-11 605
长期浸泡于业务中，感觉脑回路都要变短了，所以偶尔也要抱个笔记本，点杯喝的，坐在星巴克，附庸一下风雅。既然在咖啡厅，我们就来聊点有意思的，比如一些有意思的算法函数，有空我们一起琢磨琢磨。 限流函数，相信大部分人都有接触过，一些优秀的库诸如underscore、lodash都有提供限流工具函数。这是一个有意思，且十分有效的函数，可以帮助我们在很多情况下对一些高频次操作进行有效的优化。那么，什么是限流函...
限流详解之节流
一诺
04-14 1247
上接聊聊高并发系统之限流特技-1、聊聊高并发系统之限流特技-2，本篇摘自《亿级流量网站架构核心技术》第四章 限流详解，在之前两篇文章的基础上增加了节流部分。有时候我们想在特定时间窗口内对重复的相同事件最多只处理一次，或者想限制多个连续相同事件最小执行时间间隔，那么可使用节流（Throttle）实现，其防止多个相同事件连续重复执行。节流主要有如下几种用法：throttleFirst、throttle...
高并发之限流算法及实现
技无涯的博客
04-12 438
高并发之限流算法及实现 高并发系统之限流特技：http://blog.csdn.net/g_hongjin/article/details/51649246 RateLimit--使用guava来做接口限流：http://blog.csdn.net/jiesa/article/details/50412027 秒杀：http://www.infoq.com/cn/articles/s...
限流节流
BlackhorseMe的专栏
04-14 483
http://mp.weixin.qq.com/s/PVUgIccOkJ-zgstRginlxg
常用4种限流算法介绍及比较
热门推荐
Solin的博客
07-15 3万+
1、计数器（固定窗口）算法计数器算法是使用计数器在周期内累加访问次数，当达到设定的限流值时，触发限流策略。下一个周期开始时，进行清零，重新计数。 此算法在单机还是分布式环境下实现都非常简单，使用redis的incr原子自增性和线程安全即可轻松实现。 这个算法通常用于QPS限流和统计总访问量，对于秒级以上的时间周期来说，会存在一个非常严重的问题，那就是临界问题，如下图： 假...
vue中的:formatter函数什么意思
05-26
在 Vue 中，`:formatter` 函数一般用于对输入框的输入进行格式化处理。当用户在输入框中输入内容时，`:formatter` 函数会对输入内容进行处理并返回处理后的结果，然后将结果显示在输入框中。 具体来说，`:formatter...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值