네발로 코딩하는 포메라니안

1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을 구현할 수 있다. 2. 라이브러리 불러오기 1. CDN 방식 2. NPM 방식 npm install vue-router 3. 실행 과정 router를 활용한 제일 기본적인 화면을 구성해보았다. STEP 0. component 생성 더보기 const Main = { template:'메인 페이지', }; const Board = { template:'게시판 페이지', }; STEP 1. path & component를 맵핑하는 router ins..

1. el과 data - el = 해당 vue를 적용할 구역 지정 - data = DOM에 보여줄 데이터 정의 {{title}} 2. methods method안에서 vue객체를 접근할 때는 this.데이터이름으로 접근 *arrow function에서 this는 window를 가리키므로 arrow function 쓰지 않도록 주의하기 {{msgStar()}} {{cnt}} 증가 3. filter - 화면에 표시되는 텍스트 형식을 간단하게 변환하는 기능 - {{ }} 또는 v-bind 속성에서 사용 가능 {{ msg | filterName }} 1. 전역필터 el로 적용할 구역을 정해주지 않기 때문에, 어떤 id를 가진 구역에서든 가져다 사용할 수 있다. 2. 지역필터 el에 지정한 대로 id=app인 구..

1. Vue.js란? 쉽게 생각하면 Frontend의 프레임워크라고 할 수 있으며, 가볍다는 것이 장점이다. 2. MVVM Pattern (Model + View + ViewModel) Model : 순수 JS 객체, Logic처리 View : 웹페이지 DOM (= html) ViewModel : Vue Vue가 view와 model을 자동으로 바인딩해서, 양방향 통신을 가능하게 한다. 풀어서 설명하자면, Vue가 DOMListener를 통해 DOM을 보고 있다가 변경사항이 생기면 JS에 반영한다. 반대로 DataBinding을 통해 JS에서 Data가 변경되면 DOM에 반영한다. 3. Vue 시작하기 1. Chrome 웹스토어에서 개발자 도구 추가 웹스토어에서 vue검색(아래 사이트) > Vue.js ..