Introduction to Vue.js
This is for a complete beginner. A Vue.js guide for dummies!
Table of Contents
- What is Vue?
- Why should you learn Vue.js?
- Getting Started - Installation Methods
- First Vue App - Build Hello World!
What is Vue.js?
"Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces"
This is the introduction from the official Vue.js documentation. The Vue.js framework is robust and versatile. It could be integrated with an existing project and is also capable of handling complex single-page applications.
This is an open-source JavaScript framework created by Evan You. It was initially released in February 2014. This framework was inspired by the Model-View-ViewModel (MVVM) which separates user interface development from the development of back-end logic.
It is highly recommended to have a basic understanding of HTML, CSS and JavaScript before diving into Vue.js or any other frameworks.
FreeCodeCamp's JavaScript course helped me brush up on Javascript fundamentals when I was starting out with Vue.
Alternatively, you could bookmark this MDN page for quick refresher/reference.
Why should you learn Vue.js?
- The learning curve for Vue is very easy.
- Vue.js documentation is one the best! It's easy to understand for any skill level.
- Virtual DOM manipulations can update specific parts without the whole page refreshing.
- Vue.js is one of the most loved frameworks by developers.
Getting started
CDN
We could initiate by placing a script tag in an HTML file to load the latest version of Vue from the Content Delivery Network (CND)
Suitable for prototyping or learning purpose
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
NPM
This method is recommended for developing large scale applications.
# latest stable
$ npm install vue
CLI
For a quick scaffolding Vue-CLI can get a projected start within minutes. This method is not recommended for beginners without prior experience with Node.js.
"Scaffolding is a meta-programming method of building database-backed software applications. It is a technique supported by some model-view-controller frameworks, in which the programmer may write a specification that describes how the application database may be used."
First Vue App
For the purpose of learning, let us follow the CDN method. We'll will need a standard .html file and a .js file.
Let's name them index.html and main.js respectively.
A javascript file is where we'll create a new application of Vue. Then, mount this application on the .html file.
A new Vue instance is created by declaring the new Vue({ ... }) constructor.
Initiating an instance of Vue
Here is the code for our main.js file:
new Vue({
el: '#app',
data: {
message: 'Hello World!',
},
});
Let's look into the elements and understand each line:
- A new Vue instance is created with the constructor. This brings the Vue app to life.
el: '#app'is the element option, which is reflected in the HTML file with the same name as anid. This is will be the mounting point of this Vue application.- Vue instance accepts an object with multiple options. Which can contain details of the instance such as
el,data,methods`, etc. These options are used to create desired behaviour of the Vue component. data: {message: 'Hello World!'}is the data option with one String variable with a value. This property with key-value pair is used to reference in the.htmlbody to dynamically display the current value.
In other words, this is how we are printing 'Hello World!' on the HTML page using Vue.
What makes this special?
Suppose this value was updated based on user interaction, the changes would reflect on the web page without having to update the page.
More on this Vue's power to make changes on DOM later in this series! Stay tuned.
Mounting on HTML
Now we have our Vue app ready for mounting.
<HTML>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
Here is the anatomy of the .html file to initiate the Vue app:
- The element
#appis declared as anidwhere we want the Vue app to be mounted. - The Mustache syntax
{{ ... }}is used to display the value of the property from the data option. This binds the data values and prints as the text content of the element. - CDN is one method of installing Vue.js, here we are using the development version to install Vue.js with the script tag.
main.jsis imported with the script tag to bring in the Vue app functionality here.
Example
In this example shared on Vue.js docs, the Vue app is initiated in the .html file itself without a separate JavaScript file.
In the coming days, we'll dive deeper and explore the magic of Vue!