- 화면을 조작하기 위한 vue.js 제공하는 문법
<뷰 디렉티브>
- 형식 : v-
- "" 안에는 js 문법이 들어올 수 있음
1. v-on : 엘리먼트에 이벤트 리스너를 연결
<!-- 메서드 핸들러 -->
<button v-on:click="doThis"></button>
<!-- 동적 이벤트 -->
<button v-on:[event]="doThis"></button>
** v-on:submit -> @submit 과 동일하다.
2. v-bind : 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩
형식 - v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"
<app-header v-bind:propsdata="message"></app-header>
** v-bind 생략하고 :propsdata 과 동일하다.
3. v-model : 양방향 바인딩을 구현
<input v-model="searchText" />
4. v-if, v-else : if-else 구문과 동일. if, else두 개는 인접해 있어야 한다.
<div id="root">
<div v-if="liked">좋아요 눌렀음</div>
<button v-else v-on:click="onClickButton">like</button>
</div>
5. v-for : 반복문 구현, v-if 와 같이 사용하지 않는다
- arrary/object는 자료안의 데이터 갯수만큼 반복된다.
- 변수는 2개까지 작명이 가능하다. 왼쪽 ; array내의 데이터, 오른쪽 ; 1씩증가하는 정수
ex) <a v-for="(a,i) in 메뉴들" :key = "i">{{ i }}</a> => 1 2 3 출력
{{ a }} => 데이터 출
data() {
return {
todos: [
{
id: 1,
text: 'Learn to use v-for'
},
{
id: 2,
text: 'Learn to use key'
}
]
}
}
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
- v-if와 같이 사용해야하는 경우
<ul>
<template v-for="user in users" :key="user.id">
<li v-if="user.isActive">
{{ user.name }}
</li>
</template>
</ul>
6. v-show : -if 와 거의 동작이 비슷하지만 v-show는 단순히 css의 display 속성만 변경된다.
ok 의 값이 참이면 화면에 표시된다.
<h1 v-show="ok">Yes</h1>
공식문서 :
https://v3-docs.vuejs-korea.org/api/reactivity-core.html#watcheffect
<데이터 바인딩>
- reactivity 개념
- 형식 : {{ data }} 콧수염괄호 2개를 사용.
- 이유 :
- 데이터 변경이 용이함.
- 실시간 자동 렌더링 가능
ㅗhtml 속성도 데이터 바인딩이 가능하다.
<template>
<div>
<div>
<h4 :style="스타일">XX 원룸</h4>
<p>{{ price1 }} 만원</p>
</div>
<div>
<h4>XX 원룸</h4>
<p>{{ price2 }} 만원</p>
</div>
</div>
</template>
<script>
export default {
name : 'App',
data(){
return{
price1:60,
price2:70,
스타일 : 'color : red',
}
}
}
</script>
'vue.js' 카테고리의 다른 글
Vue CLI(command line interface) (0) | 2023.04.20 |
---|---|
watch, computed 속성 (0) | 2023.04.20 |
액시오스(Axios) (0) | 2023.04.20 |
뷰 라우터 (0) | 2023.04.19 |
같은 컴포넌트 레벨간의 통신 (0) | 2023.01.11 |