반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- qunit
- Android
- 오블완
- linux
- build
- 네트워크
- 센토스
- androidstudio
- node
- 개발
- localserver
- MachineLearning
- MAC
- VirtualBox
- TensorFlow
- centos
- vsCode
- 리눅스
- 티스토리챌린지
- react
- ReactNative
- jest
- unittest
- IOS
- xcode
- Chrome
- PYTHON
- webpack
- 맥
Archives
- Today
- Total
로메오의 블로그
[Vue3 + typescript] Options, Composition, Setup 비교 본문
반응형
VUE.JS 목록
Option 방식
<template>
<div>
<h1>Test Option</h1>
<input v-model="name" type="text" />
<input v-model="age" type="number" />
<button @click="increase">증가</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "TestOption",
components: {},
data() {
return {
name: "Google",
age: 11,
};
},
methods: {
increase() {
this.age += 1;
},
},
});
</script>
Composition 방식
<template>
<div>
<h1>Test Composition</h1>
<input v-model="name" type="text" />
<input v-model="age" type="number" />
<button @click="increase">증가</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "TestComponent",
components: {},
data() {
const name = ref("Google");
const age = ref(11);
const increase = () => {
age.value += 1;
};
return {
name,
age,
increase,
};
},
});
</script>
script-setup 방식
<script setup lang="ts">
import { ref } from "vue";
const name = ref("Google");
const age = ref(11);
const increase = () => {
age.value += 1;
};
</script>
<template>
<div>
<h1>Test Setup</h1>
<input v-model="name" type="text" />
<input v-model="age" type="number" />
<button @click="increase">증가</button>
</div>
</template>
Child 콤포넌트
Option 방식
TestOption.vue
<template>
<div>
<h1>Test Option</h1>
<input v-model="name" type="text" />
<input v-model="age" type="number" />
<button @click="increase">증가</button>
<TestOptionItem :name="name" :age="age" />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import TestOptionItem from "./TestOptionItem.vue";
export default defineComponent({
name: "TestOption",
components: { TestOptionItem },
data() {
return {
name: "Google",
age: 11,
};
},
methods: {
increase() {
this.age += 1;
},
},
});
</script>
TestOptionItem.vue
<template>
<h3>Test Option Item</h3>
<p>name: {{ name }}</p>
<p>age: {{ age }}</p>
<p>birth: {{ birth }}</p>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "TestOptionItem",
props: {
name: {
type: String,
required: true,
},
age: {
type: Number,
required: true,
},
},
computed: {
birth() {
return 2022 - this.age;
},
},
});
</script>
Composition 방식
TestComposition.vue
<template>
<div>
<h1>Test Composition</h1>
<input v-model="name" type="text" />
<input v-model="age" type="number" />
<button @click="increase">증가</button>
<TestCompositionItem :name="name" :age="age" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import TestCompositionItem from "./TestCompositionItem.vue";
export default defineComponent({
name: "TestComponent",
components: { TestCompositionItem },
data() {
const name = ref("Google");
const age = ref(11);
const increase = () => {
age.value += 1;
};
return {
name,
age,
increase,
};
},
});
</script>
TestCompositionItem.vue
<template>
<h3>Test Composition Item</h3>
<p>name: {{ name }}</p>
<p>age: {{ age }}</p>
<p>birth: {{ birth }}</p>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({
name: "TestCompositionItem",
props: {
name: {
type: String,
required: true,
},
age: {
type: Number,
required: true,
},
},
setup(props) {
const birth = computed(() => 2022 - props.age);
return { birth };
},
});
</script>
Setup 방식
TestSetup.vue
<script setup lang="ts">
import { ref } from "vue";
import TestSetupItem from "./TestSetupItem.vue";
const name = ref("Google");
const age = ref(11);
const increase = () => {
age.value += 1;
};
</script>
<template>
<div>
<h1>Test Setup</h1>
<input v-model="name" type="text" />
<input v-model="age" type="number" />
<button @click="increase">증가</button>
<TestSetupItem :name="name" :age="age" />
</div>
</template>
TestSetupItem.vue
<script setup lang="ts">
import { defineProps, computed } from "vue";
const props = defineProps<{ name: string; age: number }>();
const birth = computed(() => {
return 2022 - props.age;
});
</script>
<template>
<h3>Test Setup Item</h3>
<p>name: {{ name }}</p>
<p>age: {{ age }}</p>
<p>birth: {{ birth }}</p>
</template>
https://vuejs.org/api/sfc-script-setup.html#typescript-only-features
VUE.JS 목록
반응형
'Frontend > Vue' 카테고리의 다른 글
[Vue3 + typescript] Quasar 설치 [vite-plugin] (0) | 2022.09.06 |
---|---|
[Vue3 + typescript] reactive, ref, toRefs 반응성 주입 (0) | 2022.09.06 |
[Vue3 + typescript] Volar 설치 (0) | 2022.09.05 |
[Vue3 + typescript] vuetify 설치 (0) | 2022.09.05 |
[Vue3 + typescript] 프로젝트 생성 vite (0) | 2022.09.05 |
Comments