vue.jsではコンポーネントを定義する方法として、単一ファイルコンポーネントがあります。
これは、1コンポーネントを1ファイルで管理することができる物となります。
このファイルでは、コンポーネントで使用するHTML,javascript,cssを.vue
拡張子のファイルで管理します。
また、以下の問題を解決します。
- グローバル宣言は全てのコンポーネントに一意な名前を強制すること
- シンタックスハイライトの無い文字列テンプレートと複数行 HTML の時に醜いスラッシュが強要されること
- CSS サポート無しだと、 HTML と JavaScript がコンポーネントにモジュール化されている間、これ見よがしに無視されること
- ビルド処理がないと Pug (前 Jade) や Babel のようなプリプロセッサよりむしろ、 HTML や ES5 JavaScript を制限されること
.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>
環境
項目 | バージョン |
---|---|
node | 9.11.1 |
vue.js | 2.5.2 |

ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり!
中日ドラゴンズを応援してます。
コメント