【Vue】Vueとは

Vue.js

JavaScriptフレームワークのVueについて勉強し始めたのでメモ

Vueの特徴
  • コンポーネント指向
  • 仮想DOMを利用している
  • ルーティングやグローバルの状態管理は関連ライブラリに担当させている
  • プログレッシブに導入できる
導入方法（選択肢は3つ）
  • CDN経由でライブラリをインポート
  • npmを利用してインストール
  • Vue CLIでプロジェクトを構築

以下はCDN経由でのインポート（バージョン2.6.14の場合）
※vue.jsはデバッグ用のファイルでファイルサイズが大きいため、本番環境ではvue.min.jsに置き換える

<body>
    <!-- ここにページ本文 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="../js/life.js"></script>
</body>

ブラウザにhello, world!を表示するには以下のように書く

hello.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="./hello.js"></script>
</body>

</html>

hello.js

let app = new Vue({
  el: "#app",
  data: {
    message: "hello, world!",
  },
});
基本的な構文

Vue.jsの核となるのはVueクラス

new Vue({...})

Vueインスタンスの引数にはoption: value,...のハッシュ形式で動作オプションを指定できる

hello.jsで利用しているのは以下

let app = new Vue({
  el: "#app", // el: Vue.jsを適用する要素
  data: { // data: データオブジェクト
    message: "hello, world!",
  },
});

elオプション
このコードではelを#appとしているので、html側でid="app"の要素の配下でVue.jsが有効になる
Vue.jsが管理する範囲を限定するという意味でもhtmlタグやbodyタグを対象にするのは避けた方が良い

dataオプション
dataオプションはテンプレートから参照できる値を格納したオブジェクト

データオブジェクトへのアクセス

テンプレートからオブジェクトにアクセスするには{{...}}を用いる（マスタッシュ構文）
なお{{...}}で利用できるのは式のみ

<p>{{ message }}</p>