概要
Vue3を軽く触ったときのサンプル
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Document</title>
</head>
<body>
<style>
.red {
color: red
}
.green {
color: green
}
.blue {
color: blue
}
</style>
<div id="app">
<div>
{{ message }}
{{ count }} <span v-if="count % 2 == 0">偶数</span>
{{ person }}
</div>
<div>
<button @click="countUp">Count Up</button>
</div>
<div>
<input v-model="person.firstName">
<input v-model="person.lastName">
</div>
<div>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<div v-bind:class="person.firstName">{{ person.lastName }}</div>
</div>
<script type="module">
const {createApp, ref, reactive, computed} = Vue
createApp({
setup() {
const message =ref('hello world')
const person = reactive({
firstName: 'Evan',
lastName: 'You'
})
const fullName = computed(() => {return person.firstName + person.lastName})
let count = ref(0)
const countUp = () => {
console.log(person.firstName)
console.log(fullName.value)
count.value++
}
const items = ["a", "b", "c"]
return {
message,
countUp,
count,
person,
items,
}
}
}).mount('#app')
</script>
</body>
</html>
[カテゴリ: プログラミング言語 > JavaScript]
[通知用URL]
Tweet
最終更新時間：2023年12月07日 15時55分31秒