In the html or jsp page, we can always encounter listening DOM events to trigger the javaScript code. Let’s briefly talk about how to deal with listening events in the following page.
Listening events in the middle is implemented through the v-on instruction. Let’s take a look at the simple listening event code.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src=""></script>
</head>
<body>
<div >
<button v-on:click="count += 1">Click to test</button>
<p>This button was clicked{{count}}Second-rate</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
count:0
}
})
</script>
</html>
Let's take a look at the code example of listening method events
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src=""></script>
</head>
<body>
<div >
<button v-on:click="test">Click to test</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: ''
},
// Define methods in the `methods` object methods: {
test: function (event) {
// `this` refers to the current Vue instance in the method alert('Hello ' + + '!')
// `event` is a native DOM event alert()
}
}
})
</script>
</html>
Inline processor method, inline javascript statement
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src=""></script>
</head>
<body>
<div >
<button v-on:click="say('say hello')">say hello</button>
<button v-on:click="say('say goodbye')">say goodbye</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: ''
},
// Define methods in the `methods` object methods: {
say:function(message){
alert(message)
}
}
})
</script>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.