Vue

by cedric_tarou

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Vue App</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <div id="app">
    <like-component></like-component>
    <like-component></like-component>
    <like-component></like-component>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>

CSS

body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

Vue

(function() {
  'use strict';

  // Components

  var likeComponent = Vue.extend({
    template: '<input type="radio">Like</input>'
    // template: '<button>Like</button><button>Like</button>'
    // template: '<div><button>Like</button><button>Like</button></div>'
  });

  var app = new Vue({
    el: '#app',
    components: {
      'like-component': likeComponent
    }
  });

})();