TechScribe Notes

1. v-if: 조건부로 불록을 랜드링 할 때 사용함Hello Vue3! 2.v-else : v-if가 거짓일 때 랜더링.Hello Vue3!Good bye! 3.v-else-if : 말 그래로 else-if 블록으로 여러 조건을 연결 가능. A B C Not A/B/C 4.여러개 html요소를 v-if로 연결하고 싶으면 사용할 수 있음 Title Paragraph 1 Paragraph 2  5. v-show Title toggle show  6.v-if vs v-show-v-if는 조건에 따라 랜더링을 하거나 안해줌 : 전환비용이 큼-> 런타임 시 조건이 변경되지 않는다면 v-if 가 좋음-v-show는 처음에 랜더링을 무조건 해주다가 조건에 따라 display속성으로 보여주거나 안 보이..

1. 객체 클래스 바인딩 :class (v-bind:class)를 사용해서 바인딩 가능함. 바인딩 된 클래스는 다른 클래스와 공존할 수 있고, 조건이나 계산된 후 바인딩 될 클래스가 결정되어야 하는 경우에는 computed함수와 함께 사용하여 바인딩할 수 있다.const classObject = computed(() => { return { active: isActive.value && !hasError.value, 'text-danger': !isActive.value && hasError.value, };});  2.배열에 바인딩const activeClass = ref('active')const errorClass = ref('text-danger')  3.인라인 스타일..

1. computed : 템플릿 문법 안에 내용이 길어지면 가독성이 떨어지기 때문에 계산한 속성을 사용할 수 있도록 해주는 함수.간결하고 선언적이므로 반복하여 사용하더라도 코드가 복잡해지지 않는다.const hasLecture = computed(() => { return teacher.lectures.length > 0 ? 'Yes' : 'No'})강의가 존재 합니까?:{{ hasLecture }}  2. computed 와 메서드의 차이결과적으론 같지만, 아래의 차이점을 가짐-메서드는 파라미터를 가질 수 없다.-computed 로 계산된 값은 캐시로 저장된다.-computed는 내 반응형 데이터가 변경된 경우에만 다시 계산되므로 랜더링 시 경제적임. 3. computed의 값을 변경하고 싶을 때co..

1. reactive() - 객체의 데이터를 반응형으로 선언하고 싶을 때 사용하는 함수.import { reactive } from 'vue'export default { setup() { const state = reactive({ count: 0 }) return { state } }}{{ state.count }}- ref()와 다른 점은 ref()는 원시데이터, reactive() 는 배열이나 객체 형태의 데이터에만 반응형으로 선언할 수 있게 해준다.- 객체의 깊이가 깊어져도 사용가능하다.  2. ref():변이 가능한 원시 데이터를 다루며, 하나의 속성 value만을 가진다.import { ref } from 'vue'const count = ref(0)console..

vue는 템플릿 문법을 통해서 DOM에 접근하여 인스턴트 데이터에 선언적으로 바인딩 할 수 있다. 1. 텍스트 보간법 문자열 : {{ message }} // 이중 중괄호로 사용  -데이터가 변하지 않는 일회성 데이터의 경우 v-once사용.문자열: {{ message }}   2. v-html데이터가 아닌 html을 출력할 때 사용. xss취약점이 될 수 있으니 신뢰 가능한 콘텐츠에서만 사용하도록 하고 사용자가 제공한 컨텐츠에서는 사용하지 않는다.(https://en.wikipedia.org/wiki/Cross-site_scripting)텍스트: {{ rawHtml }}v-html:   3. 속성바인딩 (v-bind) : 직접 html 속성에도 바인딩 가능함.template> div> div v-b..

setup() 함수는 composition API를 사용하기 위한 진입점 역할을 하며 인스턴스가 생성되기 전에 실행됨. 1.기본적인 사용:setup 함수 안에 반응형 상태를 선언하고, 객체로 반환하여 template안에 보여줄 수 있음. 선언한 상태는 반드시 return 안에 작성해줘야함. {{ count }} 2. setup함수의 매개변수-첫번째 매개변수는 props , 반응형 객체.export default { props: { title: String }, setup(props) { console.log(props.title) // 그냥 사용하면 객체 분할 할당 하지말고 props.xxx 으로 처리해야함 }} -toRef, toRefs만약 props의 반응성을 유지하면서 구조 분해..