skillup

技術ブログ

JavaScript

vueのコンポーネント化

投稿日:2019年3月17日 更新日:

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。

既存のvueの記事

Vue.jsについて

vueの環境構築

今まではCDNで読み込んだり、HTMLの中に直接vueを入れてきましたが、コンポーネント化することで、vueのロジック、テンプレート、スタイルを切り分けることが可能になります。

ファイル構成

src/app.js

エントリーポイントとなるJavaScriptで役割としては

  • npmで管理されたモジュールの読み込み
  • vue自体のコンポーネントの読み込み

などです。

src/CheckPref.vue

ここがvueのコンポーネント自体になります。

コンポーネント自体をここでファイル分割してまとめています。

小規模なものだったら読みこまずにここでやってしまった方がいいかもしれません・・・

htmlは普通のhtmlにvueを読みこませればOKです。

src/js/checkpref.js

実際のvueの処理を書くところです。

index.html

コンポーネント化したvueを読み込むhtmlです。

webpack.config.js

参考URL

https://github.com/umanari145/vue

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

ajaxがらみのイベントの発動とwhenに関して

実務で住所のプルダウンを実装する機会がありました。 [東京都][中央区][明石町] みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。 これを実装するときのポイントですが、新規保存より …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …