【Vue】用語集

Vue.js の入門書に出てくる用語を自分なりに定義しておきたいと思います。

間違いに気づいたらご指摘お願いします。

コンポーネント

テキストボックスやボタンなど HTML に出てくる部品。

複数のコンポーネントを集めて親コンポーネントを作ることもできる（HTML のフォームなど）。

単一ファイルコンポーネント

コンポーネントを定義したファイル。英語で言うと「single file components」。

中身は HTML の template と JavaScript と CSS（ SASS や SCSS でも OK ）。

.vue の拡張子がつく。

例：

<template>
<div class = "hoge">{{ text }}</div>
</template>

<script>
export default {
  name: 'fuga',
  data() {
    return {
      text: 'piyo'
    }
  }
}
</script>

<style>
.hoge { color: red; }
</style>

ディレクティブ

HTML のタグ内に含める、v-bind／v-model など、Vue 用の HTML 属性。

DOM の表示方法・表示内容・表示方法を Vue フレームワークに伝える役目を持つ。

例：

<div v-model="hoge"></div>

Mustache 構文

発音は「マスタッシュ」。

HTML（正確には .vue ファイル内の template タグ内） 内に含める 、プロパティを {{ }} で囲った表記方法。

プロパティの値がブラウザに表示される。

次のように使う。

<div>東京オリンピックまであと {{ day }} 日!!</div>

リストレンダリング

配列やオブジェクトの値などを v-for ディレクティブを使用して一つずつ表示していく機能。

また、表示された配列等の変更を監視し、表示を更新（追加・削除なども可能）する機能。

特定の範囲の値だけを表示したりソートしたりもできる。

公式サイトに詳しく載っている。
リストレンダリング — Vue.js

Vuex

データを管理する、Vue ライブラリ。公式ページ。

Vue のコンポーネント間で共通となるデータを管理できる。

親子／兄弟コンポーネント間でデータの受け渡しは結構めんどうくさいのでこのライブラリを利用することで簡潔に記述できる。

ただし、小さい Vue アプリでは使わないほうがシンプルさを保てる。

読み方は「ビューエックス」。
　

Nuxt

Vue、Vue-Router、Vuex、Vue Server Renderer、Vue-Meta を含んだフレームワーク。公式サイト。

サーバサイドレンダリングする際に便利。
　

　
まだまだ追記予定。

これで勉強しています。

基礎から学ぶ Vue.js