Vue.jsのコンポーネントがやっと使えるようになりました
投稿者の基本情報
- Vue.jsを知ったのは10か月ほど前
- 知って学習を始めたはいいが、HTML・JS・CSSの基礎知識がなさすぎて挫折
- 仕事でも使っていたjQueryを一から学習
- 1週間前くらいから学習を再開しました！
コンポーネントについて
公式リファレンスや技術ブログ、会話の中でも登場する「コンポーネント」 とっつにくい言葉だな～と敬遠していましたが、画面パーツです！（と思っています）
見出しエリア、表示エリア、入力フォームなど画面パーツごとにファイルを分けて作成しておくことで 複数のページで画面パーツを使いまわせたり（再利用）、レイアウト変更などのメンテナンス作業もしやすくなります
特にvueファイルでは1ファイルの中にHTML・JavaScript・CSS要素をまとめて書けるのですっきりしそう（CodeSandboxでしか使ったことない）
vueコンポーネントを使ってみよう
CDNでVue.jsを利用しています
<!-- main.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- Vue.js 最新ver CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>メインページ</title> </head> <body> <header><h5>componentsフォルダ内のコンポーネントを配置するエリアです</h5></header> <div id="component_area"> <!-- コンポーネントを配置するタグ --> <vue-component></vue-component> </div> <!-- htmlのid属性を利用するのでjsファイルは最後に読み込む --> <script src="./main.js"></script> </body> </html>
// main.js
// Vueコンポーネント
var Component = {
template:'<iframe src="./components/chat.html" width="600" height="400"></iframe>'
};
new Vue({
el: '#component_area',
components:{
'vue-component':Component // Vueコンポーネントを使えるようにする
}
});
var Components:{…}で他のhtml（chat.html）の内容を表示するようにします
→ chat.htmlの内容をコンポーネント化
↓このように表示されます
さいごに
これまで探り探りでやってきたVue.js学習でしたが、やっと分かるところができました コンポーネントって便利ですね！Webページには作成しておいた画面パーツを配置するだけなので 1ファイルのコード量が少なくなって見やすいです もう少ししたらvue-cliをインストールしてこのPCでvueファイルも使えるようにしようかな
