AngularJS와 같은 프론트 엔드 프레임 워크는 강력한 단일 페이지 응용 프로그램을 개발하는 것이 매우 편리 할 수 있습니다. 그러나 때로는 Angular와 같은 큰 프레임 워크가 프로젝트에 비해 너무 커서 많은 기능이 사용되지 않을 수 있습니다. 이 시점에서 우리는 그것을 사용해야 할 필요성을 평가해야합니다. 간단한 웹 페이지에 몇 가지 기능 만 추가하면 Angular를 사용하는 것이 너무 귀찮게되며 필요한 설치, 구성, 라우팅 작성, 컨트롤러 설계 등이 너무 번거롭게 보입니다.
현재보다 가벼운 솔루션이 필요합니다. vue.js는 좋은 선택입니다. vue.js는보기 모델 (ViewModal)에 중점을 둔 프레임 워크입니다. 보기 모델은 UI와 데이터 모델 간의 데이터 통신을위한 브리지이며 UI와 데이터 모델 간의 양방향 데이터 바인딩을 실현합니다. "완전한 프레임 워크"가 아니라보기 레이어에 중점을 둔 간단하고 유연한 프레임 워크입니다.
다음으로 간단한 메모 애플리케이션을 사용하여 vue.js의 기본 사항에 대해 배우게됩니다. 모든 사람이 vue.js 자체에 더 많은 관심을 기울이기 위해 로컬 데이터를 기반으로 클라이언트 응용 프로그램을 설계했습니다. 이 기사가 끝나면 vue.js와 백엔드 간의 상호 작용을 언급 할 것입니다.
준비
NPM을 통해 vue.js와 bootstrap을 먼저 얻으 봅시다 (필요하지 않아서는 스타일 라이브러리를 적용하는 것이 필요하지 않음).
NPM vue bootstrap을 설치하십시오
그런 다음 두 파일을 만듭니다.
touch index.html app.js
또한 index.html에 다음 내용을 추가하십시오
<!-index.html-> <! doctype html> <html> <head> <meta charset = "utf-8"> <title> vue </title> <!-css-> <링크 rel = "stylesheet"href = "node_modules/bootstrap/dist/dist/css/bootstrap.min. 네비게이션 바-> <av> <av> <a> <i> </i> Vue 메모 </a> </div> </nav> <!-응용 프로그램의 주요 부분-> <div id = "events"> <!-양식 추가-> <div> <div> <h3> 이벤트 추가 </h3> </div> </div> </div> </div> </divic> <div> </div> </div> </div> <!-js-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </script> </body> </html>
ID "이벤트"가 포함 된 <div> 태그는이 응용 프로그램의 핵심 부분입니다. 그 후 우리는이 핵심 부분에 대한 vue 인스턴스를 만들 것입니다.
vue 인스턴스를 만듭니다
먼저 VUE 인스턴스를 만들고이 인스턴스의 "el"속성을 "#Events"로 설정하겠습니다. 이러한 방식으로 인스턴스는 ID "이벤트"가있는 컨테이너에 바인딩됩니다.
// app.jsnew vue ({// 및 컨테이너 바인딩 id "events": '#Events'});이 시점에서 VUE의 기능은 DIV#이벤트에서 적용됩니다. 다른 컨텐츠를 추가하기 전에 생성 된 vue 인스턴스에 필요한 속성을 추가하겠습니다.
// app.js new vue ({// "events"의 ID와 함께 el을 바인딩하는 컨테이너 el : '#Events', // 데이터 속성에서 웹 페이지 데이터와 상호 작용하는 데이터를 정의합니다. {}});데이터 속성은 응용 프로그램의보기 모델에서 모든 데이터를 선언하는 객체입니다.
준비 속성은 응용 프로그램이로드 될 때 실행되는 함수입니다. 일반적으로 응용 프로그램에서 요구하는 데이터를 초기화하기 위해 다른 방법이 여기에서 호출됩니다.
메소드 메소드는이 응용 프로그램에서 사용해야하는 메소드를 정의합니다.
형태에 컨텐츠를 추가하십시오
우리는 형식으로 메모의 세부 사항을 입력해야합니다. 우리는 HTML5의 기본 시간 선택기를 사용하여 메모 컨텐츠의 시간을 설정했습니다. (이 기능은 Firefox 브라우저에 적용되지 않으며 Chrome 또는 Safari를 사용하는 것이 좋습니다).
<div> <입력 자리 표시기 = "이벤트 이름"V-Model = "event.name"> </div> <div> <textRea 자리 표시기 = "이벤트 설명"v-model = "event.description"> </div> <div> <입력 유형 = "date"placeHolder = "date"v-model = "event.date"> <버튼. @click = "addevent"> 제출 </button> </div>
입력 태그와 TextArea 태그에 "V- 모델"지침을 추가했습니다. Angular의 "ng-model"과 유사하게,이 V- 모델의 값은보기 모델 에서이 태그에 바인딩 된 데이터를 지정합니다. 이 데이터는 여기서뿐만 아니라 컨테이너의 다른 곳에서도 사용할 수 있습니다.
제출 버튼에 "@Click"명령을 추가했습니다. 이 명령어는 축약되며 전체 이름은 "v-on : 클릭"이어야합니다. 그 기능은 클릭 이벤트에 대한 리스너를이 버튼에 바인딩하는 것입니다. 클릭 이벤트가 트리거되면 @Click 명령의 리스너 기능이 실행됩니다. 이 예에서는 addevent 함수를 제출 버튼에 바인딩합니다. 우리는 또한 다른 사건을 묶을 수 있으며, 쓰기 규칙은 @event name = "청취 함수"입니다. 리스너 함수 F를 키 다운 이벤트에 바인딩하려면 다음을 작성할 수 있습니다. @keydown = "f"또는 v-on : keydown = "F"
이 시점에서 웹 페이지를 미리 보면 다음 내용이 표시됩니다.
데이터 추가
우리는 이전에 새로운 메모 데이터를 추가하는 데 사용되는 addevent 방법을 언급했습니다.
이제이 방법을 정의하고 필요한 데이터를 추가합니다.
// app.js ... data : {event : {name : '', description : ', date :' '}, events : []}, // 응용 프로그램이로드되면 준비 속성의 함수가 실행됩니다. fetchevents를 얻는 방법을 정의합니다 : futchevents = [var events = [{id : 1, name : '회의가 있습니다', '회의가 있습니다', 설명 : '21 층 회의실', 날짜 : '2015-09-10'}, {id : 2, name : 'shopping', 'Power Bank', 날짜 : '2015-10-02'}, '학습 :' vue ', date :'2016-03-11 '}]; // $ set은 VUE가 배열에 데이터를 삽입하는 방법입니다. 이보기는이를 실행할 때 새로 고침됩니다. $ set ( 'events', events); }, // 이벤트 배열에 데이터를 삽입 : function () {if (this.event.name) {this.events.push (this.event); this.event = {name : '', description : '', date : ''}; }}}데이터 속성에서는 이벤트와 이벤트 배열을 각각 나타내는 이벤트 객체 및 이벤트 배열을 정의합니다. 이 데이터는 응용 프로그램이로드되면로드됩니다. 이벤트 객체를 사전 정의하지 않으면 후속 기능을 구현할 수 있지만 브라우저는 다음 오류를보고합니다.
응용 프로그램에 사용하는 데이터가 데이터 속성에 선언되지 않은 경우 응용 프로그램의 성능에 영향을 미칩니다. 따라서 응용 프로그램에서 사용하는 데이터는 데이터 속성에서 가장 잘 선언됩니다.
준비된 속성에서는 데이터를 얻기 위해 Fetchevents 메소드를 정의합니다. 이 방법에서는 vm. $ set 메소드를 통해보기에 데이터를 추가합니다. 이 기능은 배열의 푸시 방법과 유사하며보기도 새로 고침됩니다. 이 메소드의 매개 변수는 들어오는 데이터를 나타내는 문자열 kyypath 여야합니다. 특정 사용은 여기를 참조하십시오.
마지막으로, 메소드 속성에서 addevents 메소드를 정의하여 이벤트 값이 존재하는지 확인하고 그렇다면 이벤트 배열에 이벤트를 추가하십시오. 그 후 이벤트 객체의 데이터가 지워지고 양식도 지워집니다.
항목 목록을 추가하십시오
우리는 모든 것을 나열하기 위해 물건 목록을 사용합니다.
<div> <a href = "#"v-for = "이벤트에서의 이벤트"> <h4> <i> </i> {{event.name}} </h4> <h5> <i v-if = "event.date"> </i> {{event.date}} </h5> <p v-if = "이벤트. }}} </p> <button @click = "deleteevent ($ index)"> delete </button> </a> </div>V-FOR 지시문을 사용하여 동일한 DOM 구조 및 다른 디스플레이 컨텐츠를 가진 렌더링 요소를 배치합니다. 이 예에서는 이벤트 배열에서 데이터를 가로 지르는 태그에 v-for 지시문을 추가하고 이벤트와 함께 각 트래버스 데이터를 나타냅니다. V-FOR 지시문이 추가 된 요소는 자식 요소의 각 트래버스 결과를 적용하여 반복적으로 표시합니다. 템플릿 엔진, 반응 또는 각도를 사용한 친구는 비슷한 사용법에 더 익숙 할 수 있습니다. 이 예에서는 H4, H5, P 및 버튼 태그의 내용이 반복적으로 표시되며 루프 수는 이벤트 배열의 길이입니다. V-FOR 지시 요소가있는 어린이를 템플릿이라고하며 템플릿의 데이터는 이중 버팀대로 래핑됩니다. 이 예에서 데이터는 이벤트 객체 (이름, 날짜 및 설명)의 다양한 속성입니다.
템플릿의 일부 요소에 V-IF 지침이 추가되었음을 알 수 있습니다. 이 명령어는 조건부 렌더링 역할을합니다. V-IF의 값은 판단 조건입니다. 결과가 참이면 요소가 렌더링되면 렌더링되지 않습니다. 또한 버튼 요소에 클릭 명령을 추가하고 Deleteevent 메소드를 호출하여 문제를 삭제합니다 (특정 정의는 아래에 나와 있습니다). 매개 변수 $ index는 배열에서 현재 트래버스 요소의 수를 나타냅니다.
페이지를 새로 고치면 모든 항목이 페이지 오른쪽에 나열됩니다. 왼쪽 양식의 내용을 입력하고 "제출"버튼을 클릭하면 새 항목이 오른쪽 목록에 자동으로 추가됩니다.
deleteevent 메소드를 정의해 봅시다
deleteevent : function (index) {if (확인 ( "이 이벤트를 삭제 하시겠습니까?")) {// $ remove is splice this.events와 유사한 vue 편의 메소드입니다. $ remove (index); }}이 방법에서는 먼저 사용자에게 항목을 삭제할 것인지 묻습니다. "확인"을 클릭하면 미리 정의 된 $ vue 메소드를 통해 항목이 DOM에서 삭제됩니다.
백엔드와의 상호 작용
Angular와 마찬가지로 Vue의 프론트 엔드 및 백엔드가 분리되며 HTTP 요청을 통해 백엔드와의 상호 작용이 완료됩니다. 많은 대화 형 도구가 있으며, 친숙한 $ .Ajax, 기본 XMLHTTPREQUEST 객체 또는 기타 타사 라이브러리를 사용하거나 VUE-RESOURCE를 사용해 볼 수 있습니다.
Vue-Resource에 대한 간단한 소개입니다. Vue-Resource는 HTTP 요청을 보내기 위해 VUE를 위해 특별히 설계된 플러그인입니다. Promise 및 URI 템플릿을 지원하며 인터셉터와 같은 도구도 제공합니다. 위의 예를 살펴 보겠습니다. 우리는 문제의 획득을 서버에서 얻을 수 있도록 변경합니다. 현재 FetchEvents 방법을 수정해야합니다. (백엔드가 API/이벤트의 URL을 통해 문제와 관련된 서비스를 제공한다고 가정합니다.
fetchEvents : function () {this. $ http.get ( 'api/events'). 그런 다음 (function (events) {this. $ set ( 'events', events);}). catch (function (error) {console.log (error);});}.획득이 성공하면 당시 함수의 명령문이 실행되고 $ set 메소드가 여전히 호출되지만 입력 매개 변수 이벤트는 서버에서 검색됩니다.
addevent를 수정하면 게시물 요청을 보내야합니다.
addEvent : function () {this. $ http.post ( 'api/events', this.event) .then (function (response) {this.events.push (this.event); console.log ( "이벤트 추가!");}))마찬가지로, 문제를 삭제하는 방법은 다음과 같이 수정 될 수 있습니다.
deleteevent : function (index) {this. $ http.delete ( 'api/events/' + event.id) .then (function (response) {this.events. $ remove (index);}) .catch (function (error) {console.log (error));}여기서 우리는 문제의 ID를 서버에 전달하여 서버에 문제의 ID를 삭제하여 서버가 삭제할 문제를 결정하도록 서버의 ID를 삭제하도록 지시합니다.
결론
Angular and React를 사용한 친구는 VUE를 발견 할 것이며 모두 비슷합니다. 반응과 유사한 각도, 모듈 식 처리와 유사한 지침. 그러나 Vue는 분명히 그들과 다릅니다. 가볍고 사용하기 쉽습니다. Angular와 같은 복잡한 구성을 만들 필요는 없으며 React와 같은 새로운 Virtual Dom, JSX 등과 같은 새로운 개념을 배울 필요가 없습니다. 따라서 응용 프로그램이 크지 않은 경우 VUE를 응용 프로그램 프레임 워크로 사용하는 것을 고려할 수도 있습니다.
위의 것은 편집자가 소개 한 vue.js에 대한 빠른 소개 자습서입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!