#3 Vue.js基礎（v-on）
kurumin
プログラミングのーと
Vue.jsの古い書き方・新しい書き方
kurumin
scriptブロック内の書き方が色々あって混乱するのでメモ。
Vueについて調べたときに古い情報か新しい情報なのか見極めるポイントにする。
Vue2の書き方
Options APIという以下のような書き方。
コンポーネント名、データ定義、関数部など、機能によって記述する場所が決まっていた。
<script>
import Helloworld from '@/components/HelloWorld.vue';
export default {
components: { // コンポーネント
HelloWorld,
},
data () { // データ定義
return {
count: 0,
}
},
methods: { // 関数部
increment() {
this.count++;
},
},
・・・ // mountedなど、その他の機能
};
</script>Vue3以降
Composition APIという書き方にガラッと変わった。
export default内のdataやmethods、mountedというものがsetup関数内に直接書けるようになった。
<script>
import { ref } from "vue";
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
},
return {
count,
increment,
}
},
};
</script>setup内で定義した変数や関数はreturnすることで<template>内で使うことができる。
Vue3.2～（最新？）
Vue3から導入されたsetup関数が、3.2から更に新しい書き方ができるようになった。
<script setup>
import { ref } from "vue";
const count = ref(0);
const increment = () => {
count.value++;
},
</script><script setup>とすることで、export default、setup、returnが不要になった。
また、今までは<template>、<script>だった順番も<script>、<template>と入れ替わった。
ABOUT ME
