본문 바로가기

Front-end85

16. Vue - 이벤트 수식어 1. 이벤트 수식어란? 공식문서 바로가기 이벤트 수식어란 v-on 디렉티브에서 사용할 수 있는 다양한 수식어를 의미한다. 이벤트 수식어는 점(.)으로 시작하는 접미사의 형태로 chaining 처럼 사용한다. 2. 이벤트 수식어를 사용하는 이유 a) preventDefault Google 우선 preventDefault() 기능을 제외하고 생각해보자. 위의 코드는 링크를 클릭하면 새탭에 구글 사이트가 뜨고, 동시에 콘솔에 ABC! 라는 문자열이 출력되는 코드다. 하지만 preventDefault() 라는 기능으로 인해, 새탭에 구글 사이트는 열리지 않고 콘솔에만 위와같이 문자열이 출력된다. a-1) preventDefault란? preventDefault()는 event 객체안에 있는 기능으로, 기본 동작.. 2021. 5. 20.
15. Vue - 이벤트 핸들링 0. 이벤트 핸들링이란? DOM 이벤트를 트리거로 하여금 자바스크립트를 실행할 때 사용하는 기능이다. 이벤트 핸들링에 대해서 자세히 알아보자. 공식문서 바로가기 이벤트 핸들링 | Vue.js 이벤트 핸들링 이벤트 청취 v-on디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="methodName" 나 줄여서 @click="methodName"으로 사용합니다. 예시: Add 1 Th v3.ko.vuejs.org 1. 이벤트 청취 @click 처럼, 골뱅이를 이용해서 표현하는 디렉티브를 말한다. @ 기호는 사실 v-on 디렉티브를 사용하는 것과 마찬가지이다. a) 메소드 이벤트 핸들러 위의 예시에서 나온 것 처럼, 이벤트 핸들러 부분에.. 2021. 5. 19.
14. Vue - 리스트 렌더링(= 배열 처리) 0. 시작하기 전에 이전 포스팅에서 간단하게 v-for를 사용하여 반복처리를 해보았다. 리스트 렌더링이란, 간단하게 말해서 반복문을 사용한 배열 처리 과정을 말한다. 오늘은 반복문을 사용한 배열 처리 과정에 대해서 알아보자. 공식문서 바로가기 1. index a) 예제코드 {{ fruit }} - {{ index }} b) 출력화면 c) 해설 예제코드에서 v-for 디렉티브를 사용한 곳을 살펴보자. 반복문을 사용하다보면 다양한 이유로 index가 필요한 경우가 있다. 이때 v-for 디렉티브에서 제공하는 표현식을 사용하면 인덱스를 쉽게 얻을 수 있다. 배열의 요소와 index를 위의 예제코드에서 처럼 괄호()를 이용하여 묶어주면 된다. 인덱스의 이름은 반드시 index일 필요는 없다. 필요에 따라서 자유.. 2021. 5. 19.
13. Vue - 조건부 렌더링 1. 조건부 렌더링이란? 공식문서 바로가기 조건부 렌더링 | Vue.js 조건부 렌더링 v-if v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. Vue is awesome! 1 v-else와 함께 “else 블록”을 추 v3.ko.vuejs.org a) v-if 디렉티브 위의 코드는 awesome 이라는 값이 true인 경우, h1 태그가 출력된다. awesome이 true가 아닌 경우, v-else 디렉티브를 갖고 있는 h1 태그가 출력된다. 조건부가 true일 때만 값을 반환한다는 점을 잊지말자. * 꿀 Tips 여러 태그를 조건부 렌더링 하는 경우, 다음의 사진처럼 div 태그를 이용하여 요소들을 묶어줄 것이다. 하.. 2021. 5. 19.
12. Vue - 클래스와 스타일바인딩 1. 예제 코드를 통한 개념이해 Hello?(isActive = {{ isActive }}) 위의 코드를 이용해서 하려는 것은 다음과 같다. 특정 값을 지정해서 해당 값이 true인 경우, 클래스 선택자를 HTML 태그에 삽입하도록 하는 것이다. h1 태그의 class를 보면 v-bind를 사용하여 데이터와 클래스명을 연결시켜 놓았다. h1 태그의 class 속성값으로 active라는 이름을 사용하는데, isActive라는 key 값에 따라서 적용결과가 달라지는 것이다. 아래의 사진을 보면 더욱 쉽게 이해할 수 있을 것이다. isActive의 값이 false인 경우, h1 태그의 class 속성이 추가되어 있으나 active라는 값은 없다. h1 태그를 클릭하면 activate() 메소드가 작동하게 되고.. 2021. 5. 18.
11. Vue - watch 속성 1. 기본 코드 및 설명 msg = {{ msg }} computedMessage = {{ computedMessage }} computedMessage() 메소드: 이전 포스팅에서 사용한 것으로, 글자를 뒤집는 기능 changeMessage() 메소드: 첫번째 h1 태그를 클릭하면 내용 변경 2. Watch란? watch 속성은 데이터의 변경 사항을 감시하는 기능이다. 다음 예시코드를 보면서 어떻게 watch 속성이 동작하는지 알아보자. 이처럼 watch 속성에 등록된 data는 계속해서 감시된다. 감시를 받고있는 data의 값이 변경되면 watch에 작성된 로직을 수행하게 된다. 일종의 이벤트 핸들러와 같은 방식으로 동작한다고 보면 된다. 3. watch와 computed의 차이 a) computed.. 2021. 5. 18.
10. Vue - Getter & Setter 1. Getter란 무엇인가? Getter란 값을 얻어내는 방식을 의미한다. Getter는 값을 변경할 수 없으며 오직 값을 읽는 것만 가능하다. (Read Only) 이전 포스팅에서 배웠던 computed 또한 Getter의 하나이다. 다음 예제를 통해서 Getter의 의미를 알아보자. a) computed는 왜 Getter 일까? ADD {{ computedMessage }} {{ computedMessage }} {{ computedMessage }} {{ computedMessage }} 해당 코드는 이전 포스팅에서 이어지는 프로젝트의 App.vue에 작성된 내용이다. 버튼을 누르면 add 메소드가 동작하여 computedMessage의 내용에 문자열 '!?'을 추가하여 출력하도록 한다. 아무리 .. 2021. 5. 18.
9. Vue - computed 속성 1. Computed 란? computed는 script 태그에서 사용할 수 있는 속성 중 하나다. computed에 등록된 어떤 변수나 조건, 메소드 등은 계속해서 감시 및 추적된다. computed를 통해 특정 값을 감시하고, 해당 값의 변화에 따라 웹 페이지 또는 컴포넌트가 알맞게 반응하도록 설정할 수 있다. computed는 기존의 어떤 데이터 값을 후처리하여 사용하고 싶을 때 이용하는 기능이다. 2. 예제코드 및 경로 a) 파일 경로 b) App.vue Fruits {{ fruit }} c) Fruits.vue Fruits {{ fruit }} d) 코드 해설 computed라는 속성값을 통해서 hasFruit() 메소드를 등록한다. section 태그에서 v-if를 사용하여 조건에 hasFru.. 2021. 5. 17.
8. Vue - 템플릿 문법 https://v3.ko.vuejs.org/guide/template-syntax.html 템플릿 문법 | Vue.js 템플릿 문법 Vue.js는 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파 v3.ko.vuejs.org - 위 링크는 템플릿 문법에 대한 Vue 공식문서입니다. - 설명 및 예시가 너무 잘 설명되어 있어, 이번 파트는 공식문서로 대체합니다. - 추가적으로 같이 알면 좋은 부분을 아래에 링크로 첨부하겠습니다. 1. v-bind와 v-on 약어 해당 부분 공식문서 바로가기 2. 동적 전달인자 해당 부분 공식문서 바로가기 2021. 5. 17.

티스토리툴바