📚TIL
day33
Computed
- 데이터를 조작할 때 표현식이나 methods를 사용할 경우 중복실행될 때 이미 결과값을 알고 있음에도 불구하고 여러번 계산해야하기 때문에 효율성이 떨어짐
- computed: 캐싱기능이 있어 첫번째 출력시 계산된 데이터를 캐싱했다 이후 출력시 캐싱된 데이터를 가져와 출력하기 때문에 같은 것을 반복적으로 출력할 때 유용
- 장점 : 의존하는 데이터에만 집중할 수 있으며 그 외의 데이터가 변경될 경우 다시 연산되는 부작용이 없기 때문에 관리가 용이
- computed를 통해 값을 할당할 수 없음
- computed 안에서 특정한 데이터를 get, set으로 구분해서 값을 할당하거나 가져오는 것이 가능
const App = {
data() {
return {
firstName : 'Joaquin',
lastName : 'Phoenix'
}
},
computed: {
fullName:{
get() {
return `${this.firstName} ${this.lastName}`
}
set(newValue) { //'Joaquin Phoenix'
const names = newValue.split(' ')
//['Joaquin', 'Phoenix']
this.firstName = names[0]
this.lastName = names[names.length - 1]
//middleName이 있는 경우에도
//lastName을 가져옴
}
}
}
}
const vueModel = Vue.createApp(App).mount('#app')watch
- watch : 감시하는 데이터가 변경됐을 때 실행할 로직을 추가
- 이미 선언되어진 반응형 데이터만 사용 가능
- 감시 함수의 인수로 새로운 값과 이전 값을 받을 수 있음
- watch콜백은 배열, 객체같은 참조형 데이터는 직접 교체될 때만 발생하기 때문에 참조형데이터에 대한 활용도가 떨어짐
- deep : deep 옵션을 추가하여 참조형 데이터를 더 깊게 감시할 수 있도록 함
- handler : 데이터 값이 변경됐을 경우 호출될 함수를 지정
- immediate : 옵션 추가시 데이터가 변경되는 것을 감지하는 것과 별개로 데이터가 준비된 직후 바로 실행할 수 있도록 함
const App = {
data() {
return {
users: [
{id : 1, name : 'A'}
{id : 2, name : 'A'}
{id : 3, name : 'A'}
]
}
},
watch: {
users:{
handler() {
console.log(this.user)
},
deep: true,
//deep이 true인 경우 변경사항에 대해
//watch 콜백 실행
immediate: true
}
}
}day34
class
- vue.js에서 class라는 속성에 하나의 데이터 뿐 아니라 여러개의 데이터를 연결할 수 있도록 패턴을 제공
- 객체 리터럴로 작성하여 쉼표로 구분하는 key:value형태의 값을 작성하면 class를 추가할 수 있음
- class이름과 data이름이 같은 경우 생략하여 사용 가능
- BEM방식으로 하이픈과 같은 기호들이 class 이름으로 들어가는 경우엔 ''로 묶어서 작성해야함
- ''내부에서 하나의 속성에 띄어쓰기를 통해서 여러개의 class 이름을 넣을 수 있음
- class 내부에는 객체 데이터, 배열 데이터도 연결이 가능하며 배열로 넣은 문자데이터가하나의 class 값으로 정의됨
<!-- className : dataName -->
<div :class="{ active: active, small : small }"></div>
<div :class="{ active, small }"></div>
<div :class="{ 'title--active' : active}"></div>class와 객체 데이터의 연결
- class 속성에 하나의 객체 데이터를 직접 연결할 수 있음
- 객체데이터 내부에서 반응형 데이터를 활용해야 할 경우 그 객체 데이터를 computed를 통해 계산된 데이터로 만들어서 this키워드로 각각의 반응형 데이터를 사용
- this를 통해 접근한 반응형 데이터들이 수정될 때마다 객체의 계산된 데이터도 갱신되어 적용될 수 있는 구조가 됨
<button @click="toggle">Click me!</button>
<div :class="classObj"> {{ msg }} </div>const App = {
data(){
return {
msg: 'Hello Vue',
active: false,
small: true
}
},
computed:{
classObj() {
return {
active: this.active,
'title--small color--tomato': this.small
//className : data
}
}
},
methods: {
toggle() {
this.active = !this.active
}
}
}
const vueModel = Vue.createApp(App).mount('#app')style
- 스타일 인라인 방식 : html에 스타일 속성을 사용해서 css를 추가하는 방식
- 스타일 인라인 방식은 CSS명시도가 1000점이기 때문에 사용을 권장하지 않지만 데이터를 바인딩해서 스타일을 제어하는 경우에는 권장됨
- 하나의 요소에 지정한 이벤틀에 여러개의 매소드를 연결하는 경우 이름 뒤에 소괄호를 추가하여 실행시켜야 함
<div @click = "toTomato(); increaseWidth();">
Hello Vue!
</div>+vue.js에서 css 속성의 key값을 ''로 묶어서 데시를 사용하는 방식 외에도 카멜케이스도 지원하기 때문에 vue.js에서 자동으로 이를 변경해 줌
<div :style = "{ color, backgroundColor }"></div>- 여러개의 객체 데이터를 연결하는 방법 : 배열 리터럴 사용하여 여러개의 스타일 객체들을 한번에 적용이 가능하며 중복된 속성이 있는 경우 나중에 적용한 값이 덮어씀
<div :style="[titleStyleObj, styleObj]"></div>조건부 렌더링
- boolean data는 true, false 말고도 truthy, falsy 데이터를 통해 출력 여부를 판단할 수 있음
- v-if를 통해 요소를 출력할지 하지 않을지를 지정할 수 있음
- v-if와 v-else를 형제요소로 연결하여 사용 가능하며 두가지 사이엔 v-else-if를 제외하고 다른 요소들이 있지 않도록 주의해야함
- 조건에 걸려서 출력되는 요소가 여러개인 경우 새로운 요소로 래핑
- 래핑한 요소가 출력되지 않기를 원하는 경우 template태그를 사용하여 감싸면 template요소는 렌더링 되지 않음
- v-show : 요소가 보여질지 보여지지 않을지 boolean값으로 나타냄
- v-show는 구조적으로 우선 생성하기 때문에 false인 경우에도 잠시동안 데이터가 출력되어 보여질 위험이 있음
- v-cloak을 추가하여 컴포넌트가 준비될 때까지 컴파일 되지 않은 이중괄호 구문을 숨기는데 사용할 수 있음
- v-cloak이 추가된 요소가 사용되는 vue 프로젝트에서 이중괄호구문이 출력돼야하는 데이터의 준비가 끝나게 되면 vue.js 내부 동작을 통해 해당하는 디렉티브 제거
[v-cloak]{
display: none;
}
// css를 통해 화면에 {{ msg }} 라고 출력되는 것을 방지<button @click="toggle">Click Me!</button>
<div v-show="isShow" v-cloak>{{ msg }}</div>const App ={
data() {
return {
msg: 'Hello Vue!',
isShow : false
}
},
methods:{
toggle() {
this.isShow = !this.isShow
}
}
}
const vueModel = Vue.createApp(App).mount('#app')- v-if와 v-show의 차이
- v-if : v-if는 true일 경우 요소를 구조화하여 출력하며 false인 경우엔 구조적으로 생성을 하지 않고 v-if라는 주석이 추가됨
- v-show : true, false와 상관 없이 구조적으로 우선 출력한 이후 display: none 속성을 적용, 제거하는 방식으로 화면에 출력하는 여부만 변경
- v-if는 초기 렌더링이 낮지만 전환비용이 높고 v-show는 전환비용은 적지만 초기렌더링 비용이 높음
- v-if, v-for을 동시에 사용하는 경우 v-if가 우선순위를 가지며 둘을 동시에 사용하지 않는 것을 권장
- 사용해야할 경우에 권장되는 코드
<ul>
<!--template를 활용하여 두가지를
동시에 사용하지 않도록 조정-->
<template v-for="user in users">
<li v-if="user.isActive">{{ user.name }}</li>
</template>
</ul>🌊하루를 마치며
오늘도 vue강의를 들었다. 강의 내용이 많아서 집중해서 들어야하기 때문에 시간이 오래걸렸다. 그래서 목표한 부분까지 공부하지 못해서 아쉽다. vue를 배우면서 바닐라js와 비교하게 됐는데 원하는 기능을 보다 쉽게 구현할 수 있다는 점이다. 그리고 html과 바로 연결해서 사용하는 것이 새롭고 재밌다! 바닐라js로 구현한 프로젝트들을 vue를 배워서 다시 구현해보고 싶다.
내일은 vue강의와 완성못한 css프로젝트를 수정할 계획이다!
Front-end Develop🥰