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

クリック編集のjQuery

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。 先日社内アプリをつくっていたところ、そう …

no image

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

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

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

no image

vueでの配列、オブジェクトの反映に関して

vueでのハマりポイントですが、関門としては コンポーネント間の連携 オブジェクトや配列となった時に反映がされない などがあげられると思います。 コンポーネント間の連携に関してはこちらの記事でも書き、 …