コンポーネント 基本形

component

by sarunokoshikake

HTML

<div id="app">
  <my-component1></my-component1>
  <my-component2></my-component2>
  <my-component3></my-component3>
  <my-component4 class="p"></my-component4>
  <div is="my-component5"></div>
  <my-component6></my-component6>
</div>

CSS

.p {
  color:red;
}

JavaScript

Vue.component('my-component1', {
  template: '<p>生温かい肩叩き器</p>'
})

var myComponent2 = {
  template: '<p>派出所で手術中</p>'
}

var myComponent3 = Vue.extend({
  template: '<p>新春シャンソンショー</p>'
})

var myComponent4 = {
  template: '<p>老若男女骨粗鬆症</p>'
}

var myComponent5 = {
  template: '<p>アンドロメダ座だぞ</p>'
}

Vue.component('my-component6', {
  template: '<p>{{ message }}</p>',
  data: function() {
    return {
      message: 'お綾や、親にお謝り'
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-component2': myComponent2,
    'my-component3': myComponent3,
    'my-component4': myComponent4,
    'my-component5': myComponent5
  }
})