맨동이

조건부 렌더링 v-if v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. Vue is awesome! v-else-if, v-else와 함께 "else-if 블록" 또는 “else 블록”을 추가하는 것도 가능합니다. Vue is awesome!

1. 클래스와 스타일 바인딩 데이터 바인딩의 일반적인 요구사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다. 클래스와 스타일 모두 속성이므로, v-bind를 사용하여 처리할 수 있습니다. Vue는 v-bind가 class와 style과 함게 사용될 때 특별한 개선사항을 제공합니다. 문자열 외에도 표현식은 객체 또는 배열로 평가될 수 있습니다. 2. HTML 클래스 바인딩 객체 구문 :class (v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다. 객체에 더 많은 필드를 포함하여, 여러 클래스를 전환할 수 있습니다. 또한, :class 지시문은 일반 class속성과 공존할 수도 있습니다. 따라서 다음과 같은 형식을 따르게 됩니다: data() { ret..

Watch 1. 코드 {{ msg }} {{ reversedMessage }} 2. Watch watch는 데이터의 변화를 감시하는 옵션입니다. 그러므로 아래의 내용을 추가하게 되면, 어떠한 로직이 구현이 되는 것일까요? 먼저 changeMessage()라는 메소드를 통해서 msg라는 데이터를 할당 연산자로 변경을 했습니다. 그러면 watch라는 옵션을 통해서 우리가 지정한 msg라는 해당 데이터는 감시되고 있는 상태가 되는 것입니다. 그러한 감시가 되고 있는 상태에서 변화가 발생하게 되면, 해당하는 watch의 옵션의 로직이 출력이 되는 것입니다. export default { watch: { msg() { console.log('msg:', this.msg) } } } watch 옵션은 데이터를 감시..

Getter, Setter 1. Getter computed에 만들어놓은 reversedMessage라는 하나의 계산된 데이터는 읽기 전용(Read only)입니다. 즉, 우리가 할당 연산자로 어떤 값을 할당하더라도 반응적으로 동작할 수 있는 구조가 아닙니다. 그러므로 내부의 기본적인 로직을 통해서 값을 얻어낼 수 있는 용도, getter로만 사용이 가능합니다. 2. Setter 이와 달리 data는 getter뿐만 아니라 setter로도 사용할 수 있습니다. 쉽게 말해 값을 읽을 수도 있으며, 여기에 더해 값을 지정할 수도 있습니다. getter에는 기본 로직을 추가하고, setter에는 인수로 들어오는 값을 명시해줄 수 있습니다. 그러므로 위의 set(value)와 같이 매개변수로 이름을 지정해주시면..

Computed 1. 코드 components에 있는 Fruits.vue 파일을 App.vue에 import하였습니다. 1.1 App.vue import Fruits from '~/components/Fruits' export default { components: { Fruits } } 1.2 Fruits.vue 현재 section 태그는 v-if라는 디렉티브로 hasFruit라는 computed 값을 갖고 있습니다. computed란 data 옵션에 정의해놓은 특정한 데이터를 추가적인 연산(this.fruits.length > 0)을 통해 정의를 한 후, 그 정의된 값을 반환하여 사용하는 새로운 데이터, 다시 말해 계산된(computed) 데이터라고 합니다. Fruits {{ fruit }} 2. 코..