skillup

技術ブログ

JavaScript

vueの環境構築

投稿日:2019年3月10日 更新日:

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

vueとは?

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

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

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

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

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

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

方法1 CDN

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

vueを読み込んでいるhtml

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

メリット

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

デメリット

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

ちなみにcdnに関してはバージョン無指定で最新バージョンを使うことができるものもあります(リンク参照)。

https://jp.vuejs.org/v2/guide/installation.html

方法2 npm+コンパイル

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

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

vueを読み込むhtml

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

webpack.config.js

vueresource/resource.js

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

コンパイル方法

メリット

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

デメリット

  • 学習コストが少し高い

-JavaScript
-,

執筆者:


comment

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

関連記事

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

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

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

アーカイブ