This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

v-on

You can bind click events after v-On

Implement counter:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{ shu }}</div>
			<button v-on:click="shu=shu+1">+ 1</button>
			
		</div>
		
		<script>
			new Vue({
				el: '#app'.data: {
					shu:0}})</script>
	</body>
</html>

Copy the code

V-on calls the method

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div></div>
			<button v-on:click="s()">button</button>
			
		</div>
		
		<script>
			new Vue({
				el: '#app'.data: {
					
					s:function(){
						alert('ohh'); }}})</script>
	</body>
</html>

Copy the code

Read the value in data

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{ a }}</div>
			<button v-on:click="s">+ 1</button>
			
		</div>
		
		<script>
		new Vue({
			el: '#app'.data: {
				a:0
				},
			methods: {// Custom methods
				s:function(event){
					this.a+=1;
				alert('+ 1 ='+this.a); }}})</script>
	</body>
</html>

Copy the code

Method parameter usage

  • v-on:click="a+=1"
  • @click="add"Call the contents of the Vue object as arguments
  • @click="add2(x1,x2)"Method follow parameter
<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{ a1 }}</div>
			<button v-on:click="a1+=1">+ 1</button>
			<div>{{ a2 }}</div>
			<button @click="add">+ 1</button>
			<div>{{ a3 }}</div>
			<button @click="add2(a1,a2)">and</button>
		</div>
		
		<script>
		new Vue({
			el: '#app'.data: {
				a1:0.a2:0.a3:0
				},
			methods: {add:function(){
					this.a2+=1;
				},
				add2:function(b1,b2){
					this.a3=b1+b2; }}})</script>
	</body>
</html>

Copy the code

Event modifier

Vue.js provides event modifiers for V-ON directives to handle DOM event details

Prevents click events from bubbling

<a v-on:click.stop="doThis"></a>

Submit events no longer reload the page

<form v-on:submit.prevent="onSubmit"></form>

Modifiers can be concatenated

<a v-on:click.stop.prevent="doThat"></a>

Modifiers only

<form v-on:submit.prevent></from>

Use event capture mode when adding event listeners

<div v-on:click.capture="doThis">.. </div>

The callback is emitted only when the event is emitted on the element itself, not on a child element

<div v-on:click.self="doThat">.. </div>

The click event can only be clicked once

<a v-on:click.once="doThis"></a>

Key modifier

Vue allows you to add key modifiers to V-Ons when listening for keyboard events.

Use the keyCode

Only called if keyCode is 13

<input v-on:keyup.13="submit">

Using key aliases

<input v-on:keyup.enter="submit">

abbreviations

<input @keyup.enter="submit">

All key aliases include. Enter,. TAB,. Delete (capture “delete” and “backspace” keys),. Esc,. Space,. Up,. Down,. Left,. Right,. CTRL,. Alt,. Shift, and. Meta.