Vue.Js is a latest JavaScript framework and lightweight. Very easy to learn. This is great for startup but can use large scale applications.
- Similar with angular. Beginner can take the CDN library of VueJS and get started in codepen and jsfiddle.
- You can dawnload the VueJs using this link.
Now we need to install the VueJS file from the CDN library.
The link https://unpkg.com/vue.
- Also recommend installing npm package for these large-scale applications.
- Before learning this, you have sound knowledge about the HTML, CSS, and JavaScript.
There are several features in this Vue.Js Which are
- The framework Virtual (DOM) – This (DOM) is also using with the react.
- Good terms of optimization and less expensive and faster.
- Components – Create the customer elements.
- Event handling – v-on attribute is adding and listen to the event in Vue.Js
- Data Binding – manipulate or assign values to HTML attributes.
Rest of the features.
- Templates
- Animation
- Framework Directives
- Routing – Navigation between the pages.
- Framework Watchers – Take care of handling any data changes.
- Javascript Framework Vue-CLI – This should install, and it will help to build and compile the project.
- React is popular than this framework.
- This is open-source JavaScript framework.
- There are good job opportunity with the react than the Vue.Js.
The Vue.js starting code.
<html>
<head>
<title>VueJs Tutorial</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'U Tek It Vue Tutorial 01'
}
});
</script>
</body>
</html>
script type = "text/javascript" src = "js/vue.js"></script>Usimg this code we can include the Vue.Js to the code.
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
This code is helping to display the result in the browser.
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})
This code is to getting the text output in the code.
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})
How to create Vue,Js instance .
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
div id = "vue_det"></div>- This is the id of the Vue element.
- Now we can defind the data objects. It has value in firstname, lastname and
- address. This all values are assigned to the dic using below code.
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div
<h1>{{mydetails()}}</h1>This function is helping to display the values.