Vue3 learning - V-model and component basics

v-model

Form submission is a very common feature in development and an important means of interacting with users

However, this requires that we can obtain the data submitted by the user in the code logic, which we usually use the V-model instruction to do:

V-model directives can be created on form elementsTwo-way data binding
Depending on theControl typesAutomatically select the correct method to update elements
The V-Model is essentiallySyntactic sugar, which is responsible for listening on the user’sInput eventsTo update the data and do some special processing in certain extreme scenarios;

Do not use the v - model

<template id="template">
  username: <input type="text" :value="username" @input="username = $event.target.value" />
  <h3>{{ username }}</h3>
</template>

<script>
  Vue.createApp({
    template: '#template',

    data() {
      return {
        username: 'Klaus'
      }
    }
  }).mount('#app')
</script>
Copy the code

We can implement two-way data binding by binding the value of value and listening for input events.

But in websites, form elements are often not one, and if every form element needs to be bi-bound, the code becomes redundant.

At this point you can use the V-Model

Use v - model

<template id="template">
  username: <input type="text" v-model="username" />
  <h3>{{ username }}</h3>
</template>

<script>
  Vue.createApp({
    template: '#template',

    data() {
      return {
        username: 'Klaus'
      }
    }
  }).mount('#app')
</script>
Copy the code

The principle of the V-Model is that there are two operations behind it:

V-bind Binding value Specifies the value of the attribute
The V-on binding input event listens to the function, which gets the latest value and assigns it to the bound property

V-models combine form elements

input

<input type="text" v-model="username" />
Copy the code

textarea

<textarea cols="30" rows="10" v-model="intro"></textarea>
Copy the code

Checkbox: An optional box

<! -- isAgree is Boolean -->
<input type="checkbox" v-model="isAgree"/>Agree to a dealCopy the code

This is essentially syntactic sugar for the following code:

<! - note: <input type="checkbox" :checked="isAgree" @input="handleInput" { handleInput(e) { this.isAgree = e.target.checked } } </script>Copy the code

Checkbox -- Multiple checkboxes

<! -- If the checkbox does not have a value set, then the default value provided by HTML will be used, i.e. 'on'. Therefore, it is recommended that each checkbox set its own value. The value (i.e. Fruits) is of type array -->
<input type="checkbox" v-model="fruits" value="apple" />apple
<input type="checkbox" v-model="fruits" value="banana" />banana
Copy the code

radio

<! Set the radio values of each checkbox to a set of radios with the same v-model value, and the values in the same set are mutually exclusive -->
<input type="radio" v-model="gender" value="male" /> male
<input type="radio" v-model="gender" value="female" /> female
Copy the code

Select - Single-value drop - down list

<! --> <select v-model="fruit"> <option value="apple">apple</option> <option value="banana">banana</option>  <option value=s"strawberry">strawberry</option> </select>Copy the code

Select - Multi-value drop - down list

<! Select V-model ="fruits" multiple size="2" value="apple">apple</option> <option value="banana">banana</option> <option value="strawberry">strawberry</option> </select>Copy the code

The modifier

v-lazy

By default, v-Model bidirectional binding binds the input event, which synchronizes the latest value with the bound property each time the content is entered

If we follow the lazy modifier after the V-model, the bound event will be switched to the change event, which will only fire on commit (such as carriage return or loss of focus)

<input type="text" v-model.lazy="username">
Copy the code

.number

In the form, the values obtained are strings, even if the input type is set to number

<! <input type="number" v-model="score">Copy the code

We want to convert to a numeric type, so we can use the.number modifier

<input type="number" v-model.number="score">
Copy the code

Note that strings are also implicitly converted to numeric types when we make logical judgments

const score = '80'

if (score > 90) {
  console.log('good')}else {
  console.log('good')}// => The output is fine
Copy the code

If an input has the number modifier set, but the user enters a value other than number

Vue tries to convert the input value to a value of type number whenever possible

<input type="text" v-model="score"> <! - 1. Input output 123 | 123 | type number 2. Enter 123 aa123 output 123 | | type number 3. Enter 12.3 number 4 aa 12.3 | | output type. Input a123aaa output a123aaa | | type string = = > if the beginning is the alphabet, then vue of value transformation will fail, at this point the number modifier will automatically lose action = = > so now get is' a123aaa type is string -- -- >Copy the code

.trim

The trim modifier automatically filters before and after whitespace characters in values entered by the user

<input type="text" v-model.trim="intro">
Copy the code

component

Components are divided by function points, with their own templates, logic, and styled code blocks

Componentization provides an abstraction that allows us to develop individual reusable components to construct our applications

Any application is abstracted into a tree of components

A complete page can be divided into many components
Each component is used to implement a functional block of the page
Each component can be subdivided
The components themselves can be reused in multiple places
A component is essentially a JS object

CreateApp is the root of the application */. CreateApp is the root of the application
const app = Vue.createApp({
  template: '#template'.data() {
    return {
      score: 0
    }
  }
})

app.mount('#app')
Copy the code

Components can be divided into two types:

Global component: a component that can be used in any other component – global registry
Local components: Components that can only be used in registered components – local registrations

Global registration

<template id="template"> <component-a /> </template> <script> const app = Vue.createApp({ template: '#template'}) // Global components // In DOM templates, component names should conform to HTML specifications, do not use the hump method // in vue2, Components have and must have a root element // In Vue3, components can have multiple root elements, because in practice all elements are wrapped in fragments during packaging. App.component.ponent ('component-a', {template: ` <h2>Hello Vue</h2> <h2>Hello React</h2> ` }) app.mount('#app') </script>Copy the code

Component name

Use kebab-case(dash delimiter)

When defining a component using kebab-case (dash delimited naming), you must also use kebab-case when referencing the custom element, e.g.
Use PascalCase(Hump identifier)

When defining a component using PascalCase, you can use either nomenclature when referring to the custom element.

and

are both acceptable

However,

is recommended because

is not recognized properly in DOM templates

Local components

Global components are usually completed at the beginning of the application, which means that if some components are not used, they will be registered as well

So when we use components in development, we usually use local registration

Local registration is done in the component we need to use, via the Components property option

The Components option corresponds to an object whose key-value pair is the name of the component: the component object

If a component needs to use a local component, the corresponding local component needs to be registered in that component; if not, the corresponding local component cannot be used

const app = Vue.createApp({
  template: '#template'.components: {
    // Local components that can be used only after registration
    'component-a': {
      template: ` Hello Vue
 Hello React
 `
    }
  }
})

app.mount('#app')
Copy the code

SFC

As the project becomes more complex, we tend to adopt a componentized approach to development, but there are some problems when writing template-related files with code abstracts:

Each component will have its own template, script logic, style, etc. We can separate them into separate JS/CSS files, but they will remain separate
Our script is in a global scope, which is prone to name conflicts and requires a high order of introduction

So in real development, we can solve this problem with a single-file components with the suffix.vue

However, the SFC cannot be parsed directly by the browser, so you can use the following two methods to compile it into something the browser can recognize directly

Using the Vue CLI to create the project, the project will help us configure all the configuration options by default and can be used directly in the. Vue file
Package it yourself using a packaging tool like WebPack or Rollup or Vite

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue3 learning – V-model and component basics

v-model

V-models combine form elements

The modifier

component

Global registration

Component name

Local components

Hello Vue

Hello React

SFC

Vue3 learning – V-model and component basics

v-model

V-models combine form elements

The modifier

component

Global registration

Component name

Local components

Hello Vue

Hello React

SFC

Related Posts

Understand ES7 async/await in depth

TypeScript basis

Uni-app Cross-platform framework tutorial