[vue.js]単一ファイルコンポーネントでコンポーネントを定義

JavaScript

2018.06.032018.12.30

vue.jsではコンポーネントを定義する方法として、単一ファイルコンポーネントがあります。
これは、1コンポーネントを1ファイルで管理することができる物となります。
このファイルでは、コンポーネントで使用するHTML,javascript,cssを.vue拡張子のファイルで管理します。

また、以下の問題を解決します。

グローバル宣言は全てのコンポーネントに一意な名前を強制すること

シンタックスハイライトの無い文字列テンプレートと複数行 HTML の時に醜いスラッシュが強要されること

CSS サポート無しだと、 HTML と JavaScript がコンポーネントにモジュール化されている間、これ見よがしに無視されること

ビルド処理がないと Pug (前 Jade) や Babel のようなプリプロセッサよりむしろ、 HTML や ES5 JavaScript を制限されること

vue.js ガイド単一ファイルコンポーネントより

.vueファイルを作成

template,script,styleタグにそれぞれ、HTML,javascript,cssを書くことで、コンポーネントを定義します。


<button>
{{ text }}
</button>

export default {
name: "sample-button",
props: {
text: {
type: String,
default: "default"
},
size: {
type: String,
default: null
}
},
computed: {
classies() {
return this.size ? ['button', this.size] : ['button']
}
},
methods: {
onClick() {
console.log(this.size)
this.$emit("click");
}
}
}

<style scoped>
    .button {<br />
        font-size: 16px;<br />
        font-weight: bold;<br />
        border: solid 1px;<br />
        border-radius: 5px;<br />
        margin: 5px;<br />
        padding: 3px 5px;<br />
        width: 120px;<br />
        height: 40px;<br />
    }</p>
<p>    .button:hover {<br />
        opacity: 0.3;<br />
    }</p>
<p>    .full {<br />
        width: 100%;<br />
    }<br />
</style>