Vue.js instructions

The template language used by Vue.js is a superset of HTML. We can use interpolation and instructions. This article describes the instructions.

We sawVue.js templates and interpolationHow to embed data in a Vue template.

This article introduces another technique provided by Vue.js in templates:instruction.

The instructions are basically similar to HTML attributes added inside the template. They all usev-To indicate that this is a special property of Vue.

Let us understand each Vue instruction in detail.


In addition to using interpolation, you can also usev-textInstructions. It performs the same job:

<span v-text="name"></span>


You know how{{ name }}Bind tonameThe attributes of the component data.

any timenameChanges in the component data, Vue will update the value represented in the browser.

Unless you usev-onceDirectives, basically similar to HTML attributes:

<span v-once>{{ name }}</span>


When using interpolation to print data attributes, HTML will be escaped. This is a great way for Vue to automatically protectXSSattack.

However, in some cases, you want to output HTML and let the browser interpret it. you can use itv-htmlInstructions:

<span v-html="someHtml"></span>


Interpolation only applies to label content. You cannot use it on attributes.

Attribute must be usedv-bind:

<a v-bind:href="url">{{ linkText }}</a>

v-bindIt is so common that it has a shorthand syntax:

<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>

Two-way binding usev-model

v-modelFor example, let's bind a form input element and make it change the Vue data attribute when the user changes the content of the field:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
<span>Fruit chosen: {{ selected }}</span>

Use expression

You can use any JavaScript expression in the directive:

<span v-text="'Hi, ' + name + '!'"></span>
<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

Any variable used in the instruction refers to the corresponding data attribute.


Inside the instruction, you can use the ternary operator to perform conditional checks, because this is an expression:

<span v-text="name == Flavio ? 'Hi Flavio!' : 'Hi' + name + '!'"></span>

There are dedicated instructions that allow you to execute more organized conditions:v-if,v-elsewithv-else-if.

<p v-if="shouldShowThis">Hey!</p>

shouldShowThisIs the Boolean value contained in the component data.


v-forAllows you to present a list of items. Used in conjunction with itv-bindSet the properties of each item in the list.

You can iterate over a simple array of values:

    <li v-for="item in items">{{ item }}</li>

<script> export default { data() { return { items: [‘car’, ‘bike’, ‘dog’] } } } </script>

Or on a group of objects:

    <!-- using interpolation -->
      <li v-for="todo in todos">{{ todo.title }}</li>
    <!-- using v-text -->
      <li v-for="todo in todos" v-text="todo.title"></li>

<script> export default { data() { return { todos: [ { id: 1, title: ‘Do something’ }, { id: 2, title: ‘Do something else’ } ] } } } </script>

v-forYou can use the following methods to provide you with an index:

<li v-for="(todo, index) in todos"></li>


v-onAllows you to listen to DOM events and trigger methods when the event occurs. Here, we listen to the click event:

  <a v-on:click="handleClick">Click me!</a>

<script> export default { methods: { handleClick: function() { alert(‘test’) } } } </script>

You can pass parameters to any event:

  <a v-on:click="handleClick('test')">Click me!</a>

<script> export default { methods: { handleClick: function(value) { alert(value) } } } </script>

You can put a small amount of JavaScript (single expression) directly into the template:

  <a v-on:click="counter = counter + 1">{{counter}}</a>

<script> export default { data: function() { return { counter: 0 } } } </script>

clickIt's just an event. A common incident issubmit, You can use bindingv-on:submit.

v-onIt’s so common that it has a shorthand grammar,@:

<a v-on:click="handleClick">Click me!</a>
<a @click="handleClick">Click me!</a>

For more detailsv-oninsideVue activities

Show or hide

If a specific attribute of the Vue instance evaluates to true, you can choose to only display the element in the DOM.v-show:

<p v-show="isTrue">Something</p>

The element is still inserted into the DOM, but set todisplay: noneIf the conditions are not met.

Event command modifier

Vue provides some optional event modifiers, you can combine them withv-on, It will automatically make the event perform certain actions without you having to explicitly code it in the event handler.

A good example is.prevent, It will automatically callpreventDefault()In the event.

In this case, the form will not cause the page to be reloaded, which is the default behavior:

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

Other modifiers include.stop,.capture,.self,.once,.passivethey areThere is a detailed description in the official document.

Custom instruction

Vue's default instructions can already allow you to complete a lot of work, but you can add new custom instructions at any time.

read you are interested in learning more.

Download mine for freeVue manual

More vue tutorials: