Vue.js Data Binding

Vue.js is renowned for its reactive data binding, which allows developers to seamlessly synchronize the model (JavaScript data) with the view (HTML elements). Data binding is a key feature that simplifies the process of developing dynamic and interactive user interfaces. In this chapter, we will explore Vue.js data binding from basic concepts to advanced techniques, with comprehensive examples and explanations.

What is Data Binding or Vue.js Data Binding

Data binding is the process of automatically synchronizing data between the model and view components. In Vue.js, data binding allows developers to bind data to HTML elements and update the view when the data changes. Vue.js supports two types of data binding:

  • One-Way Data Binding: Updates the view when the model changes.
  • Two-Way Data Binding: Synchronizes changes between the view and the model

One-Way Data Binding

Interpolation

Interpolation is the simplest form of data binding in Vue.js. It allows you to embed dynamic content within HTML.

				
					<div id="app">
  <p>{{ message }}</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{message:'Hello Vue!'}})</script>

Explanation:

  • {{ message }} binds the message data property to the paragraph element.
  • The output will be
				
					<p>Hello Vue!</p>

v-bind

The v-bind directive is used to bind HTML attributes to data properties.

				
					<div id="app">
  <a v-bind:href="url">Visit Vue.js</a>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{url:'https://vuejs.org'}})</script>

Explanation:

  • v-bind:href="url" binds the href attribute of the anchor tag to the url data property.
  • The output will be a clickable link directing to https://vuejs.org.

Two-Way Data Binding

v-model

The v-model directive creates a two-way binding on form input elements, allowing data to be updated from both the model and the view.

				
					<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{message:'Hello Vue!'}})</script>

Explanation:

  • v-model="message" binds the input value to the message data property.
  • Typing in the input field updates the paragraph in real-time.
  • The output will be
				
					<input value="Hello Vue!">
<p>Hello Vue!</p>

Attribute Binding

v-bind

The v-bind directive dynamically binds one or more attributes, or a component prop, to an expression.

				
					<div id="app">
  <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" v-bind:src="imageSrc" alt="Vue Logo">
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{imageSrc:'https://vuejs.org/images/logo.png'}})</script>

Explanation:

  • v-bind:src="imageSrc" binds the src attribute of the img tag to the imageSrc data property.
  • The output will be an image displaying the Vue.js logo.

Class and Style Binding

v-bind:class

The v-bind:class directive dynamically binds one or more classes to an element.

				
					<div id="app">
  <p v-bind:class="{ active: isActive }">Hello Vue!</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{isActive:!0}})</script>

Explanation:

  • v-bind:class="{ active: isActive }" binds the active class to the isActive data property.
  • The output will be
				
					<p class="active">Hello Vue!</p>

v-bind:style

The v-bind:style directive dynamically binds one or more inline styles to an element.

				
					<div id="app">
  <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Hello Vue!</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{activeColor:'red',fontSize:30}})</script>

Explanation:

  • v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" binds the color and fontSize styles to the respective data properties.
  • The output will be
				
					<p style="color: red; font-size: 30px;">Hello Vue!</p>

Binding Expressions

Using JavaScript Expressions

Vue.js allows the use of JavaScript expressions within bindings.

				
					<div id="app">
  <p>{{ message + ' ' + name }}</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{message:'Hello',name:'Vue'}})</script>

Explanation:

  • {{ message + ' ' + name }} uses a JavaScript expression to concatenate the message and name data properties.
  • The output will be
				
					<p>Hello Vue</p>

Computed Properties

Basics of Computed Properties

Computed properties are cached based on their dependencies and only re-evaluate when those dependencies change.

				
					<div id="app">
  <p>Reversed Message: {{ reversedMessage }}</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{message:'Hello Vue!'},computed:{reversedMessage:function(){return this.message.split('').reverse().join('')}}})</script>

Explanation:

  • reversedMessage is a computed property that returns the reversed message.
  • The output will be
				
					<p>Reversed Message: !euV olleH</p>

Computed vs. Methods

Computed properties are cached and only re-evaluate when their dependencies change, while methods re-run every time they are called.

				
					<div id="app">
  <p>Computed: {{ computedMessage }}</p>
  <p>Method: {{ methodMessage() }}</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{message:'Hello Vue!'},computed:{computedMessage:function(){return this.message.split('').reverse().join('')}},methods:{methodMessage:function(){return this.message.split('').reverse().join('')}}})</script>

Explanation:

  • computedMessage is a computed property.
  • methodMessage is a method.
  • The output will be the same for both, but the computed property is more efficient due to caching.

Computed vs. Watchers

Computed properties are used for simple reactive calculations, while watchers are used for more complex asynchronous or multiple dependent operations.

				
					<div id="app">
  <input v-model="question">
  <p>{{ answer }}</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{question:'',answer:'I cannot give you an answer until you ask a question!'},watch:{question:function(newQuestion){this.answer='Waiting for you to stop typing...';this.getAnswer()}},methods:{getAnswer:_.debounce(function(){if(this.question.indexOf('?')===-1){this.answer='Questions usually contain a question mark. ;-)';return}
this.answer='Thinking...';var vm=this;axios.get('https://yesno.wtf/api').then(function(response){vm.answer=_.capitalize(response.data.answer)}).catch(function(error){vm.answer='Error! Could not reach the API. '+error})},500)}})</script>

Explanation:

  • watch watches the question property for changes.
  • _.debounce from lodash is used to limit the rate at which getAnswer is invoked.
  • The output will update the answer after a delay when the question contains a question mark

Watchers

Basics of Watchers

Watchers allow you to perform asynchronous operations or execute complex logic in response to data changes.

				
					<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{message:'Hello Vue!'},watch:{message:function(newMessage,oldMessage){console.log('Message changed from '+oldMessage+' to '+newMessage)}}})</script>

Explanation:

  • watch: { message: function (newMessage, oldMessage) { ... } } watches the message property and logs changes.
  • The output will be
				
					<input value="Hello Vue!">
<p>Hello Vue!</p>

Deep Watchers

Deep watchers can be used to observe nested object changes.

				
					<div id="app">
  <button @click="changeName">Change Name</button>
  <p>{{ user.name }}</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{user:{name:'John Doe'}},watch:{user:{handler:function(newUser,oldUser){console.log('User changed from '+oldUser.name+' to '+newUser.name)},deep:!0}},methods:{changeName:function(){this.user.name='Jane Doe'}}})</script>

Explanation:

  • watch: { user: { handler: function (newUser, oldUser) { ... }, deep: true } } watches the user object deeply.
  • Clicking the button changes the name and logs the change.
  • The output will be
				
					<button>Change Name</button>
<p>John Doe</p>

Dynamic Bindings

Dynamic Arguments

Dynamic arguments allow binding to a dynamic attribute or event.

				
					<div id="app">
  <input v-bind:[attributeName]="attributeValue">
</div> <script type="litespeed/javascript">new Vue({el:'#app',data:{attributeName:'placeholder',attributeValue:'Enter your name'}})</script>

Explanation:

  • v-bind:[attributeName]="attributeValue" binds the dynamic attributeName to the attributeValue.
  • The output will be
				
					<input placeholder="Enter your name">

In this chapter, we explored the concept of data binding in Vue.js, from basic one-way binding with interpolation and v-bind to two-way binding with v-model. We also delved into attribute, class, and style bindings, as well as the use of computed properties, watchers, and dynamic bindings. Understanding data binding is crucial for building dynamic, reactive applications with Vue.js. By mastering these techniques, you can efficiently synchronize your data and views, creating seamless and interactive user experiences.Happy coding !❤️

Table of Contents

Home
Roadmap
ATS Resume
Playground
Resources