서론
공부 중인 강의에서 2와 3버전의 차이점을 보여주면서 강의를 하고 있습니다.
Vue에서는 크게 script, template, style 3개로 구분하는데 script에서 함수, 컴포넌트 바인딩의 차이점도 알 수 있었고 setup을 통해 컴포넌트를 단 한줄로 import 가능합니다. 또한, style scoped를 해서 해당 vue파일에서만 style이 적용되게 할 수 있었습니다.
본론
빌트인 - 디렉티브
v-text
v-text는 엘리먼트의 텍스트 컨텐츠 속성을 설정하므로, 엘리먼트 내부의 기존 컨텐츠를 덮어씁니다.
텍스트 컨텐츠의 일부를 업데이트해야 하는 경우, 이중 중괄호를 사용해야 합니다.
간단하게 자바스크립트의 innterText기능과 유사하다고 생각합니다.
<script setup>
const message = "Vue3!!"
</script>
<template>
<p v-text="message"></p>
// 위 아래 동일 하지만 아래를 더 많이 사용
<p>{{message}}</p>
</template>
v-html
v-html의 내용은 Vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입됩니다.
또한, 웹 사이트에서 HTML 동적으로 렌더링 방식이라 XSS 공격으로 쉽게 이어질 수 있고 싱글 파일 컴포넌트(SFC)에서 scoped(범위를 지정한) Style은 v-html 내부 컨텐츠에 적용되지 않습니다. 왜냐하면 해당 HTML은 Vue의 템플릿 컴파일러에서 처리되지 않기 때문입니다. 이러한 이유로 권장하지 않는다고 나와있습니다.
자바스크립트에서 innterHTML입니다.
<template>
<div v-html="html"></div>
</template>
v-show
v-show는 인라인 스타일을 통해 display CSS 속성을 설정하며, 엘리먼트가 표시될 때 초기 display 값을 설정하려고 시도합니다.
<template>
<div v-show="true">콘솔 창에서 해당 부분이 display:block</div>
<div v-show="false">콘솔 창에서 해당 부분이 display:none</div>
</template>
v-if, v-else, v-else-if
표현식의 truthy 값을 기반으로 엘리먼트 또는 템플릿 일부를 조건부로 렌더링합니다.
v-if 엘리먼트가 토글되면, 엘리먼트와 여기에 포함된 디렉티브/컴포넌트가 파괴되고 재구성됩니다. 초기 조건 값이 falsy이면, 내부 컨텐츠가 전혀 렌더링되지 않습니다.
텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내기 위해 <template>에 사용할 수도 있습니다.
<script setup>
const num = 7
</script>
<template>
<p v-if="num < 5">5 미만.</p>
<p v-else-if="5 <= num && num < 10">5이상 10미만.</p>
<p v-else>10 이상</p>
</template>
// <p>5이상 10미만.</p> 이 출력됩니다.
v-for
소스 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링합니다.
디렉티브는 반복되는 과정의 현재 값에 별칭을 제공하기 위해, 특수 문법인 alias in expression(표현식 내 별칭)을 사용해야 합니다.
<script setup>
const arrDate = [
{id: 1, name: "Kim"}
{id: 2, name: "Park"}
]
<script>
<template>
<ul>
<li v-for="(item, idx) in arrData" :key="idx">
{{idx}}. {{item.id}}: {{item.name}}
</li>
</ul>
</template>
// 0. 1: Kim
// 1. 2: Park
또한, 반복문을 사용했으므로 각각의 요소에 key값을 줘야합니다. (안하면 key값 설정하라고 에러발생합니다 ㅋㅋㅋㅋㅋ)
v-on
엘리먼트에 이벤트 리스너를 연결합니다.
수식어
- .stop - event.stopPropagation() 호출.
- .prevent - event.preventDefault() 호출.
- .capture - 캡처 모드로 이벤트 등록.
- .self - 이벤트가 이 엘리먼트에서 전달된 경우에만 트리거 됨.
- .{keyAlias} - 이벤트가 특정 키에 대해서만 트리거 됨.
- .once - 이벤트가 한 번만 트리거 됨(일회용처럼).
- .left - 마우스 왼쪽 버튼으로만 이벤트가 트리거 됨.
- .right - 마우스 오른쪽 버튼으로만 이벤트가 트리거 됨.
- .middle - 마우스 중앙(힐 클릭) 버튼으로만 이벤트가 트리거 됨.
- .passive - { passive: true } 옵션으로 DOM 이벤트를 등록.
// 메서드 핸들러
<button v-on:click="doThis"></button>
// 동적 이벤트
<button v-on:[event]="doThis"></button>
// 인라인 표현식
<button v-on:click="doThat('hello', $event)"></button>
// 단축 문법
<button @click="doThis"></button>
// 단축 문법 동적 이벤트
<button @[event]="doThis"></button>
// 전파 중지
<button @click.stop="doThis"></button>
// event.preventDefault() 작동
<button @click.prevent="doThis"></button>
// 표현식 없이 event.preventDefault()만 사용
<form @submit.prevent></form>
// 수식어 이어서 사용
<button @click.stop.prevent="doThis"></button>
// 키 별칭을 수식어로 사용
<input @keyup.enter="onEnter" />
// 클릭 이벤트 단 한 번만 트리거
<button v-on:click.once="doThis"></button>
// 객체 문법
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
이벤트 같은 경우 사용하는 경우가 너무 많아서 공식문서의 예시를 발췌했습니다.
v-bind
하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.
class 또는 style 속성을 바인딩하는 데 사용되는 경우, v-bind는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원합니다. 자세한 내용은 아래 링크된 가이드 섹션을 참고합시다.
엘리먼트에 바인딩을 설정할 때, Vue는 기본적으로 연산자 검사를 위한 in을 사용하여, 엘리먼트에 프로퍼티로 정의된 키가 있는지 확인합니다. 프로퍼티가 정의되면, Vue는 속성 대신 DOM 프로퍼티로 값을 설정합니다. 이것은 대부분의 경우 작동하지만, .prop 또는 .attr 수식어를 명시적으로 사용하여 이 동작을 재정의할 수 있습니다. 이것은 특히 커스텀 엘리먼트로 작업할 때 필요합니다.
컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언되어야 합니다.
인자 없이 사용하는 경우, 속성을 이름-값 쌍으로 포함하는 객체를 바인딩하는 데 사용할 수 있습니다. 이 모드에서 class와 style은 배열 또는 객체를 지원하지 않습니다.
// 속성 바인딩 const imageSrc= "String"
<img v-bind:src="imageSrc" />
// 동적인 속성명
<button v-bind:[key]="value"></button>
// 단축 문법
<img :src="imageSrc" />
// 단축 문법과 동적 속성명
<button :[key]="value"></button>
// 인라인으로 문자열 결합
<img :src="'/path/to/images/' + fileName" />
// class 바인딩 배열구문 조건없이 클래스 부여 가능, 객체구문 key: value값
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
// style 바인딩
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
// 속성을 객체로 바인딩
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
// prop 바인딩. "prop"은 자식 컴포넌트에서 선언되어 있어야 함
<MyComponent :prop="someThing" />
// 자식 컴포넌트와 공유될 부모 props를 전달
<MyComponent v-bind="$props" />
해당 구문도 예시가 너무 많고 활용하는 곳도 많아서 앞으로 공부하면서 중요한 구문이면 작성할 예정입니다.
출처: 공식문서
정리
중요도가 높은 v-bind(:), v-on(@) 구문을 먼저 작성하고 했어야했는데.. 공식문서를 보면서 학습을해서 공식 문서 순서대로 작성했습니다. 우선 빌트인 디렉티브는 더 있지만 추가적인 학습을 진행하면서 작성할 예정입니다.
