山崎屋の技術メモ

IT業界で働く中で、気になること、メモしておきたいことを書いていきます。

【Vue】用語集

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

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

コンポーネント

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

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

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

コンポーネントを定義したファイル。

中身は HTML の template と JavaScript と CSS。

.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(正確にはテンプレート) 内に含める 、プロパティを {{ }} で囲った表記方法。

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

次のように使う。

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

 
 

まだまだ追記予定。

これで勉強しています。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js