Explain Vue methods and events in detail
- 2021-08-03 08:28:32
- OfStack
1 vue method implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Methods and Events </title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="test">
<button @click="sayHi"> Click on me </button> <!-- Use here @-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el: '#test',
methods: { // Use here methods
sayHi: function () {
alert(' I was clicked ')
}
}
})
</script>
</body>
</html>2 method parameter transmission
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Methods and Events </title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="test">
<button @click="sayHi(' How do you do ')"> Say hello </button> <!-- Use here @-->
<button @click="sayHi(' I was clicked ')"> Said I was clicked </button> <!-- Use here @-->
</div>
<script type="text/javascript">
var myVue = new Vue({
el: '#test',
methods: { // Use here methods
sayHi: function (message) {
alert(message)
}
}
})
</script>
</body>
</html>3 vue Access Native DOM Event
Note to get with $event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Methods and Events </title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="test">
<button @click="changeColor(' How do you do ',$event)"> Click on me </button> <!-- Use here @-->
<div style="height: 100px;width: 100px;background-color: red;" @mouseover="over(' The mouse slides over me ',$event)">
Try sliding the mouse over me
</div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: '#test',
methods: { // Use here methods
changeColor: function (message, event) {
alert(message+event); // Popup I was clicked , Events are [object MouseEvent]
},
over :function (message, event) {
alert(message+event); // Pop up the mouse and slide over me , Events are [object MouseEvent]
}
}
})
</script>
</body>
</html>4 event modifiers
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Methods and Events </title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="test">
<button @click.stop="sayHi(' How do you do ')"> Say hello </button> <!-- Prevent click event bubbling -->
<button @click.prevent="sayHi(' How do you do ')"> Say hello </button> <!-- Submit events no longer overload pages -->
<button @click.stop.prevent="sayHi(' How do you do ')"> Say hello </button> <!-- Prevent click event bubbling and submit events from overloading pages -->
<button @click.capture="sayHi(' How do you do ')"> Say hello </button> <!-- Use when adding an event listener capture Mode -->
<button @click.self="sayHi(' How do you do ')"> Say hello </button> <!-- Callbacks are fired only when events are fired on the element itself, not on child elements -->
<div @keyup.13="sayHi(' How do you do ')"> Say hello </div> <!-- Only when keyCode Yes 13 Called when vm.submit() -->
</div>
<script type="text/javascript">
var myVue = new Vue({
el: '#test',
methods: { // Use here methods
sayHi: function (message) {
alert(message)
}
}
})
</script>
</body>
</html>
Download this article: vue-click_jb51.rar