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
.exact
The 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:
- it
value
Attribute is bound to a name namedmodelValue
On the prop of - In its
input
The event is triggered when a new value is passed through a customupdate:modelValue
Event 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