What is the function of v-bind?
The main content of this article is to explain "what is the role of v-bind". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the role of v-bind?"
Two types of bindings, v-bind-attribute and property, are placed in element definitions, such as arttrs, props, and domProps (things like value and innerhtml).
V-bind code
Render (h) {
Returnh ('div', {
Attrs: {
/ /
Id:this.myCustomId
}
Props: {
/ /
SomeProp:this.someonePutSomethingHere
}
DomProps: {
/ /
Value:this.somethingElse
}
})
}
It is important to note that bindings to class and style are handled directly at the defined root, not as attrs,props or domProps.
V-bind structure
Render (h) {
Returnh ('div', {
/ / "Class" is a reserved keyword in js, so it must be referenced.
'class': {
MyClass:true
TheirClass:false
}
Style: {
BackgroundColor:'green'
}
})
}
V-on
Event handlers are also added directly to the element definition on definition
Render (h) {
Returnh ('div', {
On: {
Click (e) {
Console.log ('Igotclickededbirds')
}
}
})
}
Event modifiers can be implemented within the handler:
.stop-> e.stopPropagation ()
.client-> e.preventDefault ()
.self-> if (e.targettargets immediate targets. CurrentTarget) return
Keyboard modifier
. [target _ KEY_CODE]-> if (event.keyCodecodes including targeting key codes) return
. [MODIFIER]-> if (! event.MODIFIERKey) return
Special attribute
Slots can access slots through this.$slots as an array of createElement () nodes.
At this point, I believe that you have a deeper understanding of "what is the role of v-bind", you might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
