So you want to learn VueJs? Great! In this article, we will cover the basic introduction of VueJs. So, what is Vue? Vue is a progressive framework for building user interfaces. Vue is basically a frontend framework focused on View layer of MVC architecture structure. Vue is incrementally adoptable.
Vue has been consistently on the rise over the past year. It was first released in February 2014 by ex-Google employee Evan You. You can read why is Vue so popular in short period of time?.
Let’s get started integrating Vue in our system
Integrate Vue
Standalone
Using Vue in our system is easy. All you need to do is just import a vue.js file like you used to reference other javascript file.
NPM
Another option to install Vue is using NPM. NPM is a node package manager. Using this method, It pairs nicely with module bundlers such as Webpack or Browserify. Simply run the command:
npm install vue
CLI
Vue comes with its own CLI. It provides batteries-included build setups for a modern frontend workflow.
# install vue-cli $ npm install --global vue-cli # create a new project using the "webpack" template $ vue init webpack my-project # install dependencies and go! $ cd my-project $ npm run dev
Bower
You can also install Vue using Bower
. Simply run the command:
bower install vue
Vue Workflow
A simple workflow of Vue component is show below:
Vue Syntax
A basic syntax of Vue is to create a new Vue instance.
var app = new Vue({ el: //element data: { //data } //options })
A basic example about usage of Vue is shown below:
VueJS Tutorial {{ message }}
Output:
Hello Vue!
Declarative Rendering
Declarative rendering is the process of writing code and hiding the implementation details and focusing on the outcome. Vue supports declarative rendering. Example:
VueJS Tutorial Dynamic Class with javascript
Conditional Rendering
Conditional Statements helps to run block of code when the required condition is met. Vue supports v-if
, v-else
, v-else-if
, and v-show
.
v-if
It’s a simple if statement. If conditional statement is true, it executes statement.
VueJS Tutorial I am visible now
Output:
I am visible now
If you change the attribute seen
to false, then the text message will not be desplayed.
v-else
directive is used to indicate else block of v-if directive. Simple example of v-else is shown below:
Now you see meNow you don't
v-else
element must immediately follow a v-if
or a v-else-if
element – otherwise it will not be recognized.
Directives
Directives are special attributes with the v- prefix. Directives in Vue are v-bind, v-model
, v-for
, v-on
, and many more.
A simple of v-on click
directive is shown below:
VueJS Tutorial Adding Recored
Typing: {{ newName }}
Lists
Shorthands
Vue.js provides special shorthands for two of the most often used directives, v-bind
and v-on
.
v-bind Shorthand
... ...
v-on Shorthand
... ...
Hope you have gained some basic knowledge of Vue
and started learning. I will cover more advanced topic with practical learning about Vue in coming article