【Vue.js】Vue3.2でCompositionAPIで書いたコードがめっちゃ読みやすくなりそうじゃない?
Vue3.2がリリースされたらしい。内容がいい感じだった。
script setup
Compositon APIで書くとどうしても気になる構文の縦長さ。
<template> <button @click="addNum">Num:{{ num }} </div> <template> <script> import { ref } from 'vue' export default { setup () { const num = ref(10) const addNum = () => num.value++ return { num, addNum } } } </script>
これが
<template> <button @click="addNum">Num:{{ num }} </div> <template> <script setup> import { ref } from 'vue' const num = ref(10) const addNum = () => num.value++ </script>
こうなる。超スリム。
Composition API書く時の最初のアレってどう書くんだっけ?って悩まなくてよくなりそう。
returnを書かなくてもよくなるので、バインディングが上手くいってないと思ったらreturnに書き忘れた!っていうのもなくなりそう。
気をつけないとなんでもかんでもtemplateで参照できちゃうので、そこだけ注意かも?なんか回答ありそう。
style v-bind
<script setup> import { ref } from 'vue' const color = ref('red') </script> <template> <button @click="color = color === 'red' ? 'green' : 'red'"> Color is: {{ color }} </button> </template> <style scoped> button { color: v-bind(color); // 👈 v-bindできる 神 } </style>
もう見たまんま。styleでv-bindができる。神オブ神
こんなことしなくてよくなる
【Vue.js】VueCompilerに怒られずにtemplateにstyleタグを埋め込みたい - いいねのお勉強ノート