Hi, Rockstars (Music not included though)! Excited to dive into the World of Vue.js? Then what are we waiting for?!
Good News: It is laughably simple to get started with Vue.
Let us keep our GOAL pretty simple today. Following the age-old tradition, let us aim to display the message, “Hello World” on our webpage using Vue.
Environment Set Up
Since we have decided to keep everything simple, why not use CDN which is basically importing Vue.js from another server. Later in this tutorial series, we will be using a more complex set up with Vue CLI and Webpack to bundle all our files. But for now, to just practice, understand and learn the basics of Vue, CDN will do. And yes, you can use this simple set up for very small projects as well.
Option 1:
<!-- development version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- production version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>Option 2:
Vue is also available on unpkg,
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>Version 2.5.16 is the latest at the time of writing this article. It is recommended to include the specific version number in the URL. You can edit the version manually to the latest one in use.
But if you don’t want to mention the version and use the latest, just go ahead with,
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- or -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>Option 3:
You can download the development or production versions of Vue.js to your local and include them directly using the <script> tags in the HTML file.
Sticky Note: Development version consists of console warnings that can be very useful for debugging. Whereas, the production version is mainly optimized for size (by using minified versions of the vue.js file etc.) and speed which becomes very important when publishing in live environment.
Initial Code
I am using Visual Studio Code as the IDE. You can use Sublime Text, WebStorm, Atom, Notepad++ or any other IDE of your choice. My advice? Please go with JS Fiddle because you can just concentrate on the code and forget about creating each file and linking them with <script> tags. And that is just the icing on the cake. The best part is, you can view HTML, CSS, JS and the output on a single screen. Unlike the browser where you have to refresh it every single time for changes to get reflected, JS fiddle detects the changes and renders the output automatically in the “Result” pane.
Create an HTML file, “index.html” with the following code,
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue!</title>
<!-- including Vue with development version CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Hello World!</h1>
</div>
</body>
</html>The code is pretty simple. We are giving the page a title, “Hello Vue!” and including the development version of vue.js using CDN with <script> tags in the <head> section. We are displaying “Hello World!” message within <h1> tags inside a <div> element with an id=”app” in the <body> section.
The current output in Chrome browser is as follows,
With me so far? Okay, I hear you say that we have rendered “Hello World!” with <h1> tags but isn’t that contradicting with our original goal of using Vue.js to display that?! Good question.
Let us answer that now,
Step 1: Create a new Vue instance
We have imported Vue.js in our project using <script> tags but that doesn’t do the magic. It is equivalent to having a laptop on our work table. To switch it ON and get some work done, we have to press the power button. Similarly, to use Vue in our project, we have to create an instance of the Vue object using the new keyword. This instance is Vue’s power button!
new Vue();Step 2: Passing options object
Just creating an instance only powers Vue. But we want to do a lot more with Vue. For that, we have to pass options or config object as an argument to the instance that we just created. This options object has some reserved properties that Vue will recognize and they are specified as key-value pairs. As the name suggests, not all properties are required and can be specified as the need arises. Mostly they are used to store data and perform certain actions.
e.g.: “el”, “data”, “methods” etc.
new Vue({ options/config object });Step 3: Establishing a connection to the DOM
We want to somehow grab the control of a part of the HTML code that we wish to manipulate. In our case, it would be the <div> element with the id, “app”, so that we can display the message “Hello World” through Vue.
To establish this connection between the Vue instance and a part of the DOM so that it can be controlled as per our needs, we have a reserved property named “el” which translates to an element. This property takes a string as the value which is specified as a CSS selector i.e. “#” for id and “.” for class.
new Vue({
el: "#app"
});With this simple line of code, our <div> element with id, “app” along with its content are now linked to the Vue instance. They are now inseparable!
Step 4: Specifying our data
To store all the data/information we would like to work within this Vue instance and its linked DOM, we have another reserved property named, “data”. Unlike “el”, “data” takes an object as its value. Since we want to display the message “Hello World” to our DOM, let us specify that in the “data” object as a key-value pair.
new Vue({
el: "#app",
data: {
message: "Hello World"
}
});Step 5: Rendering this data to the DOM
Just use two curly braces as shown below to render the value specified in the data object of the Vue instance to the DOM. (More on this in our next article!)
<div id="app">
<h1>{{ message }}</h1>
</div>To differentiate the previous output (without Vue), with the one using Vue, let us display “Hello World!!!” instead of “Hello World!”.
Yay! We have thereby created our very first Vue app. All the code discussed as part of this post is available in the GitHub repo.
Have a great day!
How to connect to two different element. What if we have code like this.
{{ message }} // Here i want to display Hi
{{ message }} // Here i want to display Hello
And what if i want to display Hello in both the location. is there anyway of reusing the code.
Something like this
new Vue({
el: “#app”,
el: “#app1”,
data: {
message: “Hello World”
}
});
Hi Soniya,
I didn’t get your question completely. I will answer based on my understanding of your query.
If you want to display ‘Hello’ in two locations and both the {{ message }} are in the same ‘div’ element, ‘#app’, then just use,
new Vue({
el: “#app”,
data: {
message: “Hello”
}
});
This code will update all places where ‘message’ is used, with the string, “Hello”.
But if you want to achieve this with two different DOM elements, then ideally, you might want to use components, which I will be explaining in the “Advanced Vue.js” section. With components, you can reuse the same template and pass different data depending on your needs.
For now, if you want to have two sections of the DOM elements (‘el’) to be connected to Vue, then create two separate instances of Vue and pass the required data.
new Vue({
el: “#app”,
data: {
message: “hello”
}
});
new Vue({
el: “#app1”,
data: {
message: “hello”
}
});
Hope both ‘app’ and ‘app1’ are separate ‘div’ elements and are not nested.
You can define any string (i.e. both ‘message’ property’s values need not be the same) in the ‘div’ elements. Both work independently.
Thanks.
It seems like < div > tag has nothing to do with Vue js DOM manipulation. It is just #app and the data message is important. But when i change < div > tag to < p >. It doesn’t work.
Could you please let me know why div is so important in dom manipulation. And why < p > doesn’t work.
Fantastic question! The answer is both “yes” and “no”. Let me explain this with examples.
1. Replacing < div > tag with < p > tag as shown below will not work.
“index.html” code,
< p id="app" >
< h1 >Hey {{ message }}!< /h1 >
< /p >
Because the way < p > tag is parsed by Vue while rendering to the DOM is as follows,
< p id="app" >< /p >
< h1 >Hey {{ message }}!< /h1 >
< p >< /p >
You can see this upon expanding the “body” tag in the Chrome DevTools “Elements” section.
Since the template syntax now falls outside the
"el":"#app"scope, the “message” property’s value is not rendered.2. Instead, you can modify the “index.html” code as below,< p id="app" >Hey {{ message }}!< /p >and it will work fine.
3. You can use < section > or < article > instead of < div > tag. Since all these tags can have child elements, it will work just fine.
Hope that answers your question.