Vue.js directive syntax
Directives are commands that we can attach to the DOM element, they are used for low-level access to the HTML element, and its behavior control. Thanks to directives and interpolation, any HTML under the jurisdiction of Vue.js is still something more than ordinary HTML.
In order for Vue.js to know when it comes to directives, they are marked in a special way. The specific prefix is the main indication to the library that it is a directive, and is placed before the name of each directive:
v-
In addition to the prefix, each directive has a unique name that determines the behavior and functionality it should have.
v-example
However, the name alone is not sufficient for any functionality, so in addition to the name of the directive, a value is always passed (each directive knows what to do with that value).
v-example="value"
For some directives, even the passed value is not enough, so we have to define the directive more clearly by passing it an argument:
v-example:arg="value"
In addition to everything listed in some cases with some directives there is a possibility to modify the standard behavior of the directive. Modifiers are special postfixes preceded by a period.
v-example:arg.modifier="value"
Directive modifiers
Directive modifiers (eng.modifiers) are special postfixes that are added to one of the directives by using a dot, and their existence indicates that the directive should be changed in some special way.
|
1 2 3 |
<button v-on:click.stop="showDialog">Click Here!</button> // Zamena za event.stopPropagation() <input type=”text” v-on:keyup.enter=”pressedEnter”> // Additionally defines a button for the event |
View.js directives
Directives built into Vue.js:
| Name | Abbreviated syntax | Application | Example |
|---|---|---|---|
| v-bind | : | Dynamic binding of HTML attributes to a given property | <div v-bind:style="{ background: color }"></div> |
| v-on | @ | Adds an event listener to the HTML element | <button v-on:click="nekiEventHandler"></button> |
| v-model | No abbreviated syntax | Enables the connection of input and data properties in both directions, so-called. “two-way data binding” | <textarea v-model="message" ></textarea> |
|
v-if v-else-if v-else |
No abbreviated syntax | Conditional HTML rendering | <g v-if="vrednost === 5"></g> |
| v-show | No abbreviated syntax | Shows or hides an element (always exists in the DOM forunlike v-if which renders the element only if the condition is met) | <child v-show=”showComponent”></child> |
| v-pre | No abbreviated syntax | Print the content without compiling | <div v-pre>{{ sadrzaj bez metoda }}</div> |
| v-text | No abbreviated syntax | Updates element text |
<span v-text="msg"></span> same effect as string interpolation <span>{{msg}}</span> |
| v-html | No abbreviated syntax | Updates the HTML element | <div v-html="nekiHtml"</div> |
| v-once | No abbreviated syntax | Renders the element only once (no re-rendering) | <div class=”v-once”>Samo jednom se renderuje</div> |
In Vue.js there is a possibility for the programmer to define new so-called custom directives, but that is a more advanced topic and will be covered later in one of the articles.