All you need to know about V-model!

Time:2021-11-23

By Michael Thiessen
Translator: front end Xiaozhi
Source: News

Dream, dry goods, wechat search[move to the world]Pay attention to this dish washing wisdom who is still washing dishes in the early morning.

This article GitHubhttps://github.com/qq449245884/xiaozhiIt has been included. There are complete test sites, materials and my series of articles for the interview of front-line large factories.

All you need to know about V-model!

Vue v-modelIs an instruction that providesinputandformBidirectional data binding between or between two components.

This is a simple concept in Vue development, butv-modelIt will take some time to understand the true power of.

This article mainly explainsv-modelAnd learn how to use it in your own projects.

What is a V-model?

As I just said,`v-modelIs an instruction that we can use in template code. The instruction is a template token that tells Vue what we want to do with dom.

stayv-modelIn this case, it tells Vue that we want totemplateValues and indataCreate a two-way data binding between the values in the property.

usev-modelA common use case for is when designing elements related to a form. We can use it to makeinputElement can modify data in Vue instances.

<template>
  <div>
    <input 
      type='text'
      v-model='value'
    />
    <p> Value: {{ value }} </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'Hello World'  
    }
  }
}
</script>

When we wereinputWhen entering content in, we will see that our data properties are changing

! [uploading…] ()

All you need to know about V-model!

What is the difference between V-model and v-bind?

v-bindInstructions are usually associated withv-modelSwitch. The difference between the two isv-modelProvides two-way data binding.

In our example, this means that if our data changes, ourinputWill also change if ourinputIf it changes, so will our data.

andv-bindBind data in only one way.

This is very useful when we want to create a clear one-way data flow in our own application. However, inv-modelandv-bindYou must be careful when choosing between.

Modifier of V-model

Vue provides two modifiers that allow us to changev-modelThe function of. Each can be added up like this, or even connected together.

<input 
  type='text'
  v-model.trim.lazy='value'
/>

.lazy

By default,v-modelIn eachinputSynchronize with the status (data properties) of the Vue instance on the event. This includes gaining / losing focus, etc.

.lazyModifier modified ourv-model, so it only synchronizes after the event is changed. This reduces the number of times the V-model attempts to synchronize with Vue instances and, in some cases, improves performance.

.number

Usually, even if you enter a numeric type,inputThe entered value is also automatically changed into a string. One way to ensure that our values are processed as numbers is to use.numberModifier.

According to the Vue documentation, ifinputChange, andparseFloat()If the new value cannot be resolved, the last valid value entered will be returned.

<input 
  type='number'
  v-model.number='value'
/>

.trim

Similar to the trim method in most programming languages,.trimModifier removes the leading or trailing whitespace before the return value.

Using V-model in custom components

In Vue, data binding has two main steps:

  1. Transfer data from parent node
  2. Issue an event from a child instance to update the parent instance

Use on custom componentsv-modelLet’s pass a prop and handle an event with an instruction.

<custom-text-input v-model="value" />

<!-- IS THE SAME AS -->

<custom-text-input 
   :modelValue="value"
   @update:modelValue="value = $event"
/>

What the hell does that mean?

usev-modelThe default name of the value passed ismodelValue。 However, we can also pass a custom name like this.

<custom-text-input v-model:name="value" />

Note: when we use a custom model name, the name of the emitted method will beupdate:name

All you need to know about V-model!

Using V-model in custom components

Using v-mode in custom components requires two things:

  1. Receive in propsv-modelValue of.
  2. When the corresponding value changes, an update event is issued

OK, let’s make a statement first:

export default {
  props: {
    modelValue: String,
  }
}

Next, bind the modelvalue to the required element. When the value changes, we pass theupdate:modelValueIssue a new value.

This enables two-way binding.

All you need to know about V-model!

Using skills of V-model

The above describes how to use in a custom componentv-modelNow, let’s take a look at somev-modelMore advanced use of instructions.

Use V-model multiple times for a component

v-modelNot limited to one per component. To use multiple timesv-model, we just need to ensure that the name is unique and that it is accessed correctly in the subcomponent.

Add a second for the following componentv-model, named here firstlastName:

<template>
  <div>
    <custom-text-input 
      v-model='value' 
      v-model:lastName='lastName'
    />
    <p> Value: {{ value }} </p>
    <p> Last Name: {{ lastName }} </p>
  </div>
</template>

<script>
import CustomTextInput from './CustomTextInput.vue'

export default {
  components: {
    CustomTextInput,
  },
  data() {
    return {
      value: 'Matt',
      lastName: 'Maribojoc'
    }
  }
}
</script>

Then, our internal sub components:

<template>
  <div>
    <label> First Name </label>
    <input 
      type='text'
      :value='modelValue'
      placeholder='Input'
      @input='$emit("update:modelValue", $event.target.value)'
    />
    <label> Last Name </label>
    <input 
      type='text'
      :value='lastName'
      placeholder='Input'
      @input='$emit("update:lastName", $event.target.value)'
    />
  </div>
</template>

<script>
export default {
  props: {
    lastName: String,
    modelValue: String,
  }
}
</script>

After running, you can see twov-modelCan work normally:

All you need to know about V-model!

Modifier for custom V-model

Vue has built-in modifiers, but these are not enough, so sometimes we need to customize our own modifiers.

Suppose we want to create a modifier to delete all spaces in the entered text. We call itno-whitespace

<custom-text-input 
  v-model.no-whitespace='value' 
  v-model:lastName='lastName'
/>

Within the component, we can use props to capture modifiers. The name of the custom modifier isnameModifiers

props: {
  lastName: String,
  modelValue: String,
  modelModifiers: {
    default: () => ({})
  }
},

The first thing we have to do is change@inputProcessor to use a custom method. We can call itemitValue, which accepts the name of the property and event object being edited.

<label> First Name </label>
<input 
      type='text'
      :value='modelValue'
      placeholder='Input'
      @input='emitValue("modelValue", $event)'
/>

stayemitValueMethod, in the$emitBefore, we need to check the modifier. Ifno-whitespaceModifier istrue, you can modify the value before sending it to the parent object.

emitValue(propName, evt) {
  let val = evt.target.value
  if (this.modelModifiers['no-whitespace']) {
    val = val.replace(/\s/g, '')
  }
  this.$emit(`update:${propName}`, val)
}

Running, perfect:

All you need to know about V-model!

summary

I hope this article can teach you some new knowledge about Vue V-model.

In its basic use cases, such as forms and input data,v-modelIs a very simple concept. However, when we create custom components and process more complex data, we can releasev-modelThe true power of.

~After that, I’m washing the dishes. I’m going to wash the dishes. I’ll see you next time!


The bugs that may exist after code deployment cannot be known in real time. Afterwards, in order to solve these bugs, we spent a lot of time on log debugging. By the way, we recommend a useful bug monitoring toolFundebug

Original text:https://learnvue.co/2021/01/e…

communication

Dream, dry goods, wechat search[move to the world]Pay attention to this dish washing wisdom who is still washing dishes in the early morning.

This article GitHubhttps://github.com/qq449245884/xiaozhiIt has been included. There are complete test sites, materials and my series of articles for the interview of front-line large factories.

All you need to know about V-model!

Recommended Today

Use BWA to batch compare the FASTA files of the entire folder

1. Prepare the FASTA file. 13 copies of wild rice are used here Download link http://db.ncgr.ac.cn/RicePanGenome/ 2. Prepare Japanese genome documents 3. BWA generate index file bwa index /public/home/fengting/database/rice/ribenqing/IRGSP1.0_genome.fasta 4. Generate SAM file: for i in $(ls /public/home/fengting/task/4.25/raw_wide); do bwa mem -t 10 /public/home/fengting/database/rice/ribenqing/IRGSP-1.0_genome.fasta /public/home/fengting/task/4.25/raw_wide/$i > /public/home/fengting/task/4.25/raw_bam/$i.sam; done