【Vue.js】Vue.jsの導入

去年、Vue.jsの勉強を始めようとしましたが、他の勉強を優先したので、後回しになってしまいました。そちらの勉強が一通り済んだので、今年に入ってからVue.jを勉強しました。まずは、Vue.jsの導入と基本の表示について書きます。

Vue.jsとは

ウェブページの見た目の制御をJavaScriptよりもお手軽にできるようにした、フレームワークです。Vue.jsを始めるには、HTML、CSS、JavaScriptの知識を持っていると良いです。詳しくは、公式サイトをご覧ください。

CDN版とVue CLI版

Vue.jsには、CDN版とVue CLI版があります。

CDN版は、Vue.js本体をscriptタグで読み込んで使います。導入のハードルが低く、初心者の方が始めるのにオススメです。お試しするのに丁度良いです。

Vue CLI版は、コマンドラインの操作があるので、慣れていない方には難しいかもしれません。

Vue.jsの導入

ここでは、CDN版で進めていきます。*1

CDN版には、開発バージョンと本番バージョンがあります。開発バージョンは、警告の出力とデバッグモードが付いています。本番バージョンは、警告の出力が無く、ファイルが軽量です。今回は、開発バージョンを使います。Vue.jsを閉じのbodyタグの直前で読み込みます。その下に、これから自分が編集するファイルを読み込みます。

<!-- Vue.js開発バージョン -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- これから自分が編集するファイル -->
<script src="js/main.js"></script>

基本の表示

Vue.jsを読み込んだら、文字を表示してみます。以下のように記述して、ブラウザで表示を確認します。

<!-- index.html -->
<div id="app">{{message}}</div>

// main.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  }
});

HTML側で記述した{{message}}の部分が、Hello Vue.jsに置き換わったのが確認できると思います。

今回は、ここまでです。記述のルールの詳細については、公式サイトをご確認ください。

参考サイト

• はじめに — Vue.js
• Vue CLI

*1:ファイルをダウンロードして、読み込んでも構いません。