viteプロジェクト（デモプロジェクト）を作成
yarn create vite
package.json内 scriptsセクションのコマンドを実行
localhostでページを開く
yarn dev
Vueプロジェクトの構成
App.vue：サンプルページの描画を行う
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app') // index.htmlのappタグの付いた部分にApp.vueを挿入
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div> // app.vueが挿入される
<script type="module" src="/src/main.ts"></script>
</body>
</html>
Vueファイルの構成
- script
- javascriptを記載するセクション
- templateセクション内で参照する
- template
- htmlを記載するセクション
- style
- CSSを記載するセクション
- 独自クラスの定義も可能
-
<style scoped></script>で他のVueファイルとsytleを共有しなくなる
example
<script setup lang="ts">
const word = "Qiita";
</script>
<template>
<div class="title">{{ word }}</div>
</template>
<style scoped>
.title{ color:lawngreen;
font-size: 20px;
}
</style>
v-bind
変数をHTMLタグの属性に値を渡す
NG
<script setup lang="ts">
const url = 'https://www.google.com/'
</script>
<template>
<a href="url">LINK</a>
</template>
v-bind
<script setup lang="ts">
const url = 'https://www.google.com/'
</script>
<template>
<a v-bind:href="url">LINK</a>
</template>
v-on
クリックなどのイベント処理の関数を渡す
v-on
<script setup lang="ts">
const user = "Mike";
const hello = (user:string) => {
alert('Hello ' + user + '!')
}
</script>
<template>
<button v-on:click="hello(user)">HELLO</button>
</template>
Ref / reactive
リアクティブシステム：Vue.jsの仕組み。データが変化した時、変化内容が即座にDOM(テンプレート)に反映される
NG
<script setup lang="ts">
let itemName = "Qiita";
const input = (event: any) => {
// 変数が変わってもテンプレートは更新されない
itemName = event.target.value;
}
</script>
<template>
<input v-on:input="input"/>
<label>{{ itemName }}</label>
</template>
単一の値をリアクティブにするにはRefを使用
Ref
<script setup lang="ts">
import { ref } from 'vue'
const itemName = ref<string>('Qiita');
const input = (event: any) => {
itemName1.value = event.target.value;
}
</script>
<template>
<input v-on:input="input"/>
<label>{{ itemName }}</label>
</template>
オブジェクトをリアクティブにするにはreactive関数を使用
reactive
<script setup lang="ts">
import { reactive } from 'vue'
const item = reactive({
name: 'Qiita'
})
const input = (event: any) => {
item.name = event.target.value;
}
</script>
<template>
<input v-on:input="input"/>
<label>{{ item.name }}</label>
</template>
双方向データバインディング v-model
inputフィールドが双方向にバインドする場合は、v-modelディレクティブを使用する
（Clearボタンでlabelのだけではなく、inputフィールドの値も削除する）
v-model
<script setup lang="ts">
import { reactive } from 'vue'
const item = reactive({
name: 'Qiita'
})
const input = (event: any) => {
item.name = event.target.value;
}
const clear = () => {
item.name = ''
}
</script>
<template>
<input v-model="item.name"/>
<!-- valueでオブジェクトを参照した時と同じ処理になる -->
<!-- <input v-on:input="input" v-bind:value="item.name"/> -->
<button v-on:click="clear">Clear</button>
<label>{{ item.name }}</label>
</template>
算出プロパティ computed
条件を基に値を生成する場合、computedを使用する。
computedを使用することで、vue内でキャッシュ等最適化される。
これでも動くが、vueではテンプレート内にロジックを持たせないように記載する
NG
<template>
<label>{{ item.name == "Jack" ? "It's Jack" : "Not Jack"}}</label>
</template>
computed
<script setup lang="ts">
import { computed } from 'vue'
const nameLabel = computed(() => {
if (item.name == "Jack") {
return "It's Jack";
} else {
return "Not Jack";
}
})
</script>
<template>
<label>{{ nameLabel }}</label>
</template>
監視プロパティ watch
こちらでもcomputed同様の処理が可能。
watch
<script setup lang="ts">
const nameLabel = ref<string>(item.name)
// 要素をリアクティブな値で返す
const { name } = toRefs(item)
// 第一引数：watchしたいリアクティブな値
// 第二引数：値が変更された時の処理
watch(name, () => {
if (name.value == "Jack") {
nameLabel.value = "It's Jack";
} else {
nameLabel.value = "Not Jack";
}
})
</script>
備考：eventの中身を見る
event
<script setup lang="ts">
const input = (event: any) => {
console.log(event);
console.log(event.target.value);
}
</script>
<template>
<input v-on:input="input"/>
</template>
参考