💚

Vue.jsのおさらい

2023/10/03に公開

チートシート

idea

Vue.jsのカンを取り戻すためのチートシートです。

create app

npm create vue@latest

ref

import { ref } from "vue";
let _item = ref();

// script内で変数にアクセスする
_item.value
// template内で変数にアクセスする
{{ _item }}

props

配列で渡す

親コンポーネント

<Component v-bind:_items="[_item, _data]"></Component>

子コンポーネント

import { computed } from "vue";// definePropsはimportせずに使える
const props = defineProps(["_items"]);
let _item_prop = computed(() => props._items[0]);
let _data_prop = computed(() => props._items[1]);

名前をつけて渡す

親コンポーネント

<Component :item="_item" :data="_data"></Component>

子コンポーネント

import { computed } from "vue";
const props = defineProps(["item","data"]);
let _item_prop = computed(() => props.item);
let _data_prop = computed(() => props.data);

computed

ref（リアクティブ）の値を反映した値を返す。
即時関数で使用することが多い。

即時関数

let _item_computed = computed(() => {
  return 2 * _item.value;
});

子コンポーネント

import { computed } from "vue";
const props = defineProps(["_item"]);
let _current = computed(() => props._item;

slot

使えると便利。

親コンポーネント

<Component>
  <template v-slot:title>タイトル</template>
  <template v-slot:text>本文</template>
</Component>

子コンポーネント（スロットコンポーネント）

<template>
  <div class="slot">
    <h2><slot name="title">初期タイトル（変数が与えられなかった場合に表示）</slot></h2>
    <p><slot name="text">初期本文（変数が与えられなかった場合に表示）</slot></p>
  </div>
</template>

watch

変数に変更があった場合に実行する。

import { watch } from "vue";

watch(
  _item.value,
  (next, prev) => {
    console.log(next,prev);
  },
  { deep: true } // オブジェクトなどの場合に、すべての階層を監視する
);

v-model

<script setup>
  let _setting = ref({
    text: "",
    select: "",
    radio: "",
    checkbox: [],
  });
	
const LangList = ["ja","en"];
</script>

<template>
  <!-- input:text -->
  <label>
    <span>テキストを入力</span>
    <input type="text" v-model="_setting.text" />
  </label>
  <!-- select -->
  <select v-model="_setting.select">
    <template v-for="lang in LangList">
      <option :value="lang" v-if="_setting.select != lang">{{ lang }}</option>
    </template>
  </select>
  <!-- input:radio -->
  <!-- name属性は無くてもいい -->
  <div>
    <label>
      <input type="radio" value="radio_a" v-model="_setting.radio" />
      <span>選択肢A</span>
    </label>
    <label>
      <input type="radio" value="radio_b" v-model="_setting.radio" />
      <span>選択肢B</span>
    </label>
  </div>
  <!-- input:checkbox -->
  <div>
    <label>
      <input type="checkbox" value="checkbox_a" v-model="_setting.checkbox" />
      <span>アイテムA</span>
      </label>
    <label>
      <input type="checkbox" value="checkbox_b" v-model="_setting.checkbox" />
      <span>アイテムB</span>
    </label>
    <label>
      <input type="checkbox" value="checkbox_c" v-model="_setting.checkbox" />
      <span>アイテムC</span>
    </label>
  </div>
</template>

DOM描画後に実行

関数内でlet _element = document.getElementById(target);のようにDOMNodeを取得する必要がある場合は、DOM描画後に実行する。

import { onMounted, nextTick } from "vue";
onMounted(() => {
  nextTick(() => {
    // ここに記述
  });
});

create app

ref

props

配列で渡す

名前をつけて渡す

computed

slot

watch

v-model

DOM描画後に実行

Discussion