Vue.js Tutorial

프론트엔드 프레임워크인 Vue.js 공부를 시작해보자. 그동안 React & Redux를 사용한 프로젝트들을 만들면서 리액트에 어느정도 익숙해져 있는데, 많이 사용하는 프레임워크 중 하나인 뷰는 어떤 장점이 있는지 리액트와의 차이점을 느껴보고 싶다. 리액트에 비교적 뷰는 쉽게 접근할 수 있지만 깊게 공부할 수록 어렵기 때문에 원리를 잘 파악하며 공부하려고...

Event Modifiers v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다. index.html app.js image.png Vue는 v-on 이벤트에 이벤트 수식어를 제공한다. .stop .prevent .capture .self .once .passive Keyboard Event ...

Dynamic Css > 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 일반적으로 사용됩니다. 이 두 속성은 v-bind를 사용하여 처리할 수 있습니다. 우리는 표현식으로 최종 문자열을 계산하면 됩니다. 그러나 문자열 연결에 간섭하는 것은 짜증나는 일이며 오류가 발생하기 쉽습니다. 이러한 이유로, Vue는 class와 style에 ...

v-for v-for지시문을 사용하여 배열을 기반으로 항목 목록을 렌더링 할 수 있다. index.html app.js image.png index 내부 v-for블록에는 부모 범위 속성에 대한 모든 액세스 권한이 있다. image.png Template template v-if과 마찬가지로 ``태그를 사용하여 v-for여러 요소의 블록을...

프로젝트 셋팅 대표적인 IT 지식 관련 뉴스 그룹 서비스인 Hacker news API를 연동한 Vue.js 프로젝트를 만들어 보자. 해커 뉴스 >해커뉴스는 유명투자가이자 ‘해커와 화가’(한빛미디어 출판, 임백준 번역)의 저자, 그리고 스타트업 기업 대상 인큐베이터 플랫폼인 ‘Ycombinator’의 창시자 폴 그레이엄이 ‘Ycombinator’ 웹...

동적 라우터 image.png 유저의 아이디를 클릭하면 해당하는 유저의 정보가 나타나도록 라우터를 설정하려고 한다. routes/index.js NewsView.vue router-link를 사용해서 path에 /user + 유저 아이디를 적용시키면 UserVuew에서 해당하는 유저의 정보를 가져올 수 있다. image.png 개발자 도구에서 ...