Tk tech blog

ホーム プログラミング

Vue3学習メモ

2024-01-24
Vue 3JavaScript

次の職場での利用技術のため、こちらの内容を実施。

https://ja.vuejs.org/tutorial/#step-1

https://www.amazon.co.jp/gp/product/B09YY4YK9T/

学習メモ

  • 基本的にrefを使う
  • v-bind: {HTMLAttributeName}で動的な値を紐づける
    • :{HTMLAttributeName}でも同じ
  • v-on: {Event}でfunctionをElementに紐づける
    • @ = v-on(@clickとか)
  • v-model
    • inputなど、双方向的なバインディングを簡略化できる
      <script setup>
import { ref } from 'vue'

const text = ref('')

</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>
  • v-if, v-else
    • v-ifに紐づけるbooleanの値に応じて、可視性を変更
  • v-for
    <ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
  • computed() 算出プロパティ
    • 値が変わったのを検知して、更新してくれる
      <script setup>
import { ref, computed } from 'vue'

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}

const filteredTodos = computed(()=>{
  if (!hideCompleted.value) {
    return todos.value
  }
  // hideCompletedがtrueだったら完了しているものは見せない
  return todos.value.filter((t) => !t.done )
})
  
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>
    • ref属性
      • テンプレート参照（紐づくDOMにアクセス）
      • ただし、DOMにアクセスするには、これにもvalueプロパティへのアクセスが必要
        <script setup>
import { ref, onMounted } from 'vue'

const pElementRef = ref(null)

onMounted(()=>{
  pElementRef.value.textContent = "aaa"
})
</script>

<template>
  <p ref="pElementRef"></p>
</template>
    • コンポーネント（UI）
      • 親から子に受け渡すときは、refを渡す
      • 子は、Propsで受け取る
        <!-- 親 -->
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

<!-- 子 -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>
    • コンポーネント（emit）
      <!-- 親 -->
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')
</script>

<template>
  <!--  @emitName  -->
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

<!-- 子 -->
<script setup>
// emitの定義
const emit = defineEmits(['response'])

// 第一引数がイベント名
// 追加の引数が親に渡される
emit('response', 'hello from child')
</script>

<template>
  <h2>Child component</h2>
</template>
    • slot
      • 子コンポーネント側を<slot>とすることで、親コンポーネントからのUIを受け取れる
    • Provide/inject
      • 親要素のProvideメソッドの対象となったオブジェクトを、子要素でも孫要素でも呼べる
    • コンポーネントを動的に切り替える
      • v-bind:is="{shallowRef obj}"で切り替える
      • shallowRef = オブジェクトそのものの置き換えだけを監視
    • <KeepAlive>
      • コンポーネントの状態管理
      • 例えばブラウザバックしたときとか、form入力前後とかで、入力しても値を維持したいときに使われる
    • <Transition>
      • アニメーションのfadeなどで使う
      • v-forで作られたリストに対しては、<TransitionGroup>
    • <Teleport>
      • アラームやモーダルのようなコンポーネント外のものをコンポーネント内で使用したいときのもの
      • toでidやタグ名などを指定することで、既に存在するDOMに移動
        • 理想としては、デフォルトの表示と分離して管理したいため、#appのdivにネストされていないのが理想
    • <Suspense>は実験的機能のため割愛（Reactのものとほぼ一緒の認識）

「プログラミング」カテゴリの他の記事

Honoを触ってみた
Javaとrubyの違いメモ