How to get started with VeuJs | Vue Js First Application
Introduction
Vue is a JavaScript framework for building UIs. Its core part is centered for the most part around the view layer and it is straightforward. The version of Vue that we are going to use in this instructional exercise is 2.0.
As Vue is essentially worked for frontend development, we are going to manage a lot of HTML, JavaScript, and CSS files in the up and coming sections. To comprehend the subtleties, let us start with a basic example.
In this example, we are going to utilize the development version of Vuejs.
Example
<html>
<head>
<title>VueJs Introduction</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: 'My first VueJS Task'
}
});
</script>
</body>
</html>
Output
This is the first app we have created using VueJS. As seen in the above code, we have included vue.js at the start of the .html file.
<script type = "text/javascript" src = "js/vue.js"></script>There is a div that is added in the body that prints “My first VueJS Task” in the browser.
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>We have likewise included a message in an introduction, i.e. {{}}. This interacts with VueJS and prints the data in the browser. To get the estimation of the message in the DOM, we are making an occurrence of Vuejs as follows –
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})In the above code piece, we are calling Vue example, which takes the id of the DOM component for example e1:'#intro', it is the id of the div. There is data with the message which is allocated the worth 'My first VueJS Task'. VueJS collaborates with DOM and changes the incentive in the DOM {{message}} with 'My first VueJS Task'.
If we happen to change the value of the message in the console, the same will be reflected in the browser. For example –
Console Details
In the above console, we have printed the vue_det object, which is an instance of Vue. We are refreshing the message with "VueJs is fascinating" and the equivalent is changed in the program promptly as found in the above screen capture.
This is only a basic example indicating the linking of VueJS with DOM, and how we can control it. In the following scarcely any parts, we will find out about orders, segments, contingent circles, and so on.
