반응형 Programming/Vue.js4 템플릿 문법 템플릿 문법Vue.js 는 랜더링 된 DOM 을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용한다.모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석 할 수 있는 유효한 HTML 이다. 내부적으로 Vue 는 템플릿을 가상 DOM 랜더링 함수로 컴파일 함.가상 DOM 개념에 익숙하고 JavaScript 기본 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성할 수 있다.선택사항으로 JSX 지원함.이에 대하여 자세히 알고 싶으면 Vue.js 공식 사이트(Render Functions & JSX) 접속하면 된다. 보간법(Interpolation)문자열텍스트 보간은 "Mustache" 구문(이중 중괄호 {{}} )을 사용하며.. 2018. 7. 6. Vue.js 라이프사이클 인스턴스 라이프사이클 훅인스턴스 라이프사이클 훅에는 크게 created, mounted, updated, destroyed 네가지로 나누어진다. createdcreation 단계에서 실행되는 훅(hook)들이 라이프사이클 중에서 가장 처음 실행됨.컴포넌트가 돔에 추가되기 전이고, 서버 렌더링에서도 지원되는 훅.아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el 를 사용할 수 없다.beforeCreate모든 훅 중에서 가장 먼저 실행되는 훅.아직 data 와 events ( vm.$on, vm.$once, vm.$off, vm.$emit ) 가 셋팅되지 않은 시점이므로, 접근하려고 하면 에러가 발생함.createdcreated 훅에서는 data 와 events 가 활성화되어 접근할.. 2018. 7. 6. Vue 인스턴스 Vue 인스턴스 Vue 인스턴스 만들기. 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작한다.Vue 인스턴스를 인스턴스화 할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 options 객체를 전달해야 한다.Vue 생성자는 미리 정의 된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 될 수 있다.확장된 인스턴스를 만들수는 있으나 대개 템플릿에서 사용자 지정 엘리먼트로 선언적으로 작성하는 것이 좋다.이 부분에 대한 설명은 컴포넌트 시스템에 대해서 확인 할 수 있다. 지금으로서는 모든 Vue 컴포넌트가 본질적으로 확장된 Vue 인스턴스라는 것을 알아야 한다. 속성과 메소드각 Vue 인스턴스는 data 객체에 있는 모든 속.. 2018. 7. 5. Vue.js 시작하기 1. Vue.js 이란? 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크 위키백과 : https://ko.wikipedia.org/wiki/Vue.jsVue.js 공식홈페이지 : https://vuejs.org 2. Vue.js 시작하기Vue.js 을 익히기 위한 요구사항?HTML, CSS, JavaScript 에 대한 중간 수준의 지식을 필요로 함. 2-1. 선언적 렌더링 핵심 : 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는 것. 실습을 하기 전에 준비해야 할 것. https://jsbin.com/ 으로 접속을 한다.각각 예제별로 나와있는 Html, JavaScript 소스를 jsbin 의 html, javascript 텝에 복사, 붙여넣기.. 2018. 7. 5. 이전 1 다음 반응형
