맨동이

이벤트 핸들링 1. 이벤트 청취 v-on 디렉티브는 @기호로, DOM 이벤트를 듣고 트리거될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="methodName" 혹은 줄여서 @click="methodName"으로 사용합니다. Add 1 The button above has been clicked {{ counter }} times. Vue.createApp({ data() { return { counter: 1 } } }).mount('#basic-event') 2. 메소드 이벤트 핸들러 위의 코드와 같이 간단한 코드의 경우에는 문제가 없지만, 많은 이벤트 핸들러의 로직은 더 복잡하기 때문에 위와 같은 방법은 지양하는 것이 좋습니다. Greet Vue.createApp({ dat..

리스트 렌더링 1. v-for v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 fruit in fruits 형태로 특별한 문법이 필요합니다. 여기서 fruits는 원본 데이터 배열이고 fruit은 반복되는 배열 엘리먼트의 별칭입니다. {{ fruit }} 1.1 코드 v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에 대한 두 번째 전달인자 옵션을 제공합니다. {{ fruit }}-{{ index }} 2. 필터링된 결과 표시 2.1 computed 속성 원래 데이터를 실제로 변경하거나 재설정하지 않고, 배열의 필터링되거나 정렬된 버전을 표시할 수도 있습니다. 이 경우 필터링되거나 정렬된 배열을..

조건부 렌더링 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. 코..

템플릿 문법 1. 보간법(Interpolation) 1.1 문자열 데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문) 기법을 사용한 문자열 보간법(text interpolation)입니다. 메시지: {{ msg }} Mustache 태그는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체됩니다. 또한 msg 속성이 변경될 때 마다 갱신됩니다. 반응성의 개념이 적용된다는 의미입니다. 1.2 v-once v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행할 수 있습니다. 다만, 이런 경우 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다. 결코 변하지 않을 것입니다: {{ msg }} 1.3 코드 Hello world! 를 클릭할 때마다 느낌..

조건문과 반복문 1. 조건문 1.1 코드 {{ count }} 4보다 큽니다! 숫자 클릭시 0 부터 1씩 증가하면서 4 보다 커지면 v-if 조건에 따라 div가 출력 되는 코드입니다. 1.2 v-if 4보다 큽니다! 이는 1씩 증가하는 count 데이터가 4보다 크게 되면 4보다 큽니다! 라는 글자를 보이게 하는 조건문입니다. 이렇게 태그 옆에 조건문을 코딩할 수 있습니다. v-로 시작하는 속성들을 디렉티브(directive)라 부릅니다. 2. 반복문 2.1 코드 {{ fruit }} 2.2 v-for {{ fruit }} 이는 script 태그에서 명시한 배열 데이터인 fruits를 참고합니다. 태그에서 명시한 friut in fruits에서 배열 아이템의 개수만큼 {{ fruit }} 데이터를 순서..

1. 기본 구성 //App.vue App.vue는 3가지의 태그로 구성되어있습니다. template는 HTML, script는 JavaScript, style에는 CSS(SCSS)에 대한 내용을 명시해주면 됩니다. 2. 코딩 간단한 Vue 문법을 이용하여 숫자 0을 화면에 출력해보도록 하겠습니다. 2.1 //App.vue {{ count }} // h1 태그 내에 count라는 변수 입력 3. 클릭 시 숫자 증가 위에서 만든 코드에 숫자 0 부분을 클릭하면 숫자가 1씩 증가하는 페이지를 구현해보도록 하겠습니다. 3.1 script methods에 increase라는 함수를 만들어서 실행될 때마다 count라는 데이터를 this라는 키워드로 접근하여 숫자 1씩 증가시키고 있습니다. 여기서 this는 scr..