skillup

技術ブログ

JavaScript

vueの環境構築

投稿日:

vueについて勉強したことなどを。

vueとは?

近年のJavaScriptフレームワークの一種で「双方向データバインディング」というのが大きな特徴かと思います。

どんなことができるかというと入力フォームの変更があった瞬間にそれをキャッチして、別の部分の値を変えたり、メソッドを発言させるというようなことです。

もちろんこれらはjQueryでもできますが、jQueryの場合、基本的にDOMを使って値を取らなくてはいけないため、DOM構造が複雑になると値を管理するのが大変だったりします。

その点vueだと値自体を持たせることができるため、その必要がなくなります。Angularを以前に少しやりましたが、ほぼ一緒という印象です。

ちなみにvue自体の文法より、導入方法の方が難しいです(笑)

自分が調べた導入方法などをメモっていこうと思います。

方法1 CDN

ネットから直でvueを呼ぶ方法で、おそらく一番簡単な方法です。

vueを読み込んでいるhtml

vue.js(vue自体のプログラム)

メリット

  • 導入が簡単
  • 容量削減に繋がる

デメリット

  • バージョンアップにより動かなくなる可能性がある
  • ライブラリを一限管理(package.jsonなどで)できなくなる

方法2 npm+コンパイル

近年のライブラリ管理で一般的なnpmを使い、JavaScript自体をコンパイルして管理する方法です。

バージョンの問題かもしれませんが、プラグインなどを適切に管理しないとエラーが出て動きません。

vueを読み込むhtml

package.json(ライブラリ管理のみ)

webpack.config.js

vueresource/resource.js

vue.js自体は方法1と同じ

コンパイル方法

メリット

  • ライブラリを一限管理できる

デメリット

  • 学習コストが少し高い

-JavaScript
-

執筆者:


comment

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

関連記事

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

途中入力離脱防止処理 JavaScript

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

no image

jQueryの書き方について

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

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

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …