클래스와 스타일 바인딩
선택자 이용
vue에서는 클래스에 여러 개의 데이터를 연결할 수 있도록 하는 패턴(객체, 배열)을 제공한다.
객체 리터럴을 쓰면 값이 true인 키값이 class속성 값으로 적용된다.
선택자에 해당하는 스타일을 따로 지정해줘야 한다.
{적용될 클래스 이름 : t/f의 값이 담긴 data}
- 클래스 이름과 data이름이 같을 경우 하나로 축약할 수 있다.
- 클래스 이름에 특수 문자가 포함 될 시 따옴표로 감싸줘야 한다.
<h1 :class="{ active: isActive, 'title-small': isSmall}"> {{ msg }} <h1>객체 데이터를 data()안에서 정의해서 사용할 수 있다.
<h1 :class="styleObject"> {{ msg }} <h1>data() {
return {
msg: 'Hello Vue!',
active: false,
small: true,
styleObject: {
active: false,
'title-small':true
}
}
}반응형 데이터를 활용해야한다면 (클래스를 동적으로 적용해야한다면)
Computed옵션에 객체를 반환하는 함수를 선언해서 사용해야한다.
데이터가 바뀌면, computed안의 함수 중 바뀐 데이터를 의존하는 함수가 실행된다.
→ 클래스가 다시 설정된다.
<h1 :class="styleObject"> {{ msg }} <h1>computed: {
styleObject() {
return {
active: this,active,
'title-small': this.small
}
}
}인라인 방식 스타일 적용
데이터 바인딩이나 동적으로 관리해야 할 때는 인라인 방식의 스타일 적용이 권장된다.
스타일을 따로 작성해줄 필요 없이 해당 태그의 속성으로 직접 스타일을 지정할 수 있다.
객체 리터럴로 여러 속성을 편리하게 지정할 수 있다.
속성: 속성 값(데이터)- 둘 다 같으면 하나로 생략 가능하다.
- css의 속성은 선택자와 달리 카멜케이스를 지원한다.
<h1
:style="{color, width: `${width}px`}"
@click="changeColor(); increaseWidth()"
>computed옵션과 methods옵션을 통해 동적으로 스타일을 적용할 수 있다.
<h1
:style="{color, width: `${width}px`}"
@click="changeColor(); increaseWidth()"
>
안녕
</h1>const App = {
data() {
// data()에 초기 데이터를 설정해준다.
return {
color: 'red',
width: 200, // 단위를 쓰면 데이터를 조작하기 번거롭다
};
},
// computed는 데이터가 올바르게 적용되도록 계산해주는 것.
// 데이터 그대로를 계산만 해주는 것.
computed: {
styleObject() {
return {
color: this.color,
width: `${this.width}px`,
};
},
},
// 메소드는 데이터를 변동시켜 주는 것.
methods: {
changeColor() {
this.color = 'royalblue';
},
increaseWidth() {
this.width += 10;
},
},
};
const vm = Vue.createApp(App).mount('#app');데이터를 오브젝트의 형태로 설정할 수 있다.
- 2개 이상의 오브젝트를 사용할 때 배열 리터럴을 사용한다.
- 중복되는 속성이 있을 시 배열에 나중에 작성된 속성이 적용된다.
<div id="app">
<h1 :style="[styleObject, titleStyleObject]">안녕</h1>
</div>
<script>
const App = {
data() {
return {
styleObject: {
color: 'blue',
backgroundColor: 'orange',
},
titleStyleObject: {
fontSize: '40px',
fontWeight: 'bold',
},
};
},
};
const vm = Vue.createApp(App).mount('#app');
</script>조건부 렌더링 (v-if)
v-if와 turuthy, falsy값을 이용해 화면에 렌더링 유무를 설정할 수 있다.
- 조건이 들어간 요소들 사이에 뭔가 들어가면 정상 동작하지 않는다.
- 여러 태그들을 wrapping하고 그 wrapping한 요소에 v-if디렉티브를 사용하면 자식 요소들에게도 적용된다.
사용법
<h1 v-if="isShow">Hello Vue!</h1>
<div v-else-if="[]">
<h2>Application..</h2>
<p>1234</p>
<span>987</span>
</div>
<h2 v-else>Good Morning~</h2> const App = {
data() {
return {
isShow: null,
};
},
};
const vm = Vue.createApp(App).mount('#app');wrapping요소를 렌더링하고 싶지 않으면 template태그를 사용한다.
- 템플릿 태그에 디렉티브를 사용하면 템플릿 태그를 제외한 자식 요소들만 렌더링된다.
<h1 v-if="isShow">Hello Vue!</h1>
<template v-else-if="[]">
<h2>Application..</h2>
<p>1234</p>
<span>987</span>
</template>
<h2 v-else>Good Morning~</h2>v-if vs v-show
v-if는 boole값에 따라 렌더링 유무가 정해진다.
= 전환 빈도가 낮을 때 사용하는 게 좋음.
v-show는 렌더링은 무조건 되지만 스타일 속성에 display:none이 추가되거나 제거된다.
= 전환 빈도가 높을 때 사용하는 게 좋음.
*v-cloak 이라는 디렉티브를 같이 사용해야한다.
처음에 v-if를 먼저 사용하고, 전환 빈도가 높아진다면 v-show로 바꾸는 게 좋다.
리스트 렌더링 (v-for)
사용법
v-for디렉티브가 쓰인 태그가 리스트의 요소 갯수만큼 반복되어 렌더링되고,
각 요소에 리스트 item데이터가 순차적으로 맵핑된다.
<ul id="array-rendering">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
// index값도 사용 가능하다.
<ul id="array-with-index">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
``` js
Vue.createApp({
data() {
return {
items: [{ message: 'Foo' }, { message: 'Bar' }]
}
}
}).mount('#array-rendering')데이터가 객체일 경우 경우 키, 값, index 모두 사용 가능하다.
*순서를 보장하지 않기 때문에 index는 안쓰는 게 좋다.
<li v-for="(value, name, index) in myObject">
{{ index }}. {{ name }}: {{ value }}
</li>Vue.createApp({
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2020-03-22'
}
}
}
}).mount('#v-for-object')상태 유지 (key사용)
최적화를 위해 v-for를 사용할 땐 필수적으로 :key="item.id(고유한 값)" 속성도 같이 써야한다.
⇒ 키 속성에 고유한 값을 가진 데이터를 속성 값으로 넣어야한다
꼭 v-for와 같이가 아니더라도 노드를 식별하는 일반적인 매커니즘이기 때문에 노드의 고유성을 설정해줄 때 언제든 사용할 수 있다.
<div v-for="item in items" :key="item.id">
<!-- content -->
</div>배열 변경 감지
변이 메소드 - 기존 배열 유지
배열을 변경하는 여러 메소드들을 사용해도 반응성을 유지할 수 있다.
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
비 변이 메소드 - 새로운 배열 반환
배열이 교체(재할당)되더라도 vue가 최적화를 해서 바뀐 부분만 렌더링하게 해준다. 바뀐 객체로 전부 새로 렌더링되는 게 아님.
- filter()
- concat()
- slice()
이벤트 핸들링 (v-on / @)
인라인 핸들러 방식과 이벤트 객체
- 이벤트 핸들러 함수에 함수 이름만 적을 시 첫번째 인자로 자동으로 이벤트 객체가 들어온다.
- 따로 전해줄 인자가 있을 경우
f('원하는 인자')의 형식으로 사용할 수가 있다. - 이 경우에 event객체도 사용해야 할 때에는 n번째 인자로 $event를 적어주어 사용할 수 있다.
- 인자와 매개 변수들의 순서만 일치시켜준다면 $event의 순서는 상관없다.
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>methods: {
warn(message, event) {
if (event) {
event.preventDefault()
}
alert(message)
}
}복합 이벤트 핸들러
- 한 이벤트에 핸들러 여러 개를 사용하고 싶다면 인라인 핸들러 방식을 사용하고 ;로 구분해준다.
- vue3에서는 ,로 구분할 수도 있다.
<button @click="one($event), two($event)">
Submit
</button>이벤트 수식어
이벤트 객체(event)에서 보편적으로 사용되는 함수들을(e.preventDefault, e.stopPropagation...) 간편하게 사용하기 위하여 vue에서 이벤트 수식어를 제공한다.
- 체이닝해서 여러 개를 함께 쓸 수 있음.
- 핸들러 함수를 연결하지 않고 수식어만 쓸 수 있음.
.stop - 이벤트 전파를 막는다.
.prevent - 디폴트 이벤트를 막는다.
.capture -
.self - currentTarget과 target이 일치 할때만 핸들링 함수를 실행시킨다.
.once - 연결된 다른 수식어와 핸들러 함수를 한번만 실행하고 그 후엔 모두 다 연결을 끊는다.
.passive - 화면의 렌더링과 동작의 처리를 분리시켜준다.
<!-- 제출 이벤트가 페이지를 다시 로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>
<!-- 수정자는 체이닝이 가능합니다. -->
<a @click.stop.prevent="doThat"></a>
<!-- 단순히 수식어만 사용이 가능합니다. -->
<form @submit.prevent></form>https://v3.ko.vuejs.org/guide/introduction.html
vue의 기본적인 기능들을 배웠다. 바닐라js에 비해 훨씬 편해서 놀랐다..
리액트를 조금 배운 적이 있는데 리액트보다도 훨씬 편하고 사용하기 간편하다고 느꼈다.
리액트의 수요가 많아서 리액트를 먼저 깊게 배우려고 했었는데
이제 리액트 말고 vue만 하고싶다. 하지만 두개 다 배워야 한다는 걸 안다😢
왜 프레임워크를 배우기 전에 바닐라js를 먼저 공부하라고 하는 지 알겠다.
js기본 개념과 원리를 알아야 수월하게 프레임워크를 사용할 수 있는 것도 이유이지만, 프레임워크를 먼저 배웠다면 바닐라js 공부를 안 했을 것 같다.
처음 배우는 개념이어서 꼼꼼하게 짚고 넘어가려니 진도가 너무 늦다.
하지만 기초 개념은 시간을 들여서라도 이해하고 넘어가야 심화 개념을 배울 때 덜 헤매기 때문에 .. 아주 기초적인 개념만 꼼꼼하게 보고, 이후의 내용은 알고 넘어가는 식으로 강의를 들으면서 진도를 따라잡아야겠다.
