Data Binding In Vue.js

The connection between app UI and the data display its call data bind. Whenever data change it is reflected automatically by the elements bound to the data. This process known as data binding process.

In this blog, we will learn how to data bind vue.js.

Step 1: Create a new vue project:

• vue create example

Step 2: Install bootstrap :

• npm install bootstrap

Step 3: open main.js file and import bootstrap path :

import Vue from 'vue'
import App from './App.vue'
import router from '../src/router/index.js'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Step 4: open App.vue file and add following lines :

<template>
  <section class="container">
      <h2>Data Binding & v-if</h2>
      <input type="text" v-on:input="setMessage($event.target.value)" v-on:keyup.enter="confirmMessage" />
      <br>
      <span>Message - {{ message }}</span>
      <br>
      <button type="button" class="btn btn-dark" @click="sendMessage()">ok</button>
      <br>
      <span v-if="!showMsg">Send Messae Here</span>
      <span v-if="showMsg">{{ confirmMessage }}</span>
  </section>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: '',
      confirmMessage: '',
      showMsg: false
    }
  },
  methods: {
    setMessage($event) {
      this.message = $event
    },
    sendMessage() {
      if (this.message == '') {
        this.showMsg = false
        this.confirmMessage = 'Send Messae Here'
      } else {
        this.showMsg = true
        this.confirmMessage = this.message
      }
    }
  }
}
</script>

Code in Action: