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.

`v-text`

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

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

`v-once`

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>

`v-html`

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>

`v-bind`

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 use`v-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>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<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.

Conditional

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.

cycle

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:

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>
<script>
export default {
data() {
return {
items: [‘car’, ‘bike’, ‘dog’]
}
}
}
</script>

Or on a group of objects:

<template>
  <div>
    <!-- using interpolation -->
    <ul>
      <li v-for="todo in todos">{{ todo.title }}</li>
    </ul>
    <!-- using v-text -->
    <ul>
      <li v-for="todo in todos" v-text="todo.title"></li>
    </ul>
  </div>
</template>
<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>

Memorabilia

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

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function() {
alert(‘test’)
}
}
}
</script>

You can pass parameters to any event:

<template>
  <a v-on:click="handleClick('test')">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function(value) {
alert(value)
}
}
}
</script>

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

<template>
  <a v-on:click="counter = counter + 1">{{counter}}</a>
</template>
<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.

readhttps://vuejs.org/v2/guide/custom-directive.htmlIf you are interested in learning more.

Download mine for freeVue manual