俺のためのライフマネジメントブログ

良い人生を送るために、生活に関わることを書く

vue基本

vueではこんな感じで、双方向のデータのマッピングができる。 reactive関数を使う場合は引数はオブジェクトで渡す。 埋め込みは``で${}で出来る。 reactiveはvalueでアクセスしなくても良くなる。 valueプロパティはなく、オブジェクト型なので、キーでアクセスする感じ

<script setup>
import {reactive} from "vue";

const user = reactive({name: "takashi"})

const alertName = () => {
  alert(`${user.name}です!`)
}

</script>

<template>
<div>
    <input v-model="user.name">
    <p> {{ user.name }}</p>
    <button @click="alertName">alert!</button>
</div>
</template>