buto > /dev/null

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

Vueコンポーネント体験

Vue.js

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の内容をコンポーネント化 ↓このように表示されます f:id:butorisa:20201020124523p:plain

さいごに

これまで探り探りでやってきたVue.js学習でしたが、やっと分かるところができました コンポーネントって便利ですね！Webページには作成しておいた画面パーツを配置するだけなので 1ファイルのコード量が少なくなって見やすいです もう少ししたらvue-cliをインストールしてこのPCでvueファイルも使えるようにしようかな