반응형 frontend22 Vue.js 시작하기 : (4) Templete Syntax & Vue-cli 템플릿 문법 & Vue-CLI 7. 템플릿 뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나누어집니다. 데이터 바인딩 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)입니다. {{ message}} new Vue({ message = 'hello world' }) 디렉티브 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있습니다. 예를 들어 아래와 같이 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있습니다. 속성 중 v- 로 .. 2020. 4. 23. Vue.js 시작하기 : (3) Router & Axios 라우터 & Axios 5. 라우터 Vue 라우터는 Vue.js의 공식 라우터입니다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다. 아래의 기능을 포함합니다. 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 세밀한 네비게이션 컨트롤 active CSS 클래스를 자동으로 추가해주는 링크 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 5-1. 라우터 코드 정의 new VueRouter({}) 를 이용하여 라우터 인스턴스를 정의할 수 있습니다. 그리고 new Vue({}) 객체의 router 속.. 2020. 4. 23. Vue.js 시작하기 : (2) Instance & Comoponent 인스턴스 & 컴포넌트 3. 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야하는 코드입니다. 3-1. 인스턴스 소개 아래 코드에서 Vue로 인스턴스를 생성하는 것을 보여줍니다. 3-2. 인스턴스와 생성자 함수 인스턴스와 생성자 함수를 사용하는 예는 다음과 같습니다. function Vue() { this.logText = function() { console.log('hello'); } } var vm = Vue(); vm.logText(); 출력 -> hello 3-3. 인스턴스 옵션 속성 new Vue({ el: , template: , data: , methods: , created: , watch: }) el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) templa.. 2020. 4. 23. Vue.js 시작하기 : (1) 소개 & Reactivity 개발환경 설정 & Vue 소개 1. 개발환결 설정 1-1. Vue.js 설치하기 Chrome Visual studio code Node.js Vue.js devtools 1-2. Plug-In 설치하기 Vetur Night Owl Material Icon Theme Live Server ESLint Prettier Auto Close Tag Atom Keymap 2. Vue 소개 2-1. Vue는 무엇인가? MVVM 패턴의 ViewModel Layer에 해당하는 View단 라이브러리 DOM Listeners View에서 DOM에 있는 Event를 수신하여 DOM Listeners를 통해 Model에 전달 Data Bindings Model 에서 Business Logic을 처리후 Data Bindings.. 2020. 4. 23. 이전 1 2 3 4 다음 반응형
