Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

📝 [Vue] learn to form a record, [programmer essential knowledge]

📔 Today’s small knowledge — Vue common instructions of the V-on directory

Vue command v-ON

1. How to use v-ON?

2. What is the name of the event?

3. Where are method names defined?

4. V – on abbreviations

5. Access data in data using this keyword

6. Summary

The V-ON directive is an event-binding directive that binds specific events to specific elements when the user wants to add their own logical processing when clicking, pressing a keyboard, scrolling a mouse, etc.

We first place a button in the tag div mounted by the vue instance as the input tag, and write the v-on instruction inside the tag. After the colon (:) is the event name, and after the equal (=) is the event name to bind.

1. How to use v-ON?

<div id="app">
    <input type="button" value="Event binding" v-on:The event name ="Method name">
</div>
Copy the code

2. What is the name of the event?

Let’s say click if it’s a click event, monseEnter if it’s a mouse-over event, and dblclick if it’s a double-click event

<div id="app">
	<input type="button" value="Event binding" v-on:click="Method name">
	<input type="button" value="Event binding" v-on:mouseenter="Method name">
	<input type="button" value="Event binding" v-on:dblclick="Method name">
</div>
Copy the code

3. Where are method names defined?

Methods we put in methods

<body>
		<div id="app">
			<input type="button" value="Event binding" v-on:click="todo">
			<input type="button" value="Event binding" v-on:mouseenter="todo">
			<input type="button" value="Event binding" v-on:dblclick="todo">
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app".methods: {todo:function() {
						// Method execution logic}}})</script>
	</body>
Copy the code

4. Short for V-on

From the code, we can see that all bound events start with v-ON, and Vue actually provides a concise way to write them by replacing v-ON with the @ symbol

<div id="app">
	<input type="button" value="Event binding" @click="todo">
	<input type="button" value="Event binding" @mouseenter="todo">
	<input type="button" value="Event binding" @dblclick="todo">
</div>
Copy the code

5. AccessdataThe data in thethisThe keyword

​

6. Summary

  • v-onThe directive binds events to elements
  • v-onThe instructions can be abbreviated as@
  • The binding method is inmethodsIn the
  • Method internal passthisKeyword access is defined indataThe data in the

Vue official document: vuejs.org/v2/guide/sy…

Vue 英 文 版 : cn.vuejs.org/v2/guide/sy…

7. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹