どうも、Vueに時々取り組んでいる私です。
さて、Composition APIというものがありまして、Composition APIを説明してくれているサイトもいっぱいあります。公式サイト
ただ、私はまずは触ってみたいと思うタイプなので、サクッと試したいなと思って
「 Composition API サンプル」
と検索してみても、nodeモジュール入れましょうとか、TypeScriptで作りましたとか、そういうちょっと手間がかかるサンプルが多かったので、私のような人のために載せておきます。
というわけで、以下Vueとcomposition APIはCDNから読み込みでやる（URLで読み込むということです）めちゃくちゃ簡単なサンプルです。
Vueのバージョン：2.6.10
Composition API：1.7.1
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body >
<div id ="sample">
<div>性<input type="text" v-model="lastName"></div>
<div>名<input type="text" v-model="firstName"></div>
<div>フルネーム：{{fullName}}</div>
</div>
<script src ="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.1"></script>
<script type="text/javascript">
const ref = VueCompositionAPI.ref
const computed = VueCompositionAPI.computed
new Vue({
el:'#sample',
setup(){
const lastName = ref('渋川')
const firstName = ref('剛毅')
const fullName = computed(() => lastName.value +' '+ firstName.value)
return {lastName, firstName, fullName}
}
})
</script>
</body>
上記をコピペしてsample.htmlという名前で保存して、ブラウザで開けばできます。
ここではComposition APIとはなんだとか、上記のコードの解説はしません。
私的にはこちらの記事がわかりやすかったです。
https://kobatech-blog.com/vue-composition-api/