basis

Application and component instances

// Create an application instance
const app = Vue.createApp({ /* options */ })

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

// chain call
Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

const app = Vue.createApp({
  data() {
    return { count: 4}}})const vm = app.mount('#app')

Copy the code

The life cycle

Data properties and methods

const app = Vue.createApp({
  data() {
    return { count: 4}}})const vm = app.mount('#app')

console.log(vm.$data.count) / / = > 4
console.log(vm.count)       / / = > 4

// Assigning a value to vm.count will also update $data.count
vm.count = 5
console.log(vm.$data.count) / / = > 5

// ... and vice-versa
vm.$data.count = 6
console.log(vm.count) / / = > 6
Copy the code

Class is bound to Style

/ / object<div :class="{ active: isActive }"></div>

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>Data () {return {isActive: true, hasError: false}} // Array<div :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
Copy the code

The event processing

Multievent handler

There can be more than one method in an event handler separated by a comma operator:

<! -- The two one() and two() will execute the button click event -->
<button @click="one($event), two($event)">
  Submit
</button>
Copy the code
// ...
methods: {
  one(event) {
    // first handler logic...
  },
  two(event) {
    // second handler logic...}}Copy the code

System modifier key

.exactThe modifier

The. Exact modifier allows you to control events triggered by the exact combination of system modifiers.

<! -- Trigger even when Alt or Shift is pressed together -->
<button @click.ctrl="onClick">A</button>

<! -- Triggered only when Ctrl is pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<! -- triggered when no system modifier is pressed -->
<button @click.exact="onClick">A</button>
Copy the code

Form input binding

Basic usage

Text (Text)

<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
Copy the code

Multiline text

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>
Copy the code

Check box (Checkbox)

A single check box, bound to a Boolean value:

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
Copy the code

Multiple check boxes bound to the same array:

<div id="v-model-multiple-checkboxes">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>
Copy the code
Vue.createApp({
  data() {
    return {
      checkedNames: []
    }
  }
}).mount('#v-model-multiple-checkboxes')
Copy the code

Radio buttons (Radio)

<div id="v-model-radiobutton">
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>
</div>
Copy the code
Vue.createApp({
  data() {
    return {
      picked: ' '
    }
  }
}).mount('#v-model-radiobutton')
Copy the code

The selection (Select)

Radio:

<div id="v-model-select" class="demo">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
Copy the code
Vue.createApp({
  data() {
    return {
      selected: ' '
    }
  }
}).mount('#v-model-select')
Copy the code

Multiple selection (bound to an array) :

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br />
<span>Selected: {{ selected }}</span>
Copy the code

Value binding

For radio buttons, check boxes, and select box options, the value of the V-model binding is usually a static string (it can also be a Boolean value for check boxes) :

<! -- "picked" is the string "A" -->
<input type="radio" v-model="picked" value="a" />

<! -- 'toggle' is true or false -->
<input type="checkbox" v-model="toggle" />

<! When the first option is selected, 'selected' is the string "ABC" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>
Copy the code

Check box (Checkbox)

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
Copy the code
// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'
Copy the code

Radio buttons (Radio)

<input type="radio" v-model="pick" v-bind:value="a" />
Copy the code
// when selected
vm.pick === vm.a
Copy the code

Select Options

<select v-model="selected">
  <! Inline object literals -->
  <option :value="{ number: 123 }">123</option>
</select>
Copy the code
// When selected
typeof vm.selected // => 'object'
vm.selected.number / / = > 123
Copy the code

The modifier

.lazy

By default, v-Model synchronizes the value of the input box with the data after each input event (except for organizing text as described above). You can add the lazy modifier to synchronize after the change event _ :

<! Update "change" instead of "input" -->
<input v-model.lazy="msg" />
Copy the code

.number

If you want to automatically convert user input values to numeric types, you can add the number modifier to the V-Model:

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

This is often useful because even when type=”number”, the value of the HTML input element always returns a string. If the value cannot be resolved by parseFloat(), the original value is returned.

.trim

If you want to automatically filter whitespace entered by the user, you can add the trim modifier to the V-model:

<input v-model.trim="msg" />
Copy the code

Component based

Use v-Models on components

Custom events can also be used to create custom input components that support V-Models. Remember:

<input v-model="searchText" />
Copy the code

Is equivalent to:

<input :value="searchText" @input="searchText = $event.target.value" />
Copy the code

When used with components, the V-Model looks like this:

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>
Copy the code

In order for it to work, the inside this component must:

  • itvalueAttribute is bound to a name namedmodelValueOn the prop of
  • In itsinputThe event is triggered when a new value is passed through a customupdate:modelValueEvent is thrown

The code looks like this:

app.component('custom-input', {
  props: ['modelValue'].template: `  `
})
Copy the code

The V-Model should now work perfectly on this component:

<custom-input v-model="searchText"></custom-input>
Copy the code

Another way to create v-Model functionality in a custom component is to define getters and setters using the functionality of computed Property.

In the following example, we refactor the

component using computed properties.

Remember that the GET method should return modelValue Property, or any property used for the binding, and the set method should trigger the corresponding $emit for that property.

app.component('custom-input', {
  props: ['modelValue'].template: `  `.computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { this.$emit('update:modelValue', value)
      }
    }
  }
})
Copy the code