Detailed explanation of access methods and access event parameters in Vue inline processor

1. Calling methods in inline event handler

In an inline event handler, methods in the component can be called directly. pass@eventSyntax, we can embed the call of a method into the processing logic of the event.

Example: Inline event handler call method

<template>
  <button @click="increment">Increment</button>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
   += 1;
  ('Incremented:', );
};
</script>

In this example, the increment method is called directly when the button is clicked, which increments count by 1 and prints a new value.

2. Access event parameters in inline event handler

The inline event handler can also access native event objects. Vue will automatically pass the native event object as the first parameter of the event handler. If you need to access this parameter, you can refer to it via $event in the inline event handler.

Example: Inline event handler access event parameters

<template>
  <button @click="handleClick($event)">Click me</button>
</template>

<script setup>
const handleClick = (event) => {
  ('Event type:', ); // Output 'click'  ('Event target:', ); // Output button element};
</script>

In this example, when the button is clicked, the handleClick method is called and the $event object (i.e. the native click event object) is passed into the method. We can get the event type and target element by accessing and .

3. Call method and pass event parameters in inline event handler

You can also call methods in the inline event handler and pass native event objects to methods. For example, a method that can pass $event to a component when a click event is triggered, used to handle event objects.

Example: Calling a method and passing event parameters in an inline event handler

<template>
  <button @click="handleButtonClick($event)">Click me</button>
</template>

<script setup>
const handleButtonClick = (event) => {
  ('Button clicked!');
  ('Event type:', ); // Output 'click'  ('Event target:', ); // Output button element};
</script>

In this example,@clickWhen the event is triggered,$eventPassed tohandleButtonClickMethod, you can access the type and target elements of the event in the method.

4. Access event parameters and modify data in the inline event processor

You can also directly access native event objects in the inline event processor and modify data based on the event content. For example, different actions can be performed depending on the click position or keyboard keys.

Example: Access event parameters and modify data in inline event processor

<template>
  <button @click="handleClick($event)">Click me</button>
  <p>Mouse Position: X: {{ mouseX }}, Y: {{ mouseY }}</p>
</template>

<script setup>
import { ref } from 'vue';

const mouseX = ref(0);
const mouseY = ref(0);

const handleClick = (event) => {
   = ;
   = ;
  ('Mouse clicked at:', , );
};
</script>

In this example, when clicking the button, we place the mouse click position (clientXandclientY)Storage tomouseXandmouseYand displayed on the page. Event ObjecteventPassed tohandleClickMethod, get and update the mouse position in the method.

Summarize

• Inline event handler call method: Pass directly in the template@Event="Method Name"Call methods in the component in a way.
• Inline event handler access event parameters:pass$eventTo access the native event object.
• Calling methods and passing event parameters in inline event handler:Will$eventPassed as parameters to the method, processing native event objects in the method.

These methods make Vue's event processing more flexible, while also improving the simplicity and readability of the code. In Vue 3's combined API, these usages become more concise and powerful.

Basic usage of Vue form input binding, value binding, modifier

In Vue 3, form input binding is implemented through v-model. With v-model, we can easily bind input elements (such as text boxes, check boxes, radio boxes, etc.) to the data of Vue components in two-way. Next, I will explain the basic usage, value binding, and modifiers of Vue form input binding. All sample code uses the <script setup> tag and a combination API.

1. Basic v-model usage

In Vue,v-modelMake the value of the form control to establish a two-way binding between the component's data. When the value of the input box changes, Vue automatically updates the data in the component and vice versa.

Example: Basic v-model usage (input box)

<template>
  <input v-model="message" placeholder="Enter a message" />
  <p>You typed: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref(''); // Bidirectional binding variables</script>

• This example shows how to usev-modelConvert the value of the input box tomessagePerform two-way binding. When the user enters content in the input box,messageWill be updated in real time.

2. Value binding: Use v-model on form controls

In addition to the text box,v-modelIt can also be bound to other form controls such as check boxes, radio boxes and drop-down boxes. Vue processes bound data based on the type of form control.

Example: Check box binding

<template>
  <input type="checkbox" v-model="isChecked" /> Check me
  <p>Checked: {{ isChecked }}</p>
</template>

<script setup>
import { ref } from 'vue';

const isChecked = ref(false); // The default value is false</script>

• When the check box is selected,isCheckedWill be updated totrue, otherwisefalse。

Example: Radio box binding

<template>
  <input type="radio" v-model="selected" value="male" /> Male
  <input type="radio" v-model="selected" value="female" /> Female
  <p>Selected: {{ selected }}</p>
</template>

<script setup>
import { ref } from 'vue';

const selected = ref('male'); // "male" is selected by default</script>

• selectedThe value of   will be based on the selected radio boxvalueCome to update.

Example: drop-down box binding

<template>
  <select v-model="selectedFruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select>
  <p>Selected fruit: {{ selectedFruit }}</p>
</template>

<script setup>
import { ref } from 'vue';

const selectedFruit = ref('apple'); // "apple" is selected by default</script>

selectedFruit will be updated according to the options selected by the user in the drop-down box.

3. Modifier: Enhance the behavior of v-model

Vue provides several modifiers for customizing the behavior of v-models. These modifiers can be used to control the update timing or data format.

1. .lazy modifier

The .lazy modifier is used to delay update time and not update data until the element loses focus.

Example: .lazy modifier

<template>
  <input ="message" placeholder="Enter a message" />
  <p>You typed: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');
</script>

• use.lazyWhen modifier,messageIt will only be updated when the input box loses focus, not every time the user enters.

2. .numberModifier

.numberModifier is used to automatically convert the input value into numbers.

Example:.numberModifier

<template>
  <input ="age" type="number" placeholder="Enter your age" />
  <p>Your age: {{ age }}</p>
</template>

<script setup>
import { ref } from 'vue';

const age = ref(0);
</script>

• use.numberWhen modifiers, the value entered by the user will be automatically converted to a number.

3. .trimModifier

.trimModifier is used to automatically remove front and back spaces when user inputs.

Example:.trimModifier

<template>
  <input ="username" placeholder="Enter your username" />
  <p>Your username: {{ username }}</p>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
</script>

When using the .trim modifier, username will automatically remove the front and back spaces entered by the user.

4. Custom components and v-model

When using v-model in a custom component, Vue 3 passes data through modelValue prop by default and updates the data of the parent component through the update:modelValue event.

Example: Custom components and v-model

Parent component

<template>
  <CustomInput v-model="userMessage" />
  <p>Your message: {{ userMessage }}</p>
</template>

<script setup>
import { ref } from 'vue';
import CustomInput from './';

const userMessage = ref('');
</script>

Custom Components()

<template>
  <input :value="modelValue" @input="updateValue" />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: String
});

const emit = defineEmits(['update:modelValue']);

const updateValue = (event) => {
  emit('update:modelValue', ); // Update the value of the parent component};
</script>

• In the custom component, we passmodelValueTo receive the bound data of the parent component and passupdate:modelValueEvents to update the parent component's data.

Summarize

In Vue 3,v-modelProvides a simple and powerful way to implement two-way binding of form elements and component data. Through different modifiers (e.g..lazy、.number、.trim) can further control the update behavior of data. usev-modelIt can also cooperate with custom components, and the parent component passesmodelValuePass data, subcomponents passupdate:modelValueEvents to update data.

• Basic usage: Use directly on form controls such as input boxes.v-model。
• Value binding: In addition to the text box,v-modelIt can also be bound to check boxes, radio boxes, drop-down boxes and other controls.
• Modifier：、、and other modifiers can modify the binding behavior.

The above is the detailed explanation of the access method and access event parameters in Vue inline processor. For more information about the access method and event parameters of Vue inline processor, please pay attention to my other related articles!