2019-08-05   0:20

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。

以下实例通过使用 watch 实现计数器：（此时我就想了一下，好像绑定点击事件，也是可以实现计数器的，所以，我就自己增加了一个点击事件“我真牛”）

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script src="vue.min.js"></script>

		<style>

			span{

				padding: 20rpx;

				border: 1px solid #000;

			}

		</style>

	</head>

	<body>

		<div id="app">

			<p>{{connum}}</p>

			<!-- 方法一：没点击一次，connum数据+1 -->

			<span @click="handleClick">点我哈</span> 

			<!-- 方法二：触发监听事件，每点击一次，connum数据+1 -->

			<button @click="connum++">点击我监听</button>

		</div>

		<script>

			var vm=new Vue({

				el:"#app",

				data:{

					connum:0

				},

				// 点击事件,每触发一次点击事件,connum加1

				methods:{

					handleClick:function(){

						this.connum+=1

					}

				}

			});

			// 监听点击事件

			vm.$watch("connum",function(connum){

				console.log(connum)

			})

		</script>

	</body>

</html>

　　

一个小秘密，在菜鸟教程https://www.runoob.com/vue2/vue-watch.html  里的这个实例，我都没有看明白

<div id = "app">

    <p style = "font-size:25px;">计数器: {{ counter }}</p>

    <button @click = "counter++" style = "font-size:25px;">点我</button>

</div>

<script type = "text/javascript">

var vm = new Vue({

    el: '#app',

    data: {

        counter: 1

    }

});

vm.$watch('counter', function(nval, oval) {

    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

});

</script>

　上面的　function(nval,oval)到底是什么鬼？

所以，我就把它省略了，根据我自己的理解写了最上面的代码“我真牛”！！！！！！！！

-------学习使我快乐，快乐使我成长，成长使我加深黑眼圈

												


											
vue-wacth监听事件的更多相关文章
	

    
						
  1. vue v-on监听事件
		
    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...
    
		
    2. 
						
  2. vue(一)--监听事件
		
    1.vue-on:监听事件: demo:点击按钮,number+1 v-on 还可以缩写为 @ 2.事件修饰符 .stop:等同于JavaScript中的event.stopPropagation() ...
    
		
    3. 
						
  3. vue之监听事件
		
    一.v-on 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 简写形式  用@代替 v-on: <button v-on:click="co ...
    
		
    4. 
						
  4. vue 键盘监听事件
		
    <template> <div class="hello"> <input v-on:keyup.enter="submit" t ...
    
		
    5. 
						
  5. Vue 为什么在 HTML 中监听事件?
		
    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
    
		
    6. 
						
  6. Vue的watch监听事件
		
    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
    
		
    7. 
						
  7. Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件
		
    <!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15">  ...
    
		
    8. 
						
  8. Vue子组件监听事件中传递参数的方法
		
    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
    
		
    9. 
						
  9. VUE 实现监听滚动事件，实现数据懒加载
		
    methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement &&  ...
    
		
    10. 
						
  10. vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式
		
    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Java-Lambda表达式第一篇认识Lambda表达式
			
    1.Lambda表达式时Java 8新增的特性.Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码创建只有一个抽象方法的接口(即函数式接口)的实例. 2.当使用Lamb ...
    
			
    2. 
						
  2. [Bzoj3262]陌上花开(CDQ分治&&树状数组||树套树)
			
    题目链接 题目就是赤裸裸的三维偏序,所以用CDQ+树状数组可以比较轻松的解决,但是还是树套树好想QAQ CDQ+树状数组 #include<bits/stdc++.h> using nam ...
    
			
    3. 
						
  3. Codeforces 979D (STL set)(不用Trie简单AC)
			
    题面: 传送门 题目大意: 给定一个空集合,有两种操作: 一种是往集合中插入一个元素x,一种是给三个数x,k,s,问集合中是否存在v,使得gcd(x,v)%k==0,且x+v<=s若存在多个满足 ...
    
			
    4. 
						
  4. 音频视频的播放的进度调整(以.net为例)
			
    Background:对于音视频在线播放,一些小应用是靠nginx处理访问视频.音频文件的请求,对外应用的一般会托管至各种云上使用相关的服务.前者存在巨大的安全隐患,后者会有一定的成本.有的时候还是需 ...
    
			
    5. 
						
  5. java反射, 不看你可别后悔
			
    开发中, 难免遇到些私有的属性和方法, 就好比下面的实体一样, 我们该怎么获得她, 并玩弄于手掌呢? 我们先来个实体瞧瞧, 给你个对象你也new不了, hahaha- 单身wang public cl ...
    
			
    6. 
						
  6. .net easyui Tree树
			
    原文:https://www.cnblogs.com/hantianwei/archive/2012/03/19/2407118.html Tree 树   用 $.fn.tree.defaults  ...
    
			
    7. 
						
  7. mongoDB学习笔记(2)
			
    一.删数据库 1.语法 MongoDB 删除数据库的语法格式如下: db.dropDatabase() 删除当前数据库,默认为 test,你可以使用 db 命令查看当前数据库名. 2.实例 以下实例我 ...
    
			
    8. 
						
  8. 2018-8-28-win10-uwp-MVVM入门
			
    title author date CreateTime categories win10 uwp MVVM入门 lindexi 2018-08-28 15:37:52 +0800 2018-2-13 ...
    
			
    9. 
						
  9. Power Designer将数据库表结构导出到Word
			
     一.   安装与运行PowerDesigner(本例中用的版本是15.1) 二.“File”→“New Model”→“Categories”→“Information”→“Physical Dat ...
    
			
    10. 
						
  10. ARM Cortex-M底层技术(3)—编译内核的原理及其应用
			
    概述: 当前开发中,我使用的Keil开发工具较多(keil526),故以keil为例进行介绍,其他开发环境大同小异. 1. 编译链接的定义 不管我们编写的代码有多么简单,都必须经过「编译 --> ...
    
			
    11.