こんにちは!kossyです!
さて、今回は流行りのJavaScriptライブラリである、Vue.jsをCDNで導入する手順と、簡単な使い方だけご紹介します。
(この記事では、まずは導入して動かし体感する、ということに重きを置いているため、細かい機能の説明は割愛しています。)
Vue.jsってなに?何ができるの?
Vue.jsはJavaScriptのライブラリで、Evan Youという方が開発し2014年に初版がリリースされています。
てっきり2年くらい前にリリースされたのかと勝手に思っていましたが、既に世に出てから4年が経過しているライブラリになります。
ちなみに、同じJavaScriptのライブラリとして比較されるReact.jsは、2013年に初版がリリースされています。
Vue.jsは、一部のページを動的に切り替えることができる、SPA(シングルページアプリケーション)を実装することができます。
React.jsもSPAを構築することができますが、Vue.jsと比べ、学習コストが高いと言われているようです。
また、他のライブラリを組み合わせて自分好みで自由に実装できる点も、React.jsとは異なっていると言えそうです。
参考にしたサイト:
Vue.jsとは?人気急上昇のJavaScriptフレームワークを解説 | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
他のフレームワークとの比較 — Vue.js
Vue.jsの導入
Vue.jsはCDNで導入することが可能なので、
jQueryのようにお手軽に導入することができます。
より高度なアプリケーションを構築する場合は、別のツールを使って環境構築をする必要がありますが、
APIを使ってデータを取得しブラウザに表示するくらいであれば、CDNでも問題ないと思います。
CDNのソースは、以下のページのCDNの項に記載されています。
https://jp.vuejs.org/v2/guide/installation.html
コピーしたソースを、index.html (ファイル名は任意)のbodyタグの終了の直前で読み込んで、
Vue.jsのコードを記載するmain.js(ファイル名は任意)も読み込めば導入は終了です。
Vue.jsのざっくりとした使い方
コードを書いていきます。
Vue.jsでは、Vue 関数で新しい Vue インスタンスを生成することによって起動します。
main.js var app = new Vue ({ el:"#app" })
ここで生成したVueインスタンスをHTMLに渡すことで、
Vue.jsが動作する領域を生成することができます。
index.html <div id="app"> </div>
div id="app"~/divの領域以外のところにVue.jsの処理を記述しても、
領域外になり、動作しませんので、気をつけましょう。
あとはmain.jsに処理を記述し、index.htmlに表示するという流れが基本になります。
例えば、
main.js var app = new Vue ({ el:"#app", data: { message: "lorem ipsum" } }) index.html <div id="app"> {{ message }} </div>
と記述し、ブラウザで開くと、
通常のHTMLであれば、{{}}が表示されそうですが、表示されていません。
これは、マスタッシュ(口ひげ)構文と呼ばれ、messageプロパティで生成したlorem ipsumというテキストを、
HTML上でデータバインディングし展開するために用いられるものです。
また、フォームに入力した値を、リアルタイムで変更することもできます。
index.html <div id="app"> <input type="text" v-model="message"> <p> {{ message }} </p> </div>
と記述し、ブラウザで動作を確認してみます。
リアルタイムで値を変更することができています。
これは、inputタグに追記したv-modelディレクティブによって実現できています。
inputタグやtextareaタグにv-modelディレクティブを用いることによって、
フォーム入力の値をデータバインディングすることができます。
まとめ
導入もお手軽でコードも簡潔なので、
コードを書いて動作させる喜びを知るにはうってつけだと思います。
参考にしたサイト
Vue.js 公式ガイド
https://jp.vuejs.org/
Vue JS入門決定版!jQueryを使わないWeb開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ(有料)
https://www.udemy.com/learn-vuejs/