vue-wacth listening event

2019-08-05   0:20

Vue.js listens for the attribute watch, and we can respond to changes in data through watch.

The following example implements the counter by using watch: (At this point, I thought, as if binding the click event can also achieve the counter, so I added a click event "I'm a real bull" myself).

<!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>
			<!-- Method 1: No click. connum data+1 -->
			<span @click="handleClick">Click on me.</span> 
			
			<!-- Method 2: Trigger the listening event, every click. connum data+1 -->
			<button @click="connum++">Click on me to monitor</button>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					connum:0
				},
				// Click on events, every click triggered, connum plus 1
				methods:{
					handleClick:function(){
						this.connum+=1
					}
				}
			});
			// Monitor click events
			vm.$watch("connum",function(connum){
				console.log(connum)
			})
		</script>
	</body>
</html>

  

A little secret, in the novice course https://www.runoob.com/vue2/vue-watch.html I didn't understand the example in this article.

<div id = "app">
    <p style = "font-size:25px;">Counter: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">Click on me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('Change of counter value :' + oval + ' Change to ' + nval + '!');
});
</script>

What the hell is the function(nval,oval) above?

So, I omitted it and wrote the top code according to my own understanding, "I'm a real cow!"!!!!!!!

 

Learning makes me happy, happiness makes me grow, growth makes me dark circles.

Tags: PHP Vue Attribute Javascript

Posted on Wed, 09 Oct 2019 13:22:08 -0700 by laflair13