Simple Templating using Vue

by shivkumarganesh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div id="app">
  <div class="card">
    <div class="card-block">
      <!-- You can see the templating used below -->
      <h4 class="card-title">{{cardTitle}}</h4>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <p class="card-text">{{cardText}}</p>
      <a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{cardLink}}</a>
      <a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{cardAnotherLink}}</a>
    </div>
  </div>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    cardTitle: 'John Doe',
    cardText: 'Hello I am a regular visitor of The Web Juice',
    cardLink: 'Profile',
    cardAnotherLink: 'Share'
  }
});