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} 으로 작성해주시면 됩니다. 음 추가적으로 작성한 클래스명이 - ..

Vue.js & javascript 면접 질문 요약

Q. Angular를 처음 선택한 이유는 무엇인가? A. 처음 Front-End 프레임워크를 선정하여 공부할 때 확실히 하고 싶었다. Angular가 자료도 방대했고 react나 Vue.js 보다 튜토리얼도 잘 지원하였고, typescript 때문에 진입장벽이 높다고들 하지만 오히러 JAVA나 C++과 비슷한 느낌이들어 크게 어렵지 않았다. 모든 프레임워크에서 겪을 만한 Component를 나누는 기준이나 MVC 기반 설계와 같은 부분이 더 어려웠다. Q. 그렇다면 마이그레이션할 프레임워크를 Vue.js로 선택한 이유는 무엇인가? A. 가장 큰 문제는 첫 페이지 렌더링 속도였다. Angular가 다른 프레임워크에 비해 무겁고 렌더링이 느리다. 빌드옵션을 JIT에서 AOT로 변경하고, 의존성 모듈을 최소화..

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값을 부여하는것을 ..