Vue.js – v attr
v-x attributes
v- is Vue attribute bind and management description.
There are a lot of v- prefix
For details, please read Vue.js document : Reactive Directives
v- list
| v- | description |
|---|---|
| v-bind:x | x is attributes name, any text is O.K. basically |
| v-if | if : Use condition management |
| v-for | For loop, Use like this: v-for=”item in items” |
| v-on:x | Bind events(for example v-on:click |
| v-model | Bind data into this element(Use for input tag etc…) |
| v-once | Can change only one time(Become read-only) |
| v-html | Bind row html code into text attr |
| v-show | Whether this element should be show or not |
Examples
v-bind:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Message is title attr in span tag.
</span>
</div>
<script>
new Vue({
el: '#app-2',
data: {
message: 'This is hidden message'
}
})
</script>
</body>
</html>
v-bind:href
Bind href in a tag.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-2">
<p>
<a v-bind:href="url">Link</a>
<a :href="url">ShortHand</a>
</p>
</div>
<script>
new Vue({
el: '#app-2',
data: {
url: 'https://www.google.com.sg'
}
})
</script>
</body>
</html>
v-if
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-3">
<span v-if="seen">Now you see me!</span>
</div>
<script>
new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
</body>
</html>
If change “seen” data from true to false, you cannot see span tag.
v-for
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
</body>
</html>
v-on:click
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button＞
</div>
<script>
new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
methods is method data into this vue object.
You can add function inside of this data.
We can use @click as same meanings.
v-model
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue'
}
})
</script>
</body>
</html>
data.message is inside of input.
Every time data in input chages, message also changes.
v-html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-7>
<p>Non Raw<span>{{ rawHtml }}</span></p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
rawHtml: '<strong>V2</strong>'
}
});
<script>
</body>
</html>