Article From:



The most common form of data binding is text interpolation using the “Mustache” grammar (double braces)

<span>Message: {{ msg }}</span>

v-once Directives, you can also perform one-time interpolation, when the data changes, the contents of the interpolation will not be updated

<span v-once>This will not change: {{msg}}</span>

b.Original HTML

Double braces interpret data as plain text rather than HTML code. To output real HTML, you need to use v-html instructions

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Note: Any HTML dynamically rendered on the site can be very dangerous because it can easily lead to XSS attacks. Please use HTML interpolation only for trusted content, never for user-provided content.


Mustache Grammar does not work on HTML features. In this case, the v-bind instruction should be used:

<div v-bind:id="dynamicId"></div>

In the case of Boolean properties, their existence implies true, and v-bind works slightly differently. In this example:

<button v-bind:disabled="isButtonDisabled">Button</button>

If the value of isButtonDisabled is null, undefined or false, the disabled feature will not even be included in the rendered & lt; button & gt; element.

d.Using JavaScript expressions

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>


Directives are special features with v-prefixes. The value of the instruction feature is expected to be a single JavaScript expression (v-for is an exception, which we will discuss later). The function of an instruction is to produce an expression when its value changes.The concomitant effect of birth acts responsively on DOM.

<p v-if="seen">Now you see me</p>
Here, the V-IF instruction inserts/removes the value of the expression seed based on its true or false value.<p> Element.


Some instructions can receive a “parameter” that is coloned after the instruction name. For example, the v-bind instruction can be used to update HTML features responsively.

<a v-bind:href="url">...</a>

Here href is a parameter that tells the v-bind instruction to bind the href characteristics of the element to the value of the expression url.

Another example is the v-on instruction, which is used to listen for DOM events:

<a v-on:click="doSomething">...</a>


Modifiers are special suffixes specified by a half-corner period to indicate that an instruction should be bound in a special way. For example, the. prevent modifier tells the v-on instruction to call event. preventD for triggered eventsEfault ():

<form v-on:submit.prevent="onSubmit">...</form>


Vue.js Specific abbreviations are provided for the two most commonly used instructions, v-bind and v-on.

<!-- Complete grammar-->
<a v-bind:href="url">...</a>
<!-- Abbreviation-->
<a :href="url">...</a>

<!-- Complete grammar-->
<a v-on:click="doSomething">...</a>
<!-- Abbreviation-->
<a @click="doSomething">...</a>


Leave a Reply

Your email address will not be published. Required fields are marked *