Why Vue.js?
Your first question would be why should I learn Vue.js? Right! Now, here is the answer.
Your first question would be why should I learn Vue.js? Right! Now, here is the answer.
- Extendable Data bindings
- Plain JS object models
- APIs that simply make sense
- Building UIs by composing components
- Mixing & matching small libraries
You can search out for more information on the internet. Laravel (PHP Framework) support vue out of the box and many more website using this lightweight JS library.
Now, let's dive into development part!
There are two options to start Vue.js development.
Method 1:
Working on jsFiddle
Method 2:
Work on local machine. For that you need to download vue.js files and include javascript files into your HTML project. Then you are good to go. [Start from Step 3].
I am doing with jsFiddle.
Step 1 :
Open this link
Step 2 :
Click on External Resources
Step 3:
Let's go for 'Hello World' Example! - Most common/ beginner step to write down HelloWorld Program ! :D
Add this code in HTML section!
For javascript :
What is going on?
HTML is pretty straight forward. A Div tag with an id of an app.
Javascript:
We assign Vue js variable to vm so we can refer vm.message to access variable.
el = element = identifier of tag
data = variable and assigned with value. Here, message = "Hello World"
When you run the program you will see Hello World!
jsFiddle Demo
Output
Then in the field add - https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js link and then click on '+' button.
Also add bootstrap for styling - https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css
After adding external resource you are able to view those files added successfully.
Step 3:
Let's go for 'Hello World' Example! - Most common/ beginner step to write down HelloWorld Program ! :D
Add this code in HTML section!
<div id="app">
<h1>{{ message }}</h1>
</div>
For javascript :
var vm = new Vue({
el : "#app",
data : {
message : "Hello World!"
}
});
What is going on?
HTML is pretty straight forward. A Div tag with an id of an app.
Javascript:
We assign Vue js variable to vm so we can refer vm.message to access variable.
el = element = identifier of tag
data = variable and assigned with value. Here, message = "Hello World"
When you run the program you will see Hello World!
jsFiddle Demo
Output
