How to install Vue.js?
To install a Vue.js is pretty easy, you can easily include the following vue.js script on your html page. If you are in the development mode, you can use the following script.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>Use this version of script if you are in the production or live mode.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
Another way to build your vue.js app by using vue-cli. This is more advanced, especially it requires Node.js in order to run the script. If you are completely new to Vue.js, I would definitely recommend you to try out the script tag version first.
Getting started with your first Vue.js app.
One of the first example that you will always see on almost all programming subject is Hello World app. So let's get started by writing your first Html Vue.js app. We started by creating a really simple HTML page with a greeting hello world message on our h1 tag.
<!doctype html> <html> <head> <title>My First Hello World App using Vue.js</title> </head> <body> <div> <h1>Hi there!!! I am about to learn Vue.js.</h1> </div> </body> </html>
The changes we want to make on above code is to remove the hardcoded welcome message from the HTML page. Then we will pass a string message from Vue.js data to the HTML page. In order to this, we need to do the following actions:
- Include a vue.js library script tag. We will use the development script version on this example.
- We need to tell Vue.js to look up in the HTML page where is the targeted element we want to refer. Therefore we are going to add an id to the div tag.
Here is updated version of the html page after we applied the above requirements.
<!doctype html>
<html>
<head>
<title>My First Hello World App using Vue.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<h1>{{ welcomeMessage }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
welcomeMessage: 'Hi there!!! I am about to learn Vue.js.'
}
})
</script>
</body>
</html>
The el attribute represents the target element. In this particular example, it targets the div tag with id named app. The double curly brackets are known as binding expressions which is used as declarative rendering by Vue.js.
You can see the following demo on how our above page works.
Demo
You can view the demo of this tutorial below.
{{ welcomeMessage }}
Download Files
You can download our working html vue.js page on the following link.