VueJS is a JavaScript framework mainly used to create user interfaces and single-page applications.
It lets you add logic to HTML code, and lets you easily link JavaScript data with HTML content.
We’ll see in this tutorial the main features in order for you to get started building cool web apps.
If you're discovering Vue for the first time, I encourage you to try out the examples presented in this article. The only way to learn is by practicing for yourself!
Set up the project
To include Vue in your project, simply add the following script tag in the head section of your document.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
Then add a div
with the id of app
in the body section, that will contain your entire web application.
<div id="app"></div>
Then, add another script tag, where your JavaScript code will be. We’ll create an app
variable to setup Vue.
<script>
const app = new Vue({
el: '#app', // refers to container div
data: {
message: 'Hello World!' // just some example data
}
})
</script>
Any data you want to use with Vue has to be in the data
object, like the message
property of value 'Hello Vue!'
.
And that’s it to setup Vue! We'll now look at the key features of Vue. Remember that Vue can only be used in the element you specified, which in my case is the div
with the app
id.
Including variables in HTML
The following code snippet will add the value of the message
variable in the div
. If the value changes, the HTML is automatically updated.
<h1>{{ message }}</h1>
To update the message
variable, you have to refer to it as app.message
, as it is a property of the app
object.
Conditions in HTML
To render HTML if a certain condition is met, you can use the v-if
directive.
data: {
displayMessage: false
}
<h1 v-if="displayMessage">This message will only be shown if displayMessage is true!</h1>
For loops in HTML
Let's say you have a fruitNames
array, like so:
data: {
fruitNames: ["Apple", "Pear", "Banana"]
}
You can create an HTML list of that array very easily using Vue:
<ul>
<li v-for="fruit in fruitNames">{{ fruit }}</li>
</ul>
That code will output the following HTML list:
- Apple
- Pear
- Banana
And again, if the array is modified, the HTML list will update accordingly.
You can also access the index in a Vue for loop, like so:
<ul>
<li v-for="(fruit, index) in fruitNames">{{ index }}: {{ fruit }}</li>
</ul>
The code above will output this list:
- 0: Apple
- 1: Pear
- 2: Banana
Furthermore, you can loop over a number range, like so:
<ul>
<li v-for="i in 5">{{ index }}</li>
</ul>
This example will produce this list:
- 1
- 2
- 3
- 4
- 5
Binding HTML attributes
Just like you can bind text inside HTML elements to JavaScript variables, you can bind attributes of HTML elements to use variables.
Here’s an example. Let’s say you have an <input>
for a chat app, and want to bind its placeholder attribute to the name of the recipient. Here’s how you would do it using Vue:
data: {
recipient: "John"
}
<input v-bind:placeholder="'Send a message to' + recipient">
If recipient
changes, the input’s placeholder will update!
The best part is that you can do this for any HTML attribute, like title
or class
.
And because v-bind
is one of the most used Vue directives, it can be shortened to a single :
. Which means it would be :placeholder
instead of v-bind:placeholder
in the example above.
Exception with v-on
To bind "on"
HTML attributes, such as onclick
or onchange
, you shouldn't use the v-bind
directive, instead the v-on
directive, like so:
<button v-for="i in 10" v-on:click="doSomeStuff(i)">{{i}}</button>
This example will create 10 buttons, and each one will call doSomeStuff
with their index passed as parameter.
Again, v-on
is a very commonly used directive, so it has it's own shorthand: @click
is the same as v-on:click
.
Input binding
When programming webpages, you'll often find yourself wanting to bind the value of an HTML input, with a JavaScript variable. Vue makes that super easy, with the v-model
directive. Here's how you use it:
data {
name: 'John'
}
<input v-model="name">
<p>{{name}}</p>
This example will initialize a name
property with the default value of 'John'
, and then create an HTML input that will automatically change that property whenever the input is changed.
Conclusion
As we have seen, Vue is truly a game-changer when it comes to connecting the HTML DOM with JavaScript, as it provides various logic elements to HTML. Problems such as conditional rendering and state management is easily solved when using Vue.
Top comments (0)