vueについて勉強したことなどを。
vueとは?
近年のJavaScriptフレームワークの一種で「双方向データバインディング」というのが大きな特徴かと思います。
どんなことができるかというと入力フォームの変更があった瞬間にそれをキャッチして、別の部分の値を変えたり、メソッドを発言させるというようなことです。
もちろんこれらはjQueryでもできますが、jQueryの場合、基本的にDOMを使って値を取らなくてはいけないため、DOM構造が複雑になると値を管理するのが大変だったりします。
その点vueだと値自体を持たせることができるため、その必要がなくなります。Angularを以前に少しやりましたが、ほぼ一緒という印象です。
ちなみにvue自体の文法より、導入方法の方が難しいです(笑)
自分が調べた導入方法などをメモっていこうと思います。
方法1 CDN
ネットから直でvueを呼ぶ方法で、おそらく一番簡単な方法です。
vueを読み込んでいるhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script> <script src='./vue.js'></script> <title>vue</title> </head> <body> <div id="demo"> </div> </body> </html> |
vue.js(vue自体のプログラム)
|
1 2 3 4 5 6 7 8 9 10 |
window.onload = function() { var demo = new Vue({ el : '#demo', data : { message : 'Hello world' } }) } |
メリット
- 導入が簡単
- 容量削減に繋がる
デメリット
- バージョンアップにより動かなくなる可能性がある
- ライブラリを一限管理(package.jsonなどで)できなくなる
ちなみにcdnに関してはバージョン無指定で最新バージョンを使うことができるものもあります(リンク参照)。
https://jp.vuejs.org/v2/guide/installation.html
方法2 npm+コンパイル
近年のライブラリ管理で一般的なnpmを使い、JavaScript自体をコンパイルして管理する方法です。
バージョンの問題かもしれませんが、プラグインなどを適切に管理しないとエラーが出て動きません。
vueを読み込むhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>vue</title> </head> <script src='./vuedist/build.js'></script> <script src='./vue.js'></script> <body> <div id="app"> </div> </body> </html> |
package.json(ライブラリ管理のみ)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "dependencies": { "vue": "^2.5.17" }, "devDependencies": { "axios": "^0.18.0", "bootstrap": "^4.1.3", "gulp": "^3.9.1", "gulp-sass": "^4.0.1", "gulp-webpack": "^1.5.0", "jquery": "^3.3.1", "node-sass": "^4.9.3", "popper": "^1.0.1", "popper.js": "^1.14.4", "sugar": "^2.0.4", "tether": "^1.4.4", "vue-loader": "^15.4.2", "vue-resource": "^1.5.1", "vue-template-compiler": "^2.5.17", "webpack": "^4.20.0", "webpack-cli": "^3.1.1" } } |
webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
const VueLoaderPlugin = require('vue-loader/lib/plugin') var dest = __dirname + '/vuedist'; // 出力先ディレクトリ var src = __dirname + '/vueresource'; // ソースディレクトリ module.exports = { //読み込みファイル entry: src + '/resource.js', //出力ファイル output: { path: dest, filename: 'build.js' }, //コンパイルするときにモジュールが必要な場合 //ここに記述 module: { rules: [ { //vueという拡張子ファイルに対して //vue-loaderを使うよという意味 test: /\.vue$/, loader: "vue-loader" } ] }, //これがないと→のエラーがでる[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 } }, //template使うにはこれ入れないとだめ plugins: [ new VueLoaderPlugin() ] } |
vueresource/resource.js
|
1 2 3 4 5 |
import Vue from 'vue' //const vue = requre('vue') //windowオブジェクトにセットしないとコンパイル後の別のJSで使えないようです。 window.$ = window.jQuery = require('jquery'); window.Vue = Vue |
vue.js自体は方法1と同じ
コンパイル方法
|
1 |
npx webpack |
メリット
- ライブラリを一限管理できる
デメリット
- 学習コストが少し高い
[…] vueの環境構築 […]