VueJS - Practise

Let's do it...

by Nenad Novakovic

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div id="app" class="container">
  <p class="mb-4 lead" v-once>
    Initial title: {{ message }}
  </p>
  
  <p class="mb-4 lead">
    Title: {{ message }}
  </p>
  
  <ul class="list-group mb-4">
    <li 
      class="list-group-item"
      v-for="(value, key) in links">
      <a 
        v-bind:href="value"
        target="_blank">
        {{ key | capitalize }}
      </a>
    </li>
  </ul>
  
  <div class="form-group">
      <input 
        type="text" 
        placeholder="Enter Message"
        class="form-control"
        v-model="message"
      />
  </div>
  
  <div v-html="html"></div>
</div>

CSS

#app {
  margin-top: 45px;
}

JavaScript

new Vue({
	el: '#app',
  
  filters: {
  	capitalize(string) {
    	return string.charAt(0).toUpperCase() + string.slice(1);
    }
  },
  
	data: {
  	message: 'Hello World',
    
    links: {
    	google: '//google.com',
      bing: '//bing.com'
    },
    
    html: '<p id="sample">This is HTML Paragraph</p>'
  }
});