":" is the abbreviation of the directive "v-bind", "@" is the abbreviation of the directive "v-on"; "." is a modifier. Details as follows
v-bindDirectives can be used to responsively update HTML features:
<div >
<span v-bind:title="message">
Hover your mouse over for a few seconds to view the prompt information for dynamic binding here!
</span>
</div>
|
var app2 = new Vue({
el: '#app-2',
data: {
message: 'Page loaded in ' + new Date().toLocaleString()
}
})
|
|
The meaning of this instruction is: "Put the node of this elementtitleFeatures and Vue instancesmessageThe properties are consistent”. If you open the browser's JavaScript console again, enter= 'New News', you will see this binding againtitleFeature HTML has been updated.
v-onInstructions, which are used to listen for DOM events:
<a v-on:click="doSomething">...</a>
|
v-The prefix serves as a visual prompt to identify Vue-specific features in the template. When you are using dynamic behavior to an existing tag,v-Prefixes are very helpful, however, for some frequently used instructions, they will feel cumbersome to use. Meanwhile, in the construction of all templates managed bySingle page application (SPA - single page application)hour,v-The prefix has become less important. Therefore, forv-bindandv-onThese two most commonly used instructions provide specific abbreviations:
v-bind abbreviation
<!-- Complete syntax -->
<a v-bind:href="url">...</a>
<!-- Abbreviation -->
<a :href="url">...</a>
|
v-on abbreviation
<!-- Complete syntax -->
<a v-on:click="doSomething">...</a>
<!-- Abbreviation -->
<a @click="doSomething">...</a>
|
They may look slightly different from normal HTML, but:and@The feature names are legal characters and can be correctly parsed in all supported browsers. Also, they won't appear in the final rendered marker. The abbreviation grammar is completely optional, but as you understand more deeply about their role, you will be glad to have them.
Modifier
Modifiers (Modifiers) are ended with half-width.The specified special suffix is used to indicate that a directive should be bound in a special way. For example,.preventModifier tellsv-onInstructions call triggered events()：
<form v-on:="onSubmit">...</form>
|
Official Documentation:/v2/guide/#%E5%8F%82%E6%95%B0
