Vueコンポーネントの要素属性に小道具を渡す

Question

.vueファイルのHTML要素の属性に小道具を渡そうとすると、レンダリングが停止するだけです。私は間違って何をしていますか？

script.js

import hInput from './components/hInput.vue' 
Vue.component('h-input', hInput); 
const app = new Vue({ 
    el: '#head', 
}); 

のindex.php

<div id="head"> 
    <h1>{{config('app.name')}}</h1> 
    <h-input placeholder="Hi" name="hello"></h-input> 
</div> 

hInput.vue

<template> 
    <div> 
     <input type="text" placeholder="{{placeholder}}"> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['placeholder', 'name'] 
    }; 
</script> 

Answer 1

使用：ここでは、コードですbinding syntax、テキスト補間ではありません。

<template> 
    <div> 
     <input type="text" v-bind:placeholder="placeholder"> 
    </div> 
</template> 

省略形もあります。

<template> 
    <div> 
     <input type="text" :placeholder="placeholder"> 
    </div> 
</template>