template syntax
Notice
Template syntax cannot be used in tag attributes
text interpolation
{ { msg }}
Using JavaScript expressions
{ { number + 1 }}
{ { ok ? 'YES' : 'NO' }}
{ { message.split('').reverse().join('') }}
use HTML
Double curly braces will interpolate the data as plain text, not HTML, to insert HTML you need to use the v-html directive
rawHtml: "html content..."
<span v-html="rawHtml"></span>
Using computed properties
{ { reverse }}
const reverse = computed(() =>{return message.value.split("").reverse().join("")})
Instructions
{ { reverse() }}
const reverse = computed(() =>{return message.value.split("").reverse().join("")})
The difference between computed properties and methods:
Computed properties: Computed property values are cached based on their reactive dependencies. A computed property is only recomputed when its reactive dependencies are updated
Method: The method call will always execute the function again when a re-render occurs
template reference
Introduction
Although Vue's declarative rendering model abstracts most of the direct manipulation of the DOM for us, in some cases, we still need to directly access the underlying DOM elements
To achieve this we can use the special ref attribute
use
<p ref="message">Composite API-template reference</p>
const message = ref(null)// Declare a ref to store the reference of the element, which must have the same name as the ref in the template
onMounted(() =>{
message.value.innerHTML = "Combined API-template reference-modification"
})
<div ref="container">容器</div>
console.log(this.$refs.container);
event
bind event
v-on:click="handler"
Shorthand: @click="handler"
Classification
Inline event handler: an inline JavaScript statement executed when the event is triggered (similar to onclick)
<button @click="count++">Add 1</button>
Method event handler: a property name or path pointing to a method defined on the component
<button @click="addCount">Add</button>
function addCount(){count.value++}
pass parameters
<button @click="addCount('hello')">Add</button>
event object
Get without parameters:
getNameHandle(e){}
Obtain by passing parameters:
<p @click="getNameHandle(item,$event)" ></p>
getNameHandle(name,e){}
event modifier
reference documents
Prevent the default event: @click.prevent="clickHandle"
Stop event bubbling: @click.stop="clickP"
attribute binding
basic use
<div v-bind:id="dynamicId" v-bind:class="dynamicClass">AppID</div>
Shorthand: <div :id="dynamicId" :class="dynamicClass"></div>
form input binding
Input box: <input type="text" v-model="message">
Checkbox: a single checkbox, bound to a Boolean value
Modifiers: v-model also provides modifiers: .lazy, .number, .trim
.lazy: By default, v-model will update data after each input event, you can add lazy modifier to update data after each change event
boolean attribute
<button :disabled="isButtonDisabled">Button</button>
Dynamically bind multiple values
objectOfAttrs: {id: 'container',class: 'wrapper'}
<div v-bind="objectOfAttrs">Dynamically bind multiple values</div>
: class enhancement
Vue provides special functional enhancements specifically for the v-bind usage of class
Binding object: :class="{ active: isActive,'text-danger': hasError }"
Multiple object binding: :class="classObject"
binding Fixed array: :class="[activeClass,errorClass]"
Ternary expression: :class="[isActive ? 'active' : '']"
Array and object: :class="[{ 'active':isActive }, errorClass]"
:style enhancement
Vue provides special functional enhancements specifically for v-bind usage of styles
Binding object: :style="{ color: activeColor, fontSize: fontSize + 'px' }"
Binding array: :style="[baseStyles]"
Conditional/list rendering
conditional rendering
v-if [v-show]
v-else-ifv-else
The difference between v-if and v-show
v-if is "true" conditional rendering, because it ensures that when switching, the events in the conditional block Both listeners and subcomponents are destroyed and rebuilt.
v-if is also lazy: if the condition evaluates to false on the first render, nothing will be done. Conditional blocks are only rendered when the condition first becomes true.
In contrast, v-show is much simpler, the element will always be rendered regardless of the initial condition, and only the CSS display property will be toggled.
Overall, v-if has a higher switching overhead, while v-show has a higher initial rendering overhead. Therefore, if you need to switch frequently, it is better to use v-show; if the binding conditions rarely change at runtime, v-if is more appropriate
list rendering
v-for: traverse the array, (item,index) in/of items
:key: unique sign [key here is a special attribute bound by v-bind]
<div v-for="(user,index) in users" :key="index">
{
{ user. username }}: {
{ user. age }}
</div>
custom directive
Partial custom instruction [.vue]
<p v-author>Text information</p>
const vAuthor = { mounted:(element) =>{ element.innerHTML = element.innerHTML + "-itbaizhan" } }
Global custom directive [main.js]
app.directive("red",{ mounted(element){ element.style.color = 'red' } }) <p v-red>red effect</p>
listener
Introduction
We can use the watch option to trigger a function every time a reactive property changes
example
{
{ count }}
const count = ref(0)
watch(count,async(newValue,oldValue) =>{console.log(newValue,oldValue);})
Array change detection
Introduction
Vue provides change methods for responsive arrays: push()/pop()/shift()/unshift()/splice()/sort()/reverse()...
use
Sample data: names:["iwen","ime","frank"]
Add array: this.names.push("sakura")
Merge array: this.nums1 = this.nums1.concat(this.nums2)