IT/프론트엔드 (3) 썸네일형 리스트형 vue.js - 라우터, http, 템플릿, CLI 뷰 라우터뷰에서 라우팅 기능을 구현 할 수 있도록 지원하는 공식 라이브러리 : 페이지 이동 태그, 화면에서는 로 표시됨 : 페이지 표시 태그. 변경되는 url에 따라 해당 컴포넌트를 출력해주는 영역$mount() API -el속성과 동일하게 인스턴스를 화면에 붙이는 역할 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 // 3. Main. Login 컴포넌트 내용 정의 var Main = { template: 'main' }; var Login = { template: 'login' }; // 4. 각 url에 해당하는 컴포넌트 등록 var routes = [ { path: '/main', component: Main }, { path: '/login', component: Log.. vue.js - 뷰 인스턴스, 컴포넌트 이해하기 뷰 인스턴스뷰 인스턴스 생성자- new Vue()로 인스턴스 생성 시 Vue를 생성자라고 함- Vue생성자는 뷰 라이브러리 로딩하고 나면 접근 가능new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); 뷰 인스턴스 옵션 속성- 인스턴스 생성 시 재정의할 data, el, template 등의 속성 의미- el : 미리 정의되어있으며, 뷰로 만든 화면이 그려지는 시점을 뜻함- # 선택자는 CSS선택자 규칙과 같음- template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성- methods : 화면 로직제어와 관계된 메서드를 정의하는 속성, 화면의 전반적인 이벤트와 화면동작과 관련된 로직 추가- created : 뷰 인스턴스가 .. vue.js 개발환경 설정 -아톰, node.js, 뷰 개발자도구 1. 아톰 에디터 설치아톰(Atom) 텍스터 에디터는 깃허브에서 제작한 무료 텍스터 에디터.100% 무료이고, 확장플러그인을 이용해서 유용한 기능을 추가할 수 있기 때문에 기능면에서도 우수하다아톰 에디터 다운로드 주소 https://atom.io/ 아톰에디터의 File - setting 에서 아래 플러그인 설치 가능- Themes : seti-ui 플러그인 : 직관적인 파일아이콘 제공, 색깔 조합이 눈에 너무 튀지않아 장시간 코드봐도 눈에 덜 부담- atom-material-syntax-dark : 자바스크립트 코드 구문 강조색 조합 잘되있어서 코드 가독성 높아짐+language-vue 패키지 설치시 vue 코딩 용이 2. node.js 설치https://nodejs.org/ko/ 3. 뷰 개발자 도구 .. 이전 1 다음
