Front_End/Vue.js

05. Vue.js Dynamic CSS 적용하기

Vue js dynamic class 적용 사용자의 입력에따라 css class를 다르게(동적으로) 적용하는 방법을 공유해봅니다. :class를 이용하기 class 동적으로 적용하기! Class Toggle :class는 v-bind:class의 줄임표현입니다. 대부분의 속성(태그)앞에 :을 붙이면 해당 Component내에 있는 변수 혹은 함수를 바인딩시킬 수 있습니다. :class="{'option-first': this.flag, 'option-second': !this.flag}" 이부분이 동적으로 클래스를 적용하는 핵심인데 아주 간단합니다. {'작성한 클래스명' : boolean type} 으로 작성해주시면 됩니다. 음 추가적으로 작성한 클래스명이 - ..

04. Vue.js 스타일 적용 방법

Vue js 스타일 적용 일반적으로 .css파일을 작성해서 style을 적용시키는 방법말고도 Vue에서는 여러가지 방법으로 적용이 가능해요. 오늘은 Vue에서 style을 적용시키는 방법을 알아보도록 할게요. Vue 인스턴스 data로 style을 처리하는 방법 test Vue 인스턴스의 data 부분에 스타일과 관련된 속성을 추가하고 v-bind:style="속성명"으로 style을 bind해주면 되요. 다만 주의 해야할 점은 스타일이 기존에 알고있는 표기법이랑 달라요... 그래서 아마 이건 자주 안쓰일 것 같아요. Vue 인스턴스 data로 여러개의 style을 처리하는 방법 test 여러 개의 스타일을 추가할 땐 위와 마찬가지의 방법을 사용한되 속성명을 []로 묶어 주시면 되요. Vue 인스턴스 d..

03. Vue.js 초간단 Event Handling

이벤트 핸들링 이번 포스팅에서는 v-on 디렉티브를 이용하여 간단한 키보드 이벤트 핸들링과 마우스 이벤트 핸들링을 다뤄볼게요. javascript를 해보셨던 분은 아시겠지만 이벤트가 엄청 많아서 이벤트와 관련된 자세한 부분은 구글링을 해보시고 저는 어떤 식으로 vue에서 event handling을 구현하는가에 초점을 둘게요. v-on 디렉티브 피깎기 피회복시키기 남은 피 : {{ hp }} 공격과 힐을 통해서 hp를 올리고 줄이는 아주 허접한 예제에요. 0인 경우에는 더 이상 피를 깎을 수 없게 예외처리 해주었구요. 기본적으로는 Angular에서 사용하는 (click)="메소드" 가 Vue에서는 v-on:click="메소드"로 바뀌었네요. 사용하는 방법 자체는 매우 간단해요. v-on:click="메소..

02. Vue.js Vue 인스턴스 옵션 and Life Cycle

Vue 인스턴스 var a = new Vue({}) 와 같이 만든 객체를 Vue 인스턴스라고 하는데 처음에 배웠던 ViewModel을 의미하기도 하죠. 이 Vue 인스턴스를 생성할 때 여러 옵션을 설정할 수 있는데 이 옵션들에 대해 알아보도록 할게요. data 옵션 var model = { number = 2 } var test = new Vue({ el: '#test', data : model });data 옵션에 주어진 모든 속성들은 Vue인스턴스 내부에서 직접 사용되는 것이 아니라 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시(대리인?)를 두어 처리해요. 그리고 data 옵션은 Vue 인스턴스가 관찰하는 데이터 객체를 의미하므로 변경 사항을 즉시 감지해요. 데이터에 접근..

01. Vue.js 기본기: 각종 디렉티브

기본기 전 포스팅에서 말씀드렸듯이 단일 html페이지에서부터 vuejs를 연습해볼 생각이에요. 그리고 저는 Atom을 기본편집기로 사용하였고, 테스트용 브라우져는 Chrome을 사용하였어요. 아직 단일 html페이지 연습단계이기 때문에 를 이용해서 cdn으로 구성하셔도 Vue문법 및 빌드는 아주 잘됩니다. Hello, Vue js 01.html {{ message }} 가장 기본적이 예제 에요. model 객체는 변수명 그대로 model 객체에요. 데이터를 가지고있지요. 그 밑에 있는 app이라는 이름을 가지는 녀석도 객체인데 Vue객체(이하 뷰객체)이자 ViewModel 객체에요. 뷰객체에 있는 el이라는 속성은 HTML 요소(element의 약자)를 나타네요. html 파일에서 id값을 부여하는것을 ..

00. Vue.js 설치와 시작

Vue.js 시작하기 먼저 vue.js가 무엇인지 부터 알아봐야 겠죠? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. 공식문서에 나와있는 Vue.js의 정의이다. 다른프레임워크에 대한 비교는 숙련된 프론트엔드 개발자라면 확인하라고 적혀있었다... 대충 한번 훑어보았습니다. React와 비교 렌더링성능이 더 우수..