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

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

途中入力離脱防止処理 JavaScript

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

アーカイブ