Vue.js | 技術のメモ箱

概要

Vue.js

参考元

Vue.jsの書き方

プロジェクトへの追加、実行やビルド方法はクイックスタートに記載されている。
オンライン環境もある。

Vue.jsではHTML、CSS、JavaScriptをまとめて.vueファイル内に記述する。
JavaScriptは文末のセミコロンを省略するのが公式のスタイル。

<script setup>
// JavaScriptを記述する
import { ref } from 'vue'
const message = ref('Hello World!')
</script>

<template>
  <!-- HTMLを記述する -->
  <h1>{{ message }}</h1>
</template>

<style>
/* CSSを記述する */
h1 { color: red; }
</style>

構文

リアクティブな変数

リアクティブとは、変更されたときに更新のトリガーとなるような状態のこと。
リアクティブな変数の値が変更されると、HTMLの表示や依存関係にある他の変数も更新される。
ref()は引数の値をrefオブジェクトにラップして返す。引数の値はvalueプロパティに格納される。
reactive()は引数で渡されたオブジェクト自体をリアクティブにする。

import { ref, reactive } from 'vue'

const message = ref('Hello World!')
console.log(message.value)

const counter = reactive({ count: 0 })
console.log(counter.count)

算出プロパティとは、リアクティブな変数に基づいてvalueを計算する算出ref

HTMLへの反映

{{ }}の中にJavaScriptの式を書ける。結果の値が出力される。

<h1>{{ message }}</h1>

変数をHTMLタグの属性に設定するには、v-bindを使う。よく使われるので、省略記法がある。

<h1 v-bind:class="titleClass">Page Title<h1>
<h1 :class="titleClass">Page Title<h1>

イベントリスナー

clickしたときなどのイベント時に実行する関数・メソッドはv-onに指定する。
@clickという書き方はv-on:clickの糖衣構文。

<button v-on:click="btnFunction">push</button>
<button @click="btnFunction">push</button>

@clickには直接JavaScriptのコードを書くこともできる。

<button @click="count++">push</button>

本来のクリック処理の無効化（e.preventDefault()とe.stopPropagation()）も簡単に書ける。

<a href="https://vuejs.org" @click.prevent="linkFunction">link</a>

フォームバインディング

フォームの入力値をリアクティブな変数に紐づけるには、v-modelを使う。

<input v-model="inputStr">
<p>入力された内容: {{ inputStr }}</p>

条件分岐

v-ifに条件式を指定する。trueなら表示される。v-else-if、v-elseもある。

<p v-if="num === 1">numの値は1</p>
<p v-else-if="num === 2">numの値は2</p>
<p v-else>当てはまらない</p>

リストの表示

v-forを使う。:keyには一意になる値を指定する。

<ul>
  <li v-for="item in itemList" :key="item.id">{{ item.text }}</li>
</ul>

テンプレート参照

直接DOMの操作をする方法

ウォッチャー

直接refを監視して、値が変化するたびにコールバックを実行する。

コンポーネント

別のコンポーネントを子コンポーネントとしてレンダリングすることができる。

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
<ChildComp />
</template>

子コンポーネントは、親コンポーネントからpropsを介して入力を受け取ることができる。