vue.js는 데이터 중심 웹 인터페이스를 구축하기위한 라이브러리입니다. vue.js의 목표는 가능한 가장 간단한 API를 통해 반응 형 데이터 바인딩 및 결합 뷰 구성 요소를 구현하는 것입니다. (이것은 공식적인 설명입니다!)
편집자는 AngularJS를 사용하지 않았으며 React.js가 사용되지 않았습니다. 세 가지의 차이점을 자세히 설명 할 수 없습니다. 알고 싶다면 공식적인 분석이 있습니다. 여기를 클릭하십시오.
편집자는 1 년 이상 프론트 엔드 개발에 참여해 왔습니다. 처음에는 프론트 엔드 개발에 너무 많은 기술이있었습니다. 편집자는 힘이없고 고려할 수 없었습니다. 이해 후, 그는 Native JS 기본 합병과 jQuery로부터 학습의 학습 경로를 배우기로 결정했습니다. 편집자는 비즈니스 요구로 인해 vue.js를 사용합니다. AngularJS를 선택하지 않는 이유는 무엇입니까? 사실, 당신은 동시에 jQuery를 포기할 수 없습니다. vue.js와 jQuery는 완벽하게 호환 될 수 있습니다. 이 프로젝트로 인해 편집자는 오랫동안 초과 근무를 해왔으며 프로젝트 개발 시간의 증가를 피하기 위해 끊임없이 연구하고 있습니다. 더 이상 고민하지 않고 편집자의 VUE 학습 요약을 시작합시다. 글을 잘 쓰지 않으면 익숙하지 마십시오. 기사를 쓰는 것은 항상 나의 약점이었습니다. . . .
다음은 부모 체인으로서 Vue의 예입니다.
자식 구성 요소를 전달할 수 있습니다. 루트 인스턴스는 this.root를 사용하여 액세스 할 수 있습니다. 부모는 이것을 배열하고 있습니다 .Children과 모든 요소; 물론 프로젝트에서 우리의 구성 요소는 하나 또는 두 개만 가질 수 없습니다. 구성 요소가 너무 많으면 어린이의 구성 요소의 위치를 기억하기가 어렵습니다. V-Ref Directive를 사용하여 구성 요소에 대한 후크를 만들 수 있습니다. 이 후크는 다른 구성 요소가 구성 요소에 액세스 할 때 인덱스입니다.
// 이것은 내 구성 요소 중 하나입니다. <msg v-ref : msgs> </msg> // 현재이 MSG 구성 요소에 대한 msgs 인덱스를 설정했습니다. // 구성 요소 var vm = new vue ({})에 액세스 할 수 있습니다. var children = vm. $ refs.msgs // 이러한 방식으로 아동 구성 요소에 액세스하십시오. // v-Ref는 배열 또는 객체이며, 모든 Ref Hooks를 만드는 구성 요소 모음입니다.여기서는 사진을 보여주고 부모, 어린이 및 $ refs와 관련된 내용을 살펴 보겠습니다 (그림이 약간 흐릿하고 완전히 역동적 인 그림이 아닌 것 같습니다. 당황스럽고 명확하게 볼 수 없습니다. 데모를 만들어 인쇄 할 수 있습니다!)
이러한 방식으로 전체 인스턴스에서 구성 요소에 직접 액세스 할 수는 있지만, 어린이가 부모 구성 요소의 상태를 직접 수정하는 것이 매우 나쁘기 때문에 부모 및 자식 구성 요소를 단단히 결합하게하기 때문에 그렇게하는 것이 좋습니다. 이상적으로는 각 구성 요소의 범위가 독립적이기 때문에 각 구성 요소는 자체 상태 만 수정할 수 있습니다.
이 경우 Vue는 또한 우리에게 사용자 정의 이벤트를 제공합니다.
$ dispatch ()를 사용하여 이벤트를 파견하고 이벤트는 부모 체인을 따라 거품이됩니다.
$ broadcast ()를 사용하여 이벤트를 방송하면 이벤트가 모든 후손에게 전송됩니다.
조금 추상적으로 보이면 예를 들어 이해하기가 더 쉽습니다.
// $ dispatch () bubble case <!-example-> <div id = "app"> <!-구성 요소 통신 1-> <섹션> <div> <label "" "> msg data : </label> {{msg}} </div> <!-subcomponent-> <msg> </msg> </section> <template id ="> <div> <inpute = "> v-model = "msg"> <a href = "javaScript :;" @click = "add_data"> add </a> </div> </template> <cript> vue.component ( 'msg', {// 구문 설탕은 구성 요소를 직접 등록하는 데 사용됩니다. $ dispatch () 메소드는 부모 구성 요소를 듣는 방법입니다.이 방법은 아빠를 알려줍니다. 데이터를 업데이트했습니다. //이 메소드는 부모 구성 요소를 직접 작동시키는 것입니다. $ dispatch ( 'add_msg', par_msg);이 메소드는 이벤트 전파 메소드 this.msg = '';}}); var mvvm = new vue ({#app ', data : ['sgsg ']}, 이벤트를 생성합니다. 'add_msg': function (msg) {// add_msg는 하위 구성 요소로부터 알림을받는 데 사용되는 방법입니다이 코드를 읽은 후 모든 사람은 $ dispatch ()의 사용법을 알고 있다고 생각합니다. 실제로 두 개의 매개 변수가 있습니다. 첫 번째 매개 변수는 부모 구성 요소가 자식 구성 요소의 이벤트 객체에서 메소드 이름을 듣는다는 것입니다. 두 사람은 일관성이 있어야합니다. 두 번째 매개 변수는 자식 구성 요소에 의해 업데이트 된 데이터이며, 데이터로 전달되어 부모 구성 요소와 동기로 업데이트됩니다. 그런 다음 부모 구성 요소는이 매개 변수를 사용하여 해당 작업을 수행합니다.
// $ broadcast () 메서드의 사용법은 $ dispatch ()의 사용법과 동일합니다. 차이점은 이벤트 객체가 하위 구성 요소에서 생성되고 상위 구성 요소에서 트리거 된 함수가 반대되는 것입니다. 여기서 말하고 싶은 것은 자식 구성 요소의 데이터가 부모 구성 요소의 데이터에 완전히 의존하는 경우 일반 이벤트 전달 방법을 사용할 필요가 없다는 것입니다. 소품을 통해 부모 구성 요소의 데이터를 얻고 하위 구성 요소에 바인딩하면됩니다.
<!-구성 요소 통신 2 $ broadcast () 메소드-> <섹션> <h3> 부모 구성 요소에 의해 추가 된 데이터 소스 : </h3> <div> <label "" "> id : </label> <div> <input type ="v-model = "id"> </div> </div> <div> <label </label> </label> <input type = "text" v-model = "name"> </div> </div> <div> <label for = ""> host : </label> <div> <input type = "text"v-model = "inst"> </div> </div> <div> <label "" "> host : </label> <div> <input type ="v-model = "inst"> </div> <lade " for = ""> </label> <div> <a href = "javaScript :;" @click = "add_table"> add </a> </a> </div> </div> <h3> 다음 표는 자식 구성 요소 정보입니다. </h3> <!-부모 구성 요소의 table_data 데이터를 자식 구성 요소에 바인드 id = "broadcase"> <div> <table> <thead> <tr> <th> id </th> <th> name </th> <th> 취미 </th> </tr> </tbody> <tr v-for = "data in data"> <td> {{list.id}} </td> <td> {list.name}}}}}} list.inst}} </td> </tr> </tbody> </table> </div> </template> <cript> vue.component ( 'broadcase', {// 이것은 구성 요소를 등록하는 데 사용되는 구문 설탕이며 간단하고 바로 가기 템플릿 : '#broadcase', props : // props가 사용하는 데 사용됩니다. 데이터가 기본값이 필요한 경우 데이터에서 데이터를 정의 해야하는 경우 : function () {return {msg : 'abc'}}, events : {// 이것은 예제 일뿐입니다. 자식 구성 요소는 부모 구성 요소 테스트의 데이터 변경에 대해 듣습니다. '#app', data : {table_data : [{id : 1, name : 'gjei', inst : 'gjweir'}, {id : 2, name : 'jiuyer', inst : 'oiuyt'}]}, 방법 : {add_table : function () {var set = {id : this.id, this.name, inst. this.inst}; this.table_data.push (set); // this. $ broadcast ( 'test', set);위에서 언급 한 두 가지 예를 테스트하려면 여기를 클릭하십시오. 파일이 개인 공간에 업로드되었습니다.
내가 이것을 쓰면서, 나는 되돌아 보면서 내가 쓴 내용이 약간 지저분한 것처럼 보였다. 정말 부끄러워했다! 나는 오래 전에 블로그를 작성하고 내 자신의 노트 도서관을 구축하는 것에 대해 생각했지만, 전에 글을 쓰려고했을 때 실제로 할 수 없었습니다. 최근에, 나는 글을 쓰는 방법에 관계없이 글쓰기를 고집하기 위해 내 마음을 만들었습니다. 내 글쓰기 스타일이 갑자기 더 좋아지면 어떨까요!
실제로 응용 프로그램은 그리 어렵지 않습니다. 실제로 해당 API 인터페이스 모니터링을 제공합니다. 실제 프로젝트 응용 프로그램을 작동하고 변경하는 방법은 여전히 스스로 작성해야합니다. 핵심은 JS 수준을 향상시키는 것입니다. 결국, 점점 더 복잡한 웹 응용 프로그램이 있습니다! 프론트 엔드를 좋아하는 학생들이 JS로가는 길에서 서로 격려 할 수 있기를 바랍니다.