BETA

Vueコンポーネント体験

投稿日:2019-09-16
最終更新:2019-12-09

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ファイルも使えるようにしようかな

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

だいたい急に挑戦してゴールにたどり着かずに飽きる日々です

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう