Vue 基礎勉強 コンポーネント

(Vue.js 3.1.5を使用)

コンポーネントの例

ボタンとテキストボックスを表示するコンポーネント
sample-componentを作成する。

javascript

const app = Vue.createApp({
    data: () => ({
    })
})
app.component('sample-component', {
    template: '<p><button>Button</button><input type="text"/></p>'
})
app.mount('#app')

template:には、UIの見た目を記述できる。

html

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

コンポーネントは、何度も再利用可能。

htmlに4回記述すれば、4つ表示される。

html

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