Vue2 + Vue3 learning note events

Contents of this section:

  1. event processing
  2. Event modifier
  3. Keyboard events

If you forget about the event, you can Refer to this article

1. Event handling

Basic use of events:
1. Use v-on:xxx or @ xxx to bind events, where xxx is the event name;
2. The event callback needs to be configured in the methods object and will eventually be on the vm;
3. For the functions configured in methods, do not use arrow functions! Otherwise, this is not a vm;
4. The functions configured in methods are all functions managed by Vue, and this points to vm or component instance objects;
5. The effects of @ click = "demo" and @ click = "demo($event)" are the same, but the latter can be passed to the parameter;
6. It is better to put the functions in methods. If they are all placed in data, vue will be very troublesome, and vue will perform unnecessary data proxy and data hijacking on the functions. Because the function is only used for calling, not for changing.

<body>
<!-- Prepare a container-->
		<div id="root">
			<h2>Welcome to{{name}}study</h2>
			<!-- <button v-on:click="showInfo">Click my prompt</button> -->
			<button @click="showInfo1">Click my prompt message 1 (no parameter transfer)</button>
			<button @click="showInfo2($event,66)">Click my prompt message 2 (pass reference)</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent vue from generating production prompts at startup.

		const vm = new Vue({
			el:'#root',
			data:{
				name:'yggjd',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) / / this here is vm
					alert('Hello, classmate!')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) / / this here is vm
					alert('Hello, classmate!!')
				}
			}
		})
	</script>

2. Event modifier

Event modifiers in Vue:
1.prevent: block default events (common);
2.stop: prevent event bubbling (common);
3.once: the event is triggered only once (common);
4.capture: use the capture mode of events;
5.self: the event is triggered only when event.target is the element of the current operation;
6.passive: the default behavior of the event is executed immediately without waiting for the event callback to complete;

<body>
	<!-- Prepare a container-->
		<div id="root">
			<h2>Welcome to{{name}}study</h2>
			<!-- Block default events (common) -->
			<a href="https://blog.csdn.net/qq_ 41867900? SPM = 3001.5343 "@ click. Prevent =" showinfo "> click my prompt</a>

			<!-- Prevent event bubbling (common) -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">Click my prompt</button>
				<!-- Modifiers can be written continuously -->
				<!-- <a href="https://Blog. CSDN. Net / qq)u 41867900? SPM = 3001.5343 "@ click. Prevent. Stop =" showinfo "> click my prompt < / a > -- >
			</div>

			<!-- Event triggered only once (common) -->
			<button @click.once="showInfo">Click my prompt</button>

			<!-- Capture mode using events -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- only event.target The event is triggered only when it is the element of the current operation; -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">Click my prompt</button>
			</div>

			<!-- The default behavior of the event is executed immediately without waiting for the event callback to complete; -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent vue from generating production prompts at startup.

		new Vue({
			el:'#root',
			data:{
				name:'yggjdle'
			},
			methods:{
				showInfo(e){
					alert('Hello, classmate!')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('I'm tired')
				}
			}
		})
	</script>

3. Keyboard events

1. Key aliases commonly used in Vue:
Enter = > Enter
Delete = > delete (capture delete and backspace keys)
Exit = > ESC
Space = > space
Line feed = > tab (special, must be used with keydown)
Up = > up
Down = > down
Left = > left
Right = > right

2. For keys that Vue does not provide aliases, you can use the original key value of the key to bind, but note that it should be changed to kebab case (named by a short horizontal line)

3. System modifier keys (special usage): ctrl, alt, shift, meta
(1) . use with keyup: press the modifier key, then press other keys, and then release other keys to trigger the event.
(2) . used with keydown: normally trigger events.

4.Vue.config.keyCodes. User defined key name = key code. You can customize key alias

Tags: Javascript Front-end Vue.js

Posted on Sat, 04 Dec 2021 17:50:09 -0500 by genom