Binding Text Area with a Paragraph

In This particular example we will use Vue to Bind the text area with the paragraph for a binding. You can read the tutorial here. http://thewebjuice.com/learn-fast-handling-user-inputs-form-bindings-using-vue

by shivkumarganesh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h2>
Binding Input Box
</h2>
<div id="app">
  <label class="badge badge-default">This is binded text -->{{text}}</label>
  <br>
  <input v-model="text">
</div>
<br>
<!-- App 2 -->
<div id="app1">
  <label class="badge badge-default">This is binded text with initialized value -->{{text}}</label>
  <br>
  <input v-model="text">
</div>
<hr>
<h2>
Binding Text Area
</h2>
<div id="app2">
  <p>{{text}}</p>
  <br>
  <textarea v-model="text"></textarea>
</div>
<hr>
<a href="http://thewebjuice.com/learn-fast-handling-user-inputs-form-bindings-using-vue">Visit The Web Juice for a Full Tutorial</a>

JavaScript

// Instantiating a new Vue instance
var app = new Vue({
  el: '#app',
  data: {
    text: ''
  }
});
// Instantiating a new Vue instance which has preinitialized text
var app1 = new Vue({
  el: '#app1',
  data: {
    text: 'Hello'
  }
});

var app2 = new Vue({
  el: '#app2',
  data: {
    text: ''
  }
});