-
출처 : https://github.com/somteacodes/quizappvue/blob/Part-2/src/views/Home.vue
-
강의 출처 : https://www.youtube.com/watch?v=IuNx7Ts66rc&list=PLjh-ViK0OwrIrmJ1y6ElTDrPOE6HryH6F&index=3
* retun
▶ 함수를 사용할 때 export default내에서 정의한 함수를 return값에 넣는 것이 특이했음
(아래 설명한 1번 방법 말고도 2번 방법도 존재함)
▶ 이에 대한 설명을 풀이한 블로그 : https://leestrument.tistory.com/m/entry/setup-%EC%95%88%EC%97%90-%ED%95%A8%EC%88%98%EB%93%A4%EC%9D%84-js-%ED%8C%8C%EC%9D%BC%EB%A1%9C-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0-%EC%9E%AC%EC%82%AC%EC%9A%A9%EC%84%B1
▶ 1. Vue에서 함수가 존재하려면 함수 또한 객체이므로 다른 객체의 요소에 집어 넣은 후 객체를 return 하는 것 → setup() 안에서 정의한 state에 바로 접근 가능
<script>
export default {
setup() {
const testFunctions = () => {
console.log("테스트")
}
return {
testFunctions
}
}
}
</script>▶ 2. export default로 함수들을 바깥으로 빼는 것, .js파일로 분리하는 것 (첫 번째 방법은 setup() 안에 있는 다른 변수에 접근 불가능)
const testFunctions = () => {
console.log("테스트")
}
export default testFunctions* ref
▶ 공식문서 설명 : https://v3.ko.vuejs.org/guide/component-template-refs.html
▶ 참고 : https://question0.tistory.com/m/26
▶ props와 이벤트가 이미 있지만, 자식 요소에 javascript를 이용해 직접 접근해야 하는 경우 ref 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML에 요소에 부여함으로써 직접 접근 가능
▶ v-bind, $emit, v-model은 데이터를 전달하는 반면 ref는 자식 요소에 접근만 가능함
▶ ref의 속성은 컴포넌트가 렌더링 된 이후에 적용되기 때문에 반응형으로 구상을 위한 computed나 template에서는 사용하면 안 됨
<script>
import { ref } from "vue";
setup() {
const hello = (element) => {
console.log(element);
};
};
return {
hello
}
}
</script>[id 속성처럼 적용함]
<template>
<div class="hello" :ref="hello"><p>안녕하세요</p></div>
</template>(결과)
div.hello
div.hello
* v-for
▶ 공식문서 설명 : https://v3.ko.vuejs.org/guide/list.html
▶ 제목처럼 v-for로 엘리먼트에 배열 매핑한다고 하는 것은 반복되는 경우를 v-for로 제어한다는 의미
<script>
import { ref } from "vue";
export default {
setup() {
const currentQuestion = ref({
question: "",
answer: 1,
choices: [],
});
const questions = [
{
question:
"Which programming language shares its name with an island in Indonesia?",
answer: 1,
choices: ["Java", "Python", "C", "Jakarta"],
},
{
question: "On Twitter, what is the character limit for a Tweet?",
answer: 3,
choices: ["120", "160", "140", "100"],
},
{
question: "What does the 'MP' stand for in MP3?",
answer: 4,
choices: [
"Music Player",
"Multi Pass",
"Micro Point",
"Moving Picture",
],
},
];
return {
currentQuestion,
questions,
};
},
};
</script>[결과]
▶ item : 0, 1, 2, 3
▶ choice : "Java", "Python", "C", "Jakarta"
▶ key값은 각 노드의 id를 추적하여 재사용하거나 순서 변경하기 위한 작업을 위함
<template>
<div v-for="(choice, item) in currentQuestion.choices"
:key="item">
//공식문서의 <li v-for="(item, index) in items">와 동일
<div class="p-3 rounded-lg">{{ item }}</div>
<div class="flex items-center pl-6">{{ choice }}</div>
</div>
</template>* onMounted()
▶ 공식문서 설명 : https://vuejs.org/api/composition-api-lifecycle.html
▶ 라이프사이클 훅으로, 구성요소가 마운트된 후 호출될 콜백을 등록함
▶ 라이프사이클 훅 : 자동으로 this 컨텍스트가 인스턴스에 바인딩 되어 있으므로, data, computed, methods 속성에 접근 가능, 화살표 함수를 이용해 라이프 사이클 메소드를 정의하면 안 됨(부모 컨텍스트를 바인딩 하므로, this는 예상하는 바와 같은 컴포넌트 인스턴스가 아니기 때문) (https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html#beforecreate)
▶ 바인딩 : 값이 서버상에서 들어간 것, UI를 통해 표시하고자 하는 데니터를 실제 데이터와 연결해주는 프로세스(v-bind라는 예약어가 있으나 같은 작업을 하는 ":"만 넣어도 작동함)
참고 : https://tragramming.tistory.com/m/105
▶ 마운트 : 컴포넌트, 템플릿, 렌더링된 DOM에 접근 가능(비슷한 경우인 created가 있는데 이는 데이터 초기화에 대한 목적이 큼)
참고 : https://aomee0880.tistory.com/185
function onMounted(callback: () => void): void
<script>
import { onMounted, ref } from "vue";
export default {
const onQuizStart = () => {
currentQuestion.value = questions[questionCounter.value];
};
onMounted(() => {
onQuizStart(); //호출될 콜백
});
//리턴에 넣지 않음
}
</script>