Hello folks! welcome back to a new edition of our Vue.js tutorial. In this tutorial, we will be studying about Vue.js Introduction.
Vue.js is a JavaScript framework for building web user interfaces. Its core part is focused mainly on the view layer and it's very easy to understand. The version of Vue that we are going to use for this tutorial is 2.0.
As Vue is basically built for development of front-end web interfaces, we will deal with a lot of HTML, JavaScript and CSS files in our subsequent tutorial posts. To have a proper understanding of the details, let's begin with a simple example.
In this example, we'll use the development version of vue.js.
Vue.js is a JavaScript framework for building web user interfaces. Its core part is focused mainly on the view layer and it's very easy to understand. The version of Vue that we are going to use for this tutorial is 2.0.
As Vue is basically built for development of front-end web interfaces, we will deal with a lot of HTML, JavaScript and CSS files in our subsequent tutorial posts. To have a proper understanding of the details, let's begin with a simple example.
In this example, we'll use the development version of vue.js.
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
When the above example is executed, it will produce the following result -
This is the first app we've created via Vue.js. As seen in the above example, we've added Vue.js at the beginning of the .html file.
<script type = "text/javascript" src = "js/vue.js"></script>
There is a div which is included in the body that prints "My first VueJS Task" in the web browser.
<div id = "intro" style = "text-align:center;"> <h1>{{ message }}</h1> </div>
We've included a message in a interpolation, i.e. {{}}. This interacts with Vue.js and prints the data in the browser. To get the value of the message in the DOM, we're creating an instance of Vue.js as follows -
var vue_det = new Vue({ el: '#intro', data: { message: 'My first VueJS Task' } })
In the above code snippet, we're calling the Vue instance, which takes the id of the DOM elements i.e. e1:'#intro', it is the id of the div. There is a data with message assigned the value 'My first VueJS Task'. Vue.js interacts with Dom and changes the value in the Dom {{message}} with 'My first VueJS Task'.
If we happened to change the value of the message in the console, the same is going to be reflected in the browser. For example -
If we happened to change the value of the message in the console, the same is going to be reflected in the browser. For example -
.jpg)
Console Details
In the above console, we have printed the vue_det object, which is an instance of Vue. We're updating the message with 'VueJs is interesting' and the same is changed in the browser instantly as seen in the screenshot above.
This is just a basic example that shows the linking of Vue.js with DOM, and how we can manipulate it. In our up coming tutorials, we will learn about directives, conditional loops, components, etc.
This is just a basic example that shows the linking of Vue.js with DOM, and how we can manipulate it. In our up coming tutorials, we will learn about directives, conditional loops, components, etc.
READ: Vue.js | Overview
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Instances.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.