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

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

no image

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …

アーカイブ