Introduction
The attributes and events of html elements in vue support dynamic modification through variables, which is somewhat different from the original js dom operation. Here is a summary of the method of property binding and event binding of vue, and the comparison with native js.
Property binding
Attribute binding refers to setting an attribute value of an html element to a variable.
In native html, such as <input type="text" />, the value of type here is text.
In Vue, we can set text to a variable: input_type.
It can be written as <input :type="input_type" />, here is a vue attribute binding, the value of type will change with the change of input_type .
Property binding syntax
There are two ways to write property binding
- :attr="var"
- v-bind:attr="var"
The above example writes <input :type="input_type" />, which corresponds to the first way of writing; it can also be written as <input v-bind:type="input_type" />. Projects generally use the first abbreviation.
Compare native js
If you use native js to manipulate the attributes of the dom element, you usually get the input element first, and then modify the input element through the js attribute setting method.
Event binding
Similar to attribute binding, events in html elements can also be bound to a specific variable, such as <button @click="changeType()"></button>.
Here, the click method is bound to the changeType function. Clicking this button will call the changeType function.
There are also two ways to write event binding
- @event="eventhandler(param..)"
- v-on:event="eventhandler(param..)"
event represents an event, such as click. Eventhandler refers to the processing function, which can pass in variables (one or more), remember that the attribute binding function must have (), not just a function name.
<button id='testBtn' @click="changeType()"></button> corresponds to the first way of writing.
It can also be written as <button id='testBtn' v-on:click="changeType()"></button>, generally the first way is used.
Compare native js
If you use native js to bind events, you can set event monitoring and event binding for elements.
#jsEvent binding method, only one event can be bound to the button
document.getElementById("testBtn").onclick = changeType;
#jsEvent monitoring mode, you can bind multiple events to the button
document.getElementById("testBtn").addEventListener("click",changeType);
The elements in vue use native js event monitoring, such as a custom vue component ms-nav. I want to bind a click event to this component, which does not take effect under normal circumstances.
#Here should be added .native to indicate that the event listening is native js <ms-nav @click.native='handleJsClick'></ms-nav>
Practical examples
Code snippets of vue attribute binding and event binding
<input v-bind:type="input_type" />
<button @click="changeType()"></button>
export default {
data() {
return {
input_type : 'text'
}
},methods:
{
changeType() {
this.input_type = "radio"
}
}
}
Blogger: Test to make money
Motto: Focus on testing and automation, and strive to improve the efficiency of research and development; through testing and diligence to complete the original accumulation, through reading and financial management to financial freedom.
csdn：https://blog.csdn.net/ccgshigao
Blog Park: https://www.cnblogs.com/qa-freeroad/