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>
		<meta charset="utf-8">
		<script src="vue.min.js"></script>
				padding: 20rpx;
				border: 1px solid #000;
		<div id="app">
			<!-- 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>
			var vm=new Vue({
				// Click on events, every click triggered, connum plus 1
			// Monitor click events


A little secret, in the novice course 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>
<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 + '!');

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