Vue.js | コンポーネント作成のサンプルプログラム

html
app.js
実行結果

html

<div id="demo">
  <input v-model="inputValue">
  <comp-child v-bind:message="inputValue"></comp-child>
</div>

<comp-child v-bind:message="inputValue"></comp-child>

</div>

app.js

import Vue from 'vue';

Vue.component('comp-child', {
  template: `<p>入力した内容は {{ message }}</p>`,
  props: ['message']
})

const demo = new Vue({
  el: '#demo',
  data: {
  	inputValue: ''
  }
});

import Vue from 'vue';

Vue.component('comp-child', {

template: `<p>入力した内容は {{ message }}</p>`,

props: ['message']

})

const demo = new Vue({

el: '#demo',

data: {

inputValue: ''

}

});

実行結果

Vue.js サンプルプログラム集: Dev

html

app.js

実行結果

400 Bad Request