Develop_NOTE

Vue.js 문법을 활용한 조건부로 class를 요소에 부착 이 문법은 인터렉션 뿐 아니라 사용자 동작과 부착된 데이터에 따라 class를 요소에 부착 할 수 있기 때문에 유저 인터페이스 측면에서 매우 유용하게 쓸 수 있는 문법이다. 단계별로 보자면 아래의 단계로 코드를 작성한다. 1. 조건부 클래스 바인딩이 true & false인 상태일 때의 class를 디자인하기 2. 원하는 요소에 원하는 타이밍으로 UI 동작 관련 class를 부착 1. Fade로 토글되는 모달 창 만들기 위의 단계를 거쳐가며 Fade IN & OUT 되고, 토글 기능이 있는 코드는 아래와 같이 작성할 수 있다. // class 'active'는 조건부 클래스 바인딩. 모달 박스 모달 토글 위의 코드에서 조건부 클래스 바인딩을 동..

Vue.js의 데이터바인딩이란? 웹 애플리케이션에서 UI와 데이터를 동기화하는 기능을 제공하는 Javascript 프레임워크이다. Vue.js의 데이터바인딩을 활용하면 데이터의 변화에 따라 화면의 내용이 자동으로 업데이트되어 사용자에게 동적인 웹 애플리케이션을 제공할 수 있게한다. 예를 들자면 쇼핑몰에 올라가는 상품의 가격 처럼 가변적인 데이터들에 사용 할 수 있겠다. 이를 위해서 Vue의 실시간 자동 렌더링 기능을 사용하기위해서 데이터바인딩을 사용한다. 선언적 렌더링 data() & 데이터바인딩 문법 위의 렌더링 기능을 사용하기 위해 아래와 같이 작성한다. {{ price1 }} 속성 바인딩 단순 텍스트 뿐 아니라 HTML의 속성(property)도 데이터 바인딩이 가능하다. v-bind:속성명="da..