Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.