Vue (14) 썸네일형 리스트형 상품 화면 마크업 v-html 바인딩 : 연결된 속성을 순수 HTML로 렌더링 한다, 편리 할 수 는 있지만 믿을 수 있는 값일 때만 사용 하거나 거의 사용하지 않는편이 좋다. 크로스 사이트 스크립트 공격 뷰에 직접적으로 HTML을 삽입하는 코드를 작성할때 애플리케이션은 크로스 사이트 스크립트(XSS) 공격에 노출된다. 일반적으로 가장 좋은 방법은 HTML과 콘텐츠에 대한 기본 원칙을 최소한으로 따르는것 이다. HTML 보간을 사용 할때는 신뢰 할 수 있는 콘텐츠만 출력한다. HTML 보간을 사용 할 때는 절대 사용자가 제공한 콘텐츠를 출력 하지 않는다. 필요시 텍스트 입력으로 HTML 요소를 받지 않고 고유의 템플릿 컴포넌트를 사용해서 기능을 구현한다. 출력 필터 적용 일반적인 출력 필터 형식 -> {{property .. Vue 생명주기 Vue가 처음 인스턴스화 되면 Vue 생명주기라고 하는 일련의 이벤트를 거친다. 오랫동안 작동하는 Vue 애플리케이션은 이벤트 루프를 돌면서 대부분의 시간을 보낸다. 대부분의 라이브러리를 끌어오는 무거운 작업은 애플리케이션이 처음 생성될 때 처리한다. Vue 생명주기 다이어그램 가상 DOM -> DOM을 나타내는 가벼운 추상화, 웹 브라우저에서 사용하는 DOM트리를 모방 한다. 렌더 함수 -> 뷰가 사용자에게 정보를 보여주는 방법 생명주기 훅 추가 생명주기 코드 탐구 beforeCreate, created, beforeMount, mounted 함수의 경우 인스턴스 생성 및 DOM이 마운트 되는 동시에 라이프 사이클 이벤트가 실행된다. beforUpdate, updated 함수 의 경우 Vue 인스턴스가.. 반응형 애플리케이션 반응형 애플리케이션 조건 애플리케이션 상태 변화를 관찰 애플리케이션 전체에 변경 알림을 전달 상태 변화에 따라 뷰를 자동 렌더링 사용자 상호 작용을 위해 시기 적절한 피드백을 제공 반응형 웹 애플리케이션은 지속적인 상호 작용이 막히는 것을 방지하고 가능한 함수적 프로그래밍 관용구를 사용 하는 비동기 기술인 MVVM 디자인 원칙에 따라 이러한 조건들을 만족시킨다. Vue와 MVVM 반응성 사용 방법 모든 Vue 애플리 케이션은 적어도 하나의 Vue 인스턴스를 가지고있다. Vue는 완전한 웹 기술로 구축 했기 때문에 하나의 Vue 인스턴스 또한 웹 브라우저에만 존재한다. 결정적으로 업데이트된 뷰, 비즈니스 로직의 실행, 뷰 또는 뷰-모델 영역에 있는 모든 작업에 대해 서버 기반 페이지에서 새로고침을 하는것에.. 모델 - 뷰 - 뷰모델 패턴 모델 - 뷰 - 뷰모델(MVVM) 모델 - 뷰 - 뷰모델 패턴 구성 요소 MVVM 설계 방식은 개발자가 사용자 반응에 즉각 응답할 수 있는 소프트웨어를 만들 수 있게 하며, 사용자에게는 하나의 일에서 다른 일 로 자유롭게 움직일 수 있게 한다. Vue.js - 컴포넌트 데이터 전달 Vue.js 를 사용하여 자식 컴포넌트 또는 부모 컴포넌트에 props를 사용 하여 데이터를 전달 할수있다. - 부모 컴포넌트 -> 자식 컴포넌트 데이터 전달 예제 컴포넌트 생성 inputField.vue inputField 내부 소스 Home.vue - 자식 컴포넌트 -> 부모 컴포넌트 전달 예제 - methods object를 사용한 함수 사용 방법 Home.vue 생성한 컴포넌트를 기반으로 html 요소 생성 method -> updateName () 함수 생성 inputField.vue 입력 받을 요소인 input 요소 생성 후 :value = "name" Home.vue에서 전달한 props 데이터 전달 @input 이벤트로 updateName() 함수 실행 this.$emit() 요소로 Hom.. Vue.js - 리스트 렌더링 v-for로 엘리번트에 배열 매핑 v-for 디렉티브를 사용 하여 배열을 기반으로 리스트를 렌더링 할 수 있다. v-for 디렉티브는 item in items 형태로 특별 한 문법이 필요하다. items -> 원본 데이터 배열 item -> 반복되는 배열 엘리번트의 별칭 사용 방법 v-for 디렉티브의 경우 현재 항목의 인덱스에 대한 두 번째 전달 인자 옵션을 제공한다. 사용방법 v-for에서 기존 엘리먼트를 재사용, 재정렬 하기 위해서는 각 항목들에 고유한 key 속성을 제공 해주어야 한다. key의 경우 각 항목을 식별 할 수 있는 고유한 ID이다. 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본동작에 의존 하지 경우를 제외하면 v-for에 key를 추가하는것이 제일 좋다. Vue.js - 조건부 렌더링 v-if 디렉티브는 조건에 따라 블록을 렌더링 하기 위해 사용된다. 사용방법 -> v-else-if if - else if - else 와 동일한 문법 Vue.js 2.1.0+ 부터 사용 가능 문법 사용 방법 조건부 그룹 생성 방법 사용 방법 Vue.js - watch 속성 프로그램이 진행되면서 변경 값에 대한 감시가 필요한경우, 또는 변경 전 후 값이 필요 한 경우 watch 속성을 주로 사용한다. 이전 1 2 다음
