Vue.jsの復習 #Vue.js

はじめに

１年ぐらい前に学習したVue.jsを実務で使う機会をいただきました！
ということで、復習とアウトプットを兼ねて、ここに残すことにします。

この記事の対象者

Vue.jsを学習したけど忘れてしまった人
そんなのあったなぁ程度に思い返したい人

※Vue.js初学者の方はこの記事を見てもあまり参考にならないので、実際にコードが記載されている記事を参考に手を動かすことをお勧めします

Vue.jsの基礎要素

プロパティ

dataプロパティ

vueインスタンス内で保持する変数
呼び出す時は{{ 変数名 }}で可能

■サンプルコード

sample(呼び出し)

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

sample(定義)

data(){
  return {
    message: 'こんにちは'    //👈messageという変数名で、値がこんにちは
  };
}

methodsプロパティ

インスタンス内で定義された関数
呼び出す時は{{ メソッド名() }}で可能
メソッド内で利用していないdataが更新された場合でも勝手に実行される

■サンプルコード

sample(呼び出し)

<p>{{ hello() }}</p>

sample(定義)

methods: {
  hello(){
    return "hello";
  }
}

computedプロパティ

dataプロパティの変数を加工する時に使う
methodsプロパティと混同しやすい
呼び出す時は{{ メソッド名 }}
メソッド内で利用しているdataが更新された場合のみ実行される

■サンプルコード

sample(呼び出し)

<input v-model="name">   // 👈v-modelに関しては「ディレクティブ」の節に記載しています
<p>{{ nameToUpper }}</p>

sample(定義)

data(){
  return {
    name: ''
  };
},
methods: {
  nameToUpper(){
    return this.name.toUpperCase();
  }
}

watchプロパティ

dataの監視ができる
監視対象のdataが更新された時のみ実行される
oldValueとnewValueがデフォルトで引数として渡される
非同期処理で利用されることが多い

■サンプルコード

sample(呼び出し)

<input v-model="memo">   // 👈v-modelに関しては「ディレクティブ」の節に記載しています

sample(定義)

data(){
  return {
    memo: ''
  };
},
watch: {
  memo(newValue, oldValue){
    console.log('oldValue:',oldValue);
    console.log('newValue:',newValue);
  }
}

ディレクティブ

vue.js特有の指示文のこと。

v-bindディレクティブ

HTMLのタグの属性にインスタンスのプロパティ値をセットすることができる。
v-bind:属性名="プロパティ名"でセットする
:属性名="プロパティ名"で省略可能

■サンプルコード

sample(呼び出し)

<a v-bind:href="url">"url"で渡されたリンクに遷移します</a>

// 省略パターン
<a :href="url">"url"で渡されたリンクに遷移します</a>

sample(定義)

url: 'https://example.com'

v-onディレクティブ

イベントにインスタンスのメソッドを紐付けすることができる
v-on:イベント名="メソッド名"で紐付けすることができる
@イベント名="メソッド名"で省略可能

サンプルコード

sample(呼び出し)

<button v-on:click="myAlert">アラート</button>

// 省略パターン
<button @click="myAlert">アラート</button>

sample(定義)

mothods: {
  myAlert(event){
    console.log('自作アラート', event);
  }
}

v-modelディレクティブ

inputに入力された内容をインスタンスのプロパティに保持できる
保持した内容は即時反映される
フォーム入力の更新時イベントで役立つ
v-model="プロパティ名"で使用する

サンプルコード

sample(呼び出し)

<input v-model="name" />
<p>{{name}}</p>

sample(定義)

data(){
  return {
    name: ''
  }
}

このサンプルでは、inputに入力した内容が即時pタグのテキストに反映されます

v-if、v-else、v-else-ifディレクティブ

HTMLの中に条件を設定できる
プログラミング言語のif文、else文、if-else文と同等

サンプルコード

sample(呼び出し)

<p v-if="number === 0">0です</p>
<p v-else-if="number % 3 === 0">3の倍数です</p>
<p v-else>分かりません</p>

sample(定義)

data(){
  return {
    number: 3,  👈この値によって表示される文言が変ります
  };
}

v-forディレクティブ

HTMLの中で繰り返しを行うことができる
プログラミング言語のfor文と同等

サンプルコード

sample(呼び出し)

<p v-for="(favoriteWord, index) in favoriteWords" :key="index">
   {{ favoriteWord.user }} : {{favoriteWord.text}}
</p>

sample(定義)

data(){
  return {
    favoriteWords: [
      { user: '太郎', text: '成せばなる' },
      { user: '二郎', text: '人は人、自分は自分' },
      { user: '恵', text: '時は金なり' },
    ],
  };
}

終わりに

今回の内容は本当に基礎的なことですし、私個人のメモレベルの内容です。
もっと学習して深く理解し、効率の良いフロント開発を行っていきたいと考えています。
次はコンポーネントについても記事を作ろうかな。。