소개하다
vue.js는 웹 응용 프로그램 인터페이스를 작성하는 데 사용되는 라이브러리입니다.
기술적으로 Vue.js는 MVVM 모드의 뷰 모델 레이어에 중점을 두며, 이는 뷰 및 데이터 바인딩 모델을 두 가지 방식으로 연결합니다. 실제 DOM 작동 및 출력 형식은 지침 (지침) 및 필터 (필터)로 추상화됩니다.
철학 분야에서 MVVM 데이터 바인딩 API를 가능한 한 간단하게 만드십시오. 모듈성과 합성 가능성은 또한 중요한 설계 고려 사항입니다. Vue는 포괄적 인 프레임 워크가 아니며 간단하고 유연하게 설계되었습니다. 이를 사용하여 신속하게 프로토 타입을 사용하거나 다른 라이브러리와 믹스 앤 매치하여 프론트 엔드 스택을 정의 할 수 있습니다.
vue. JS API는 AngularJS, Knockoutjs ractive.js rivets.js를 나타냅니다. 유사성에도 불구하고 Vue.js는 현재 일부 기존 프레임 워크에서 귀하의 가치를 얻는 소중한 방법을 제공한다고 생각합니다.
이 용어 중 일부에 대해 이미 익숙하더라도 본 용어의 개념이 vue.js 아래에 다를 수 있으므로 개념에 대한 다음 개요를 전달하는 것이 좋습니다.
개념 개요
뷰 모델
객체는 모델과 뷰를 동기화합니다. Vue.js에서 ViewModels는 인스턴스화 VUE 생성자 또는 서브 클래스입니다.
var vm = new vue ({ / * 옵션 * /})이것은 vue.js를 사용하여 개발자로 상호 작용할 주요 객체입니다. 자세한 내용은 클래스 : vue를 참조하십시오.
보다
사용자가 본 실제 HTML/DOM
vm. $ el //보기
vue.js를 사용할 때는 자신의 사용자 정의 지침을 제외하고 DOM 작업을 거의 터치하지 않습니다. 데이터가 업데이트되면보기 업데이트가 자동으로 트리거됩니다. 보기 업데이트는 각 테스트 노드 노드에 정확하게 도달 할 수 있습니다. 또한 더 나은 성능을 제공하기 위해 비동기식으로 배치되고 실행됩니다.
모델
이것은 약간 수정 된 JavaScript 객체입니다
vm. $ data // 모델
Vue.js에서 모델은 단순한 JavaScript 객체, 데이터 객체 일뿐입니다. 속성을 조작하고 모델을 관찰 한 다음 알림을 변경하여 변경할 수 있습니다. vue.js는 ES5의 getter/setter를 사용하여 Data Object HU의 속성을 변환하여 더러운 확인없이 직접 작동 할 수 있습니다.
데이터 객체는 적절한 시간에 돌연변이가 있으므로 수정하는 것은 참조별로 vm. $ 데이터를 수정하는 것과 동일합니다. 이것은 또한 동일한 뷰 모델 인스턴스를 용이하게하여 동일한 데이터를 관찰합니다.
기술적 인 자세한 내용은 인스턴스화 옵션 : 데이터를 참조하십시오.
지침
개인 HTML 속성은 vue.js에게 dom에 대한 처리를 수행하도록 지시합니다.
<div v-text = "메시지"> </div>
여기의 div 요소에는 v- 텍스트 명령이 있으며 값은 메시지입니다. 그것은 vue.js 에이 div 노드의 내용을 ViewMode의 메시지 속성과 동기화하도록 지시하는 것을 의미합니다.
지침은 DOM 작업을 캡슐화 할 수 있습니다. 예를 들어, V-ATTR은 속성 요소에서 작동하고 V-Repeat 배열, V-O-추가 이벤트 청취를 기반으로 요소를 복제하는 V-Repeat는 나중에 논의 할 것입니다.
콧수염 바인딩
텍스트 및 속성에서 콧수염 스타일 바인딩을 사용할 수도 있습니다. 그것들은 v-text v-attr 지침으로 변환됩니다. 예를 들어:
<div id = "person- {{id}}"> hello {{name}}! </div>편리하지만주의를 기울여야 할 몇 가지 사항이 있습니다.
이미지 SRC 속성이 설정되면 HTTP 요청이 전송되므로 템플릿이 처음 구문 분석되면 V-ATTR을 사용하는 것이 좋습니다.
HTML을 구문 분석 할 때 Internet Explorer는 잘못된 내부 스타일 속성을 삭제하므로 IE 바인딩 인라인 CSS를 지원하려면 항상 V 스타일을 사용합니다.
V-HTML 내부에서는 3 개의 브레이스를 사용하여 escaped html을 처리 할 수 있지만 XSS 공격을 유발하고 창을 열 수 있습니다. 따라서 데이터가 절대적으로 안전하거나 신뢰할 수없는 HTML을 사용자 정의 파이프 라인 필터를 통해 청소하는 것이 좋습니다.
필터
이 원시 데이터는보기를 업데이트하기 전에 기능을 사용하여 처리 할 수 있습니다. 그들은 "파이프 라인"지침 또는 구속력을 사용하고 있습니다.
<div> {{메시지 | 자본화}} </div>이제 div의 텍스트 내용이 업데이트되기 전에이 메시지의 값은 Cagialize 함수를 통해 처리됩니다. 자세한 내용은 필터가 깊이있는 필터를 참조하십시오.
구성 요소
vue.js에서 구성 요소는 vue.component (id, 생성자)에 등록 된 간단한보기 모델 생성자입니다. 관련 ID를 사용하면 다른 뷰 모델의 템플릿에 대한 V- 성분 지시문을 중첩 할 수 있습니다. 이 간단한 메커니즘은 선언 된 뷰 모델을 최신 브라우저 나 무거운 폴리 플릴없이 웹 구성 요소와 유사하게 재사용하고 결합합니다. 응용 프로그램을 더 작은 구성 요소로 분류함으로써 결과는 매우 분리되고 유지 관리 가능한 코드 기반입니다. 자세한 내용은 보안 모드 구성을 참조하십시오.
빠른 예
<div id = "demo"> <h1> {{title | 대문자}}} </h1> <ul> <li v-repeat = "todos"v-on = "click : done =! done"> {{content}} </li> </ul> </div> var demo = new vue ({el : '#demo', data : {title : 'todos', todos : [{done : true, content : 'charn javaScript'}, {done : false, content : 'learn vue.js'}}})대략적인 번역, 오류를 지적하십시오