Hello Coders !! This article series is about the vue js 2 tutorial, Starting from the basic understanding of the vue js framework.
In this article, we will learn about the very basic thing and that’s data binding.
Here you can see the normal HTML page that will render the input box with the value.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="input" value="Test Value">
</body>
</html>Output:
This is the basic HTML structure and output without vue now I am going to add vue to this structure.
Here is the whole code with the vue
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<div id="root">
<input type="text" id="input" v-model='message'>
<p>The value of the input is : {{ message }}.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script>
new Vue({
el: '#root',
data: {
message: 'Test Value'
}
})
</script>
</body>
</html>Code Explanation:
Here I added the CDN URL of vue js 2 so I can use the vue on this page.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>After that, I created the vue instance, specified the sort of data like a model, and added its value.
new Vue({
el: '#root',
data: {
message: 'Test Value'
}
})And now I have to tell vue where he needs to manipulate the data or where your surface area is. So for that, I am wrapping the area with div along with the id. Here the id is “root“.
That id is bind with the Vue instance as an element.
In the text input, there is a v-model directive that binds with the message property.
<input type="text" id="input" v-model='message'>Additionally, there is one p tag that reflects the value of a data model message. Here whatever I write in the text input that is bound with the message will reflect in the {{ message }}.
<p>The value of the input is : {{ message }}.</p>Below you see the output of this code with the vue.
Here whatever you write in text input it will populate in the p tag.
This is the basic first article about the Vue js 2 Data Binding Tutorial: Tutorial 1. Keep learning from this article series.
You can also check the article about the Laravel 8 and Vue.js Country state dependant dropdown