[vue.js] 본격 생존코딩! 밥벌이를 해보자! (2)

해당 페이지를 참조하였습니다: https://eastflag.co.kr/vue/shop-cdn-link/class-and-style-binding/

 

Event Handling

지금까지의 데이터 이동은 모델데이터->뷰에서 바인딩했지만, 이벤트 핸들링은 방향이 반대이다. 뷰에서 모델 데이터로 들어온다. 템플릿 문법은 v-on:이벤트 줄여서 @이벤트이다.

예를들어 js의 onclick 이벤트는 v-on:click 혹은 줄여서 @click으로 표현된다.

 

클릭이벤트

인스턴스안에 data필드처럼 methods필드가 따로 들어있다. 이 영역에 메서드를 선언하고..

addToCart : function(){} (ES5) addToCart() {} (ES6)로 선언한다. 

<button v-on:click="addToCart">처럼 v-on:이벤트명="메서드명"으로 선언한다.

인상적이였던것은.. 아무래도 vue객체의 data를 변경하면 자동으로 렌더링된다는점.. 아직까지는 잘 적응이 안된다.. 원리도 무척 궁금하다.

 

Class and style binding

디자인과 곤련해서 가장많이 사용되는 속성은 class와 style 속성이다.

특정한 클래스 혹은 스타일을 동적으로 제어하는 경우가 많기때문에 자주 사용된다.

예를들어 Jquery같은 DOM라이브러리를 사용한다면 GNB메뉴에서 선택한 메뉴만 진하게 표시하고 싶을때 루프를 돌면서 현재 메뉴만 addClass, 나머지 메뉴들을 removeClass를 적용하여 동적으로 적용한다.

 

class바인딩 문법은 속성 바인딩 문법과 동일하다

:class="{클래스명: true or false}" 만일 true이면 class="클래스명"으로 렌더링 될것이고 false이면 렌더링 되지 않는다.

 

// 마우스를 올려놓은 메뉴만 class를 추가하는 예제..!

See the Pen ExPwmZR by soheeHwang (@soheemon) on CodePen.

 

style 바인딩 문법은

:style="{backgroundColor: 변수명}" 변수명에 따라서 동적인 스타일 바인딩이 가능하게 된다.

 

객체 혹은 배열로 바인딩

객체를 직접 바인딩 할 수도 있다.

<div :class="classObject"> ... </div>

data: {classObject : {active: true, danger: false}}

 

렌더링 결과는.

<div class="active">...</div>

배열로 바인딩하는것도 가능하다.

<div :class-"[activeClass, errorClass]">...</div>

data: {activeClass: 'active', errorClass: 'danger'}

 

렌더링 된 결과은 아래와 같다.

<div class="active danger"> ...</div>