Detailed explanation of v-model instances in components
The magic of v-model
html
<div id="app">
<input v-model="poin">
{{ poin }}</div>js
new Vue({
el:'#app',
data:{poin:'zqz'
}})Once we enter the value If something changes, the point value in data will also change.
Theoretically, an event will be triggered when the value in data changes, but we didn’t see it?
In fact, it is stated in the vue documentation:
<input v-model="something">
is the syntactic sugar below
<input v-bind:value="something" v-on:input="something = $event.target.value">
Every time we enter When the input event is triggered, input is bound to the inline function, thus changing the value of something.
Are you curious about what the input event is?
The DOM input event is triggered synchronously when the value of the
<input>or<textarea>element changes. (For input elements with type = checkbox or type = radio, the input event will not fire when the user clicks the control because the value attribute does not change.) Additionally, when the content changes, it fires on the contenteditable's editor . In this case, the event target is the edit host element. If there are two or more elements with contenteditable true, the "edit host" is the nearest ancestor element whose parent is not editable. Likewise, it will also fire on the root element of the designMode editor.
For details, see: MDN input event
v-model in the component
The v-model validity principle of the component
Accepts a
valueattributeTriggers the
inputevent# when there is a newvalue
<template>
<div>
<p>input的封装</p>
<input type="text"
ref="input"
:value="value"
@input="updateValue($event.target.value)"
@focus="selectAll"
>
</div>
</template>
<script>
export default {
name: 'el-input',
props: {
value: {
type: Number,
default: 0
},
},
methods: {
// 每次都会加一
updateValue (value) {
this.$refs.input.value = value + 1;
},
selectAll(event) {
setTimeout(function () {
event.target.select()
}, 0)
}
}
}
</script>
<style>
</style><style>
</style>
<template>
<!-- 在父组件中使用 -->
<div>
<v-el-input></v-el-input>
</div>
</template>
<script>
import vElInput from './el-input.vue'
export default {
name: 'tom',
components: {
vElInput
}
}
</script>
- Method 1: Use events but it feels a bit curved to save the country
- Method 2: Use v-model
input event. So we can use this feature to do something.
<template>
<!-- 在父组件中使用 -->
<div>
<v-el-input v-model="eleValue"></v-el-input>
eleValue的值:{{ this.eleValue }}
</div>
</template>
<script>
import vElInput from './el-input.vue'
export default {
name: 'tom',
components: {
vElInput
},
data () {
return {
eleValue: 666 //设置一个默认值
}
}
}
</script>
eleValue we expected still does not change, and the value in el-input.vue does change.
.sync in vue1, but it has been abandoned in vue2.
this.$emit('input', value*1)
...updateValue (value) { this.$refs.input.value = value + 1; // 触发组件上绑定的input事件,以实现value同步 this.$emit('input', value*1)},...The above is the detailed content of Detailed explanation of v-model instances in components. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
How to use v-model.number to implement data type conversion of input boxes in Vue
Jun 11, 2023 am 08:54 AM
In Vue, v-model is an important instruction used to implement two-way binding. It allows us to easily synchronize user input to Vue's data attribute. But in some cases, we need to convert the data, such as converting the string type input by the user into a numeric type. In this case, we need to use the .number modifier of v-model to achieve this. Basic usage of v-model.number v-model.number is a modification of v-model
How to implement calendar component using Vue?
Jun 25, 2023 pm 01:28 PM
Vue is a very popular front-end framework. It provides many tools and functions, such as componentization, data binding, event handling, etc., which can help developers build efficient, flexible and easy-to-maintain Web applications. In this article, I will introduce how to implement a calendar component using Vue. 1. Requirements analysis First, we need to analyze the requirements of this calendar component. A basic calendar should have the following functions: display the calendar page of the current month; support switching to the previous month or next month; support clicking on a certain day,
VUE3 development basics: using extends to inherit components
Jun 16, 2023 am 08:58 AM
Vue is one of the most popular front-end frameworks currently, and VUE3 is the latest version of the Vue framework. Compared with VUE2, VUE3 has higher performance and a better development experience, and has become the first choice of many developers. In VUE3, using extends to inherit components is a very practical development method. This article will introduce how to use extends to inherit components. What is extends? In Vue, extends is a very practical attribute, which can be used for child components to inherit from their parents.
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
How to open the settings of the old version of win10 components
Dec 22, 2023 am 08:45 AM
Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open
Using v-model's two-way binding in Vue to optimize application data performance
Jul 17, 2023 pm 07:57 PM
Using v-model's two-way binding in Vue to optimize application data performance In Vue, we often use the v-model directive to achieve two-way binding between form elements and data. This two-way binding greatly simplifies the development process and improves user experience. However, since v-model needs to listen to the input event of the form element, this two-way binding may cause certain performance problems when the amount of data is large. This article will introduce how to optimize data performance when using v-model and provide a
Vue component development: implementation method of progress bar component
Nov 24, 2023 am 08:56 AM
Vue component development: Progress bar component implementation method Preface: In Web development, the progress bar is a common UI component, often used to display the progress of operations in scenarios such as data requests, file uploads, and form submissions. In Vue.js, we can easily implement a progress bar component by customizing components. This article will introduce an implementation method and provide specific code examples. I hope it will be helpful to Vue.js beginners. Component structure and style First, we need to define the basic structure and style of the progress bar component.
