디렉티브란?
: 'v-'로 시작한다.
: 디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for, v-on and v-slot는 예외)
📌 기본 디렉티브
- v-for:
반복문을 사용하기 위한 디렉티브이다.
//예시1
[html]
<div id="app">
<li v-for="item in city">도시: {{item}}</p>
</div>
[JS]
new Vue({
el: "#app",
data: {
city: ['서울', '대전', '대구'];
}
})✏️ 결과값1
> 도시: 서울 > 도시: 대전 > 도시: 대구
//예시2 (index 사용 예제)
[html]
<div id="app">
<li v-for="(item, i) in city">No.{{i}}, 도시: {{item}}</p>
</div>
[JS]
new Vue({
el: "#app",
data: {
city: ['서울', '대전', '대구'];
}
})✏️ 결과값2
> No.1, 도시: 서울 > No.2, 도시: 대전 > No.3, 도시: 대구
- v-html:
HTML 코드를 직접적으로 입력해줄 때 사용되는 디렉티브이다.
v-html의 내용은 일반 HTML에 삽입된다.
//예시
[html]
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<p v-html="aLinkToMedium"></p>
</div>
[JS]
new Vue({
el: "#app",
data: {
aLinkToMedium: "<a href='http://medium.com'>링크</a>"
}
})
//결과값 '링크' 링크 생성- v-bind:
태그 속성을 동적으로 바인딩할 때 사용한다.
Shorthand: : or . (when using .prop modifier)
//예시
<!-- bind an attribute -->
<img v-bind:src="imageSrc" />
<!-- shorthand -->
<img :src="imageSrc" />- v-on:
요소에 이벤트 리스너를 연결한다.
Shorthand: @
//예시
<!-- method handler -->
<button v-on:click="doThis"></button>
<!-- shorthand -->
<button @click="doThis"></button>-
v-model
Create a two-way binding(양방향 데이터) on a form input element or a component✔️ 제한: <input>, <select>, <textarea>, components
📌 JS에서 !!란?
-
다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환하기 위해 사용.
-
정의되지 않은 변수 undefined 값을 가진 내용의 논리 연산 시에도 확실한 true / false를 가지도록 하는게 목적.
-
EX)
true //true
!true //false
!!true //true
📌 $(dollar)의 의미
- vue에서 전역 객체 속성
- private하게 사용하는게 아닌 public하게 사용하는 속성
📌 ==와 ===의 차이
- ==는 '값'만 비교하고, ===는 '타입'까지 비교한다.
📌 !! 의미
- 느낌표두개(!!)는 다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환(Type Conversion)하기 위해 사용한ㄷ.
