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

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

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

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

no image

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

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

no image

JavaScriptのタイマー

えーボタンを押すと、時間の計測がはじまり、別のボタンを押すとそのタイマーがとまるというもの。 WEBのアプリでは比較的よくお目にかかるタイプかと思います。 一番多いのは情報商材のページかもしれないです …

no image

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

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