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

jQueryの書き方について

jQueryの書き方は一般的に以下のように書きます。

上記の処理ですが、細かく書くとDOMが構築されてから実行という意味が含まれていま …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …