概要

vueで勉強したことをアウトプットする。
Github

Ref関数

Composition API で使われるリアクティブなデータを作成するための関数で、主に単一の値をリアクティブに管理したいときに使う。
リアクティブとは自動的に反応することを指し、Ref関数で設定した変数の値が変更されれば、自動的に画面に反映される

使用方法

ref関数をインポートする

 import { ref } from 'vue'

リアクティブなオブジェクトを設定する

const count = ref(0);

オブジェクトの中身を参照する際は、.valueを用いる

const increment = () => {
    count.value++;
}

コンポーネントで利用する際は、そのままで使用することができる

<template>
    <div>
        <p>カウント: {{ count }}</p>
        <button @click="increment">増やす</button>
    </div>
</template>

使用例

<script setup>
import { ref } from 'vue'
const count = ref(0);

const increment = () => {
    count.value++;
}
</script>

<template>
    <div>
        <p>カウント: {{ count }}</p>
        <button @click="increment">増やす</button>
    </div>
</template>

N.KOTANI

v-ifとv-show

v-if

Vue.jsで要素を条件に応じて表示または非表示にするためのディレクティブ。
条件がtrueのときにその要素をレンダリングし、falseのときには要素をDOMから完全に削除する。

使用方法

  <p v-if="name === ''">名前を入力してください</p>
  <p v-else-if="name.length < 10">10文字以上で入力してください</p>
  <p v-else>{{ name }}さん、こんにちは</p>

v-show

v-ifと同じように動くが、DOMは存在し、条件に当てはまるまでdisplay:noneで非表示になる。

使用方法

<p v-show="name.length > 10">10文字以上ですね</p>

使用例

<script setup>
import { ref } from 'vue'

const name = ref("")
</script>

<template>
  <p v-if="name === ''">名前を入力してください</p>
  <p v-else-if="name.length < 10">10文字以上で入力してください</p>
  <p v-else>{{ name }}さん、こんにちは</p>
  <p v-show="name.length > 10">10文字以上ですね</p>
  <div class="pt-1">
    <input type="text" v-model="name" @input="name" />
  </div>
</template>

<style>
.center {
  text-align: center;
}
</style>