The template language used by Vue.js is a superset of HTML. We can use interpolation and instructions. This article describes the instructions.
v-text
v-once
v-html
v-bind
- Two-way binding use
v-model
- Use expression
- Conditional
- cycle
- Memorabilia
- Show or hide
- Event command modifier
- Custom instruction
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-text
Instructions. It performs the same job:
<span v-text="name"></span>
v-once
You know how{{ name }}
Bind toname
The attributes of the component data.
any timename
Changes in the component data, Vue will update the value represented in the browser.
Unless you usev-once
Directives, 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-html
Instructions:
<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-bind
It 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-model
For 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-else
withv-else-if
.
<p v-if="shouldShowThis">Hey!</p>
shouldShowThis
Is the Boolean value contained in the component data.
cycle
v-for
Allows you to present a list of items. Used in conjunction with itv-bind
Set 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-for
You can use the following methods to provide you with an index:
<li v-for="(todo, index) in todos"></li>
Memorabilia
v-on
Allows 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>
click
It's just an event. A common incident issubmit
, You can use bindingv-on:submit
.
v-on
It’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 details
v-on
insideVue 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: none
If 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
,.passive
they 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
More vue tutorials:
- Vue.js overview
- Vue.js CLI: Learn how to use it
- Vue.js development tools
- Configure VS code for Vue development
- Create your first application with Vue.js
- Vue.js single file component
- Vue.js templates and interpolation
- Vue.js instructions
- Vue.js method
- Vue.js calculated attributes
- Use CSS to style Vue.js components
- Vue.js observer
- Vue method vs observer vs calculated property
- Vue.js filter
- Vue.js components
- Vue.js slot
- Vue.js component props
- Vue.js activities
- Vue.js component communication
- Vuex, Vue.js state manager
- Vue, use a component inside another component
- Vue, how to use prop as a class name
- How to use SCSS with Vue.js single file component
- Use Tailwind in Vue.js
- Vue router
- Dynamically display Vue components
- Vue.js cheat sheet
- Use Vuex to store Vue data to localStorage
- How to use Vue dynamic application class
- Vue, how to use the v model
- Vue, why data must be functions
- Roadmap to become a Vue.js developer in 2020