vue2（2）之watch 侦听器/computed 计算属性/指令修饰符 / v-bind对于样式操作的增强 / v-model应用于其他表单元素

最新推荐文章于 2025-02-14 10:00:32 发布
最新推荐文章于 2025-02-14 10:00:32 发布
阅读量1.2k 收藏 24
点赞数 35
分类专栏： vue2和vue3学习 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66318904/article/details/138214238
版权

vue2

1.指令补充

  1. 指令修饰符
  2. v-bind对样式增强的操作
  3. v-model应用于其他表单元素

2.computed计算属性

  1. 基础语法
  2. 计算属性vs方法
  3. 计算属性的完整写法
  4. 成绩案例

3.watch侦听器

  1. 基础写法
  2. 完整写法

4.综合案例 （演示）

  1. 渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化

二、指令修饰符

1.什么是指令修饰符？

​ 所谓指令修饰符就是通过“.”指明一些指令后缀 ，不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符

  • @keyup.enter ——当点击enter键的时候才触发 ——键盘回车监听

代码演示：


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    


                



	

		

			

				
					
Vue2剥丝抽茧-响应式系统之watch2

				
			

			

				

					发果叁
				

				

					06-20
					
					200
					
				

			

		

		

			
				
在 Vue2剥丝抽茧-响应式系统之watch 中，我们实现了  ，对于下边的代码
我们可以感知到  的变化，但  赋初始值的时候并不会感知到， 中我们可以通过添加  属性来达到。
回调函数是传递一个  方法。接下来我们来实现一下。其实思路非常简单，实现两点就可以：可以直接看代码了：
立即执行回调函数：
测试
回到开头的代码：
第一次得到初值的时候也会触发回调函数，只不过  是  。
当监听对象的时候，如果是对象  整体赋值，会调用回调函数。但如果给对象中的属性单独赋值  就不会触发回调函数了。（至于第二次赋

			
		

	



                

            
              



	

		

			

				
					
实战篇：（十八） Vue2 中的 watch 使用：数组与对象监听的技巧与陷阱

				
			

			

				

					mmc123125的博客
				

				

					10-24
					
					3545
					
				

			

		

		

			
				
在 Vue2 项目开发中，`watch` 是一个强大的特性，用于观察数据的变化并在变化时执行相应的回调。然而，在处理数组、对象以及嵌套数据结构时，很多开发者会遇到一些问题。本文将探讨 `watch` 的使用情况、常见问题及其解决办法，以帮助你更好地利用这一特性。

			
		

	



              


  
              

                


	

		

			

				
					
『学Vue2+Vue3』指令补充、computed计算属性、watch侦听器

				
			

			

				

					黑马程序员官方博客
				

				

					07-26
					
					188
					
				

			

		

		

			
				
​	所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作  —> 简化代码代码演示：
3.v-model修饰符

v-model.trim  —>去除首位空格
v-model.number —>转数字

4.事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent  —>阻止默认行为
@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为


三、v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制， Vue 扩展了 v-

			
		

	





	

		

			

				
					
vue2 中 watch 监听属性

					
最新发布

				
			

			

				

					qq_74114417的博客
				

				

					02-14
					
					2114
					
				

			

		

		

			
				
watch 是 Vue 2 中的一个重要选项，用于定义观察者（watcher），监视指定的数据属性的变化。当被监视的属性发生变化时，相应的处理函数会被调用，从而允许你对变化做出反应。这在需要根据数据变化执行异步操作或开销较大的计算时非常有用。

			
		

	



		

			
		



	

		

			

				
					
VueJs(7)---计算属性和侦听器

				
			

			

				

					a8892117的博客
				

				

					05-02
					
					257
					
				

			

		

		

			
				
计算属性和侦听器
一、 概述
计算属性
 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

 在这个地方，模板不再是简单的声明式逻...

			
		

	





	

		

			

				
					
vue2中的watch（侦听器）讲解，以及解决深度监听新值和旧值相同的两种方案（手写深拷贝和JSON.parse())。

				
			

			

				

					如果相遇，那么你好哦~
				

				

					08-25
					
					9429
					
				

			

		

		

			
				
相信大家在开发项目中，有时候会遇到一些需求，是当一个数据改变之后进行一些操作，这个时候有些人会设置一个定时器，周期性的去循环访问，当发现数据发生了改变后执行操作。但是这种操作方式会导致系统资源的浪费，以及更新的不及时等。因此vue通过watch（侦听器）提供了一个更通用的方法来响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

			
		

	





	

		

			

				
					
Vue入门篇：指令修饰符，v-bind（操作class，操作style），v-model应用常见表单元素，计算属性，watch侦听器

				
			

			

				

					jungleirim的博客
				

				

					04-25
					
					1198
					
				

			

		

		

			
				
例如，一个watch侦听器可以监视用户的输入表单字段，当用户输入变化时，它可以执行验证输入的逻辑并更新界面中的错误消息。总结：v-bind:class指令可以实现对样式的动态控制，可以根据布尔值、数组或计算属性来决定是否添加某个class。在上述例子中，元素会始终有一个base的class，并且根据isActive和error的值来添加active和error class。总的来说，watch侦听器是一种非常有用的工具，可以帮助我们更好地响应数据的变化，并执行相应的操作。依赖的数据变化，自动重新计算。

			
		

	





	

		

			

				
					
vue2指令

				
			

			

				

					Cheny_Yang的博客
				

				

					04-18
					
					1745
					
				

			

		

		

			
				
在Vue 2中，自定义组件也可以使用v-model指令来实现双向绑定。默认情况下，v-model在组件上会利用名为value的 prop 和名为input的事件，但你可以通过设置组件的model选项来修改这些默认的 prop 和事件名。以下是如何在自定义组件中使用v-model在组件内声明一个 prop通常，这个 prop 被命名为value，这样它可以与v-model的默认行为相匹配。在组件内触发一个事件当需要通知父组件更新数据时，你应该在组件内部触发一个名为input。

			
		

	





	

		

			

				
					
vue基础学习复习笔记(一)，包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念）

				
			

			

				

					weixin_60896381的博客
				

				

					07-10
					
					1217
					
				

			

		

		

			
				
本文包含 vue基础 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念）
如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正.........

			
		

	





	

		

			

				
					
Vue计算属性和侦听器

				
			

			

				

					weixin_43108180的博客
				

				

					06-23
					
					1007
					
				

			

		

		

			
				
计算属性和侦听器以及指令补充

			
		

	





	

		

			

				
					
vue计算属性与监听器

				
			

			

				

					weixin_69761220的博客
				

				

					07-27
					
					323
					
				

			

		

		

			
				
计算属性，监听器

			
		

	





	

		

			

				
					
vue中的计算属性和侦听器

				
			

			

				

					sharp0016的博客
				

				

					01-30
					
					777
					
				

			

		

		

			
				
**
vue中的计算属性和侦听器
**
computed（计算属性）
在模板中放入太多的逻辑不但难以维护，就连作者自身在看到代码的时候可能都难以理解。vue开发了计算属性，计算属性是依赖于本身的响应式以来进行缓存的，只在响应式的依赖中发生改变时他们才重新求值，所从根本上大大减少了麻烦的逻辑和运算复杂度。
代码示例：
<template>
    <div id="app">
        <p>{{ reversedMessage }}</p>
      

			
		

	





	

		

			

				
					
Vue2.5入门——计算属性与监听器

				
			

			

				

					前台端茶工程师的博客
				

				

					08-26
					
					247
					
				

			

		

		

			
				

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="node_modules/vue/dist/vue.js&q

			
		

	





	

		

			

				
					
vue2中watch的使用

					
热门推荐

				
			

			

				

					前端很杂，故名前端杂货铺 —— coderkey
				

				

					12-16
					
					2万+
					
				

			

		

		

			
				
（2）把要监听的msg值看作对象，利用hanler方法来进行监听。（2）可以只监听对象的其中一个属性值   ’对象.属性‘ 的形式。（1）把要监听的msg值看作方法名，来进行监听。（1）（一维、多维）数组的变化不需要深度监听。（2）数组对象中对象属性变化监测需要使用。深度监听，多少层内产生变化都可以监测到。（1）监听对象需要用到深度监听，设置。字符串，布尔值，number。

			
		

	





	

		

			

				
					
vue2的watch详解。真的是服了这个watch有bug

				
			

			

				

					this__valve的博客
				

				

					06-27
					
					1174
					
				

			

		

		

			
				
在 Vue.js 2 中，watch是一个用来观察和响应 Vue 实例数据变动的选项。它可以用来监听数据的变化并执行相应的逻辑，比如在数据变化时更新界面或者执行一些异步操作。

			
		

	





	

		

			

				
					
vue2中的watch监听

				
			

			

				

					weixin_47619284的博客
				

				

					07-23
					
					2万+
					
				

			

		

		

			
				
vue2中的watch监听

			
		

	





	

		

			

				
					
vue2监听器watch

				
			

			

				

					weixin_62388064的博客
				

				

					07-09
					
					498
					
				

			

		

		

			
				
执行一些业务逻辑或异步操作，一旦监听的数据变化了立马执行。简单类型数据直接监听（使用的是方法的写法）watch声明在跟data同级的配置项中。添加额外的配置项（使用的是对象的写法）

			
		

	





	

		

			

				
					
vue2中watch的介绍和使用

				
			

			

				

					m0_55857195的博客
				

				

					04-20
					
					580
					
				

			

		

		

			
				
Vue.js 中的watch选项是一个用于监听数据变化并执行相应逻辑的选项。它允许你监视 Vue 实例中的数据变化，并在数据变化时执行特定的操作，例如更新 UI、发送网络请求或执行其他逻辑。

			
		

	





	

		

			

				
					
Vue2.js新手入门教程：PDF高清版快速指南

				
			

			

				

					
				

			

		

		

			
				
 - 学习v-bind指令进行属性绑定。  - 理解v-model指令实现双向数据绑定。  3. **条件渲染与列表渲染**  - 使用v-if, v-else, v-show等指令来根据条件渲染DOM元素。  - 利用v-for指令在页面上渲染列表数据。  - 理解...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
章小絮

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值