기본적으로 공식 웹 사이트에서 모든 지침을 정리했습니다 : http://vuejs.org/guide/index.html 여기서 우리는 관련된 모든 것만 함께 문자하기위한 예제로 할 일 목록 응용 프로그램을 취합니다. 이 기사의 모든 코드는 github https://github.com/lihongxun945/vue-todolist에 있습니다.
vue 인스턴스
vue 응용 프로그램은 root vue 인스턴스 부팅으로 시작되며 VUE 인스턴스가 다음과 같이 생성됩니다.
var vm = new vue ({// 옵션})인스턴스는 실제로 MVVM의 VM입니다. 들어오는 구성 객체의 데이터의 모든 속성은 인스턴스에 장착됩니다. 명명 충돌을 피하기 위해 VUE 내장 방법은 $로 시작하는 속성이있는 인스턴스에 장착됩니다.
인스턴스는 창조에서 파괴에 이르기까지 다음과 같은 수명주기를 거칩니다.
초기화 중에 약 3 단계 :
• 데이터 모니터링, 즉 데이터 모니터링
• 템플릿 컴파일
• 문서를 삽입하거나 해당 DOM을 교체하십시오
# vue 기본 구문
데이터 바인딩
Vue는 Mastache 구문을 사용합니다. 일반적으로 사용되는 바인딩 구문은 여러 범주로 나뉩니다.
• {{data}} {{data | 필터}}
• v-bind : href, v-bind : class와 같은 v-bind 결합 특성
• V-ON : CLICK, V-ON : 제출과 같은 V-ON 바인딩 이벤트
그중에서도 v-*는 지침입니다
예:
<div v-bind : class = "[classa, isb? classb : '']">
속성 계산
VUE는 매우 흥미로운 속성 계산 구문을 지원합니다. 속성이 다른 속성으로 계산되도록 지정할 수 있으므로 $ watch를 사용하여 구현할 필요가 없습니다.
var vm = new vue ({el : '#example', data : {a : 1}, 계산 : {// computed getter b : function () {//`이것은 vm 인스턴스를 가리 킵니다.## 프로세스 제어 및 목록과 관련된 구문에는`v-if`,`v-show`,`v-else`,`v-for`
형태
양방향 데이터 바인딩 :
<입력 유형 = "text"v-model = "Message"PlaceHolder = "edit me">
<입력 유형 = "checkbox"id = "jack"value = "jack"v-model = "CheckedNames">
## 애니메이션 구현 방법은 Angular and React의 구현 방법과 동일하며 클래스를 추가하고 삭제하여 구현됩니다. # 요소
구성 요소의 기본 사용
구성 요소의 정의에는 두 부분이 포함됩니다.
1 구성 요소 클래스 생성 :
var profile = vue.extend ({template : "<div> lily </div>"});2 태그 이름 등록 :
vue.component ( "me-profile", profile);
이런 식으로 TagName을 통해이 구성 요소를 사용할 수 있습니다.
<div id = "todo"> <my-profile> </my-profile> <form v-on : embowd = "add"v-on : avid.prevent> <input type = "text"v-model = "input"/> <입력 유형 = "value = 'add'/> </form> ... </div>
vue.component ( "me-profile", profile); 글로벌 등록입니다. 특정 페이지에서만 사용되는 경우 로컬로 등록 할 수 있습니다.
var vm = new vue ({el : "#todo", 구성 요소 : { "my-profile": profile}, ...}VUE 인스턴스가 TODO 요소에 바인딩되므로 MyProfile 이이 요소 외부에 배치되면 유효하지 않습니다. 이 Vue 인스턴스에 의해 초기화 될 것입니다.
참고 :
VUE 생성자가 전달할 수있는 매개 변수는 기본적으로 vue.extend에서 사용할 수 있지만 EL과 데이터의 두 매개 변수에주의를 기울여야합니다. 다른 인스턴스간에 동일한 객체를 공유하지 않기 위해 기능을 통해 항상 새 객체를 반환하는 것이 더 안정적입니다.
var mycomponent = vue.extend ({data : function () {return {a : 1}}})매개 변수는 동일하기 때문에 실제로는 동일하지만 하나는 구성 요소이고 다른 하나는 vue를 안내하는 데 사용됩니다.
템플릿에 대한 메모
VUE는 기본 DOM이므로 일부 사용자 정의 태그는 DOM 표준을 충족하지 못할 수 있습니다. 예를 들어, 테이블에서 TR을 사용자 정의하려면 내 구성 요소를 직접 삽입하는 경우 사양을 충족하지 않으면 다음과 같이 작성해야합니다.
<table> <tr는 = "my-component"> </tr> </table>입니다
데이터를 전달하는 소품
VUE에서 각 구성 요소는 독립적이며 부모 클래스의 데이터에 직접 액세스 할 수 없으며 직접 액세스해서는 안됩니다. 그렇다면 소품을 통해 하위 구성 요소에게 데이터를 전달하는 반응의 방법과 매우 유사합니까?
React와 달리 Vue의 하위 구성 요소는 먼저 자신의 소품을 선언해야합니다.
var profile = vue.extend ({props : [ "name"], 템플릿 :`<h2> {{name}}의 todo list </h2> <h4> {{name}}은 좋은 소녀 </h4>`});그런 다음 프로파일을 사용할 때 이와 같은 매개 변수를 전달할 수 있습니다.
<my-profile name = '릴리'> </my-profile>
이것은 리터럴을 통해 매개 변수를 전달하는 것이므로 전달 된 값은 문자열이어야합니다. 또 다른 방법은 매개 변수를 동적으로 전달하고 V-Bind를 통해 매개 변수를 전달하는 것입니다. 양방향으로 데이터를 바인딩하거나 비 스트링 매개 변수를 전달할 수 있습니다.
<my-profile v-bind : name = 'input'> </my-profile>
v-bind가 문자열 인 경우, 상위 구성 요소의 데이터에서 해당 필드입니다. 예를 들어, 위는 양방향으로 바인딩되는 입력 값입니다. 숫자라면 숫자로 바인딩됩니다.
VUE는 또한 일방 통행 또는 양방향 데이터 바인딩을 명시 적으로 지정할 수 있습니다.
<!-불이행, 일방 통과 바인딩-> <child : msg = "parentmsg"> </child> <!-명시 적 양방향 바인딩-> <child : msg.sync = "parentmsg"> </child> <!-명시 적 일회성 바인딩-> <child : msg.once = "parentmsg">
소품 확인
좋은 구성 요소는 항상 매개 변수가 먼저 올바른지 확인해야하며 일부 매개 변수의 기본값을 설정해야 할 수도 있습니다.
var profile = vue.extend ({input : {type : string}});부모-자식 구성 요소 커뮤니케이션
위에서 언급 한 소품은 실제로 부모 구성 요소가 메시지를 자식 구성 요소에 전달하는 방법입니다.
아동 구성 요소에는 부모 구성 요소와 루트 인스턴스를 방법에 사용하는 데 사용할 수있는 $ 부모와 $ root가 있습니다. 그러나 이제 우리는 그렇게하지 말아야합니다. 구성 요소 자체는 독립적 인 논리를 캡슐화하는 것이므로 부모 구성 요소의 데이터에 직접 액세스하면 구성 요소의 캡슐화가 파괴됩니다.
따라서 우리는 여전히 아동 구성 요소에 소품을 전달하는 부모 구성 요소를 통해 전달해야합니다.
물론 소품은 콜백 만 만들 수 있습니다. 이 문제는 React에서 논의되었습니다. React의 방법은 소품을 사용하여 콜백 함수를 어린이 구성 요소에 전달하는 것입니다. 사실, 나는 콜백 함수를 전달하는이 방법이 마음에 들지 않으며, 이벤트 방식을 선호합니다. Vue Neutronics는 이벤트를 통해 부모 구성 요소와 의사 소통 할 수 있습니다. 부모 구성 요소에 메시지를 보내는 것은 다음과 같습니다. $ dispatch를 통해 이루어지고 자식 구성 요소에 메시지를 보내는 것은 다음과 같습니다. $ boardcast. 여기서는 메시지가 모든 부모와 자녀에게 전송되지만 콜백이 실행되면 콜백 기능이 명시 적으로 진정으로 반환되지 않으면 중지됩니다.
이전 TODO 목록을 다른 구성 요소로 나누어 구현하여 양방향으로 구성 요소와 통신하는 방법을 경험할 수 있습니다. 우리는 두 가지 구성 요소, 즉 목록과 양식을 분할합니다.
Form은 양식을 제출할 때 사용자 입력을 처리하고 부모 구성 요소에 추가 메시지를 전송하는 책임이 있습니다. 코드는 다음과 같습니다.
var form = vue.extend ({props : {username : {type : string, default : "named"}}, data : function () {return {input : "",};}, 템플릿 :`<h1> {{username}} 's todo list </h1> <comp v- : "v-on : in add"v-n-- type "v-model ="input "/<입력 유형 ="value = 'add'/> </form>`, methods : {this. $ dispatch ( "add", this.input);목록은 목록을 표시하고 사용자 점검 작업을 처리 할 책임이 있습니다. 추가 메시지를 받으면 자체에 항목이 추가됩니다.
var list = vue.extend ({template : <ul> <li v-for = 'list'> <label v-bind : class = "{done : todo.done}"> <입력 유형 = "checkbox"v-model = "todo.done"/> {{todo.title}} </li> </ul> em> em> em>“, soctl : 유형 : array}}, data : function () {return {list : []}} {add : intup (input) {if (! input) return.list.unshift;그런 다음 이들은 두 가지 구성 요소이므로 시작을 부트 스트랩하기 위해 VUE 인스턴스가 필요합니다. 인스턴스는 다음과 같습니다.
var vm = new vue ({el : "#todo", 구성 요소 : { "todo-form": form, "todo-list": list}, events : {add : function (input) {this. $ broadcast ( "add", input);}}});실제로 형태와 목록은 논리적으로 평행 한 구성 요소이므로 아버지-아들 관계가 없으며 VM의 모든 자녀입니다. 여기서 VM은 양식 메시지를 수신 한 후 목록에 전달합니다.
HTML 코드는 더 간단합니다.
<div id = "todo"> <todo-form username = 'lily'> </todo-form> <todo-list> </todo-list> </div>
슬롯
슬롯은 모성 구성 요소에서 렌더링 된 HTML을 자식 구성 요소에 삽입하는 데 사용할 수 있습니다. 이것이 언제 필요한지 명확하지 않으며, 이것은 아동 구성 요소에 너무 침습적입니다.
동적 스위치 구성 요소
이 기능은 약간 중복됩니다. 대부분의 경우 동적 구성 요소 내장 VUE가 아닌 논리 코드를 전환해야합니다. 그러나 탭 전환과 유사한 기능을 구현하는 것이 매우 편리합니다.
여기에 우리는 About Page to todo 목록을 추가합니다. 따라서 먼저 VM을 구성 요소로 변경해야합니다.이 구성 요소는 TODO라고 불립니다.
var todo = vue.extend ({template : <div id = "todo"> <todo-form username = 'lily'> </todo-form> <todo-list> </todo-list> <lot> not show </div> <, components : { "todo-form": form, "{into-list", incits} 이. $ broadcast ( "add", input);실제로 첫 번째 변경 줄은 첫 번째 줄입니다.
그런 다음 구성 요소를 작성해야합니다.
var about = vue.extend ({template :`<div id = "about"> <p> todo list v0.1.0 </p> <p> 컨텐츠 </p> </div>`});다음은 핵심 요점입니다. 이 두 페이지를 전환하는 데 책임이있는 인스턴스 VM을 만들고 싶습니다.
var vm = new vue ({el : "body", data : {currentView : "todo"}, 구성 요소 : { "todo": todo, "aff": about}});여기서는 현재 이름이 될 수있는 CurrentView 필드를 정의한 다음 특수 구성 요소 태그를 사용하여 구성 요소를 전환합니다.
<component : is = "currentView"> </component> <li> <li> <label> <label> <input type = "radio"name = 'page'value = 'todo'v-model = 'currentView'> home </label> </li> <li> <라벨> <input type = "radio"name = 'page'value = 'v-model ='currentView '> </lile>> </li li>>
위 코드에는 두 가지 주목할 사항이 있습니다.
• 특수 태그 구성 요소를 사용한 다음 : IS 속성을 사용하여 구성 요소를 전환하십시오.
• 2 방향 바인딩을 통해 CurrentView 필드를 수정하여 클릭 후 전환 할 수 있습니다.
데이터 바인딩의 구현 원리
VUE는 반응 형 데이터 바인딩으로 번역 될 수있는 양방향 결합 반응성을 호출합니다. ES5에 의해 정의 된 Getter 및 Setter 메소드를 통해 내부적으로 구현되므로 IE8 및 다음 브라우저를 지원하지 않습니다. 이 구현에는 실수를 저지르는 쉬운 두 가지가 있습니다.
• 데이터에 속성을 직접 추가하고 삭제하면 감지 할 수 없습니다. 일반적으로 삭제는 불가능하지만 동적으로 추가 될 수 있습니다. 현재 vm. $ set ( "name", value)을 통해 추가해야합니다.
• 객체 내부의 변경 사항을 감지 할 수 없습니다. 즉, 데이터 속성의 변경 만 감지 할 수 있습니다. Data.a가 객체 인 경우 Data.AB = 1이 변경 사항을 감지 할 수 없습니다. 이 경우 새 객체를 생성하여 데이터에 할당해야합니다.
비동기 업데이트 메커니즘
Vue의 Dom에 대한 업데이트는 비동기입니다! 이 비동기식은 비동기 큐에서 수행되지만이 비동기 큐는 현재 이벤트 루프에서 실행됩니다. 따라서 데이터를 수정하면 쿼리 작업을 수행하기 위해 즉시 DOM으로 이동하는 것이 잘못입니다. 현재 DOM은 아직 업데이트되지 않았습니다. 올바른 방법은 이것을하는 것입니다.
vm.msg = '새 메시지'// datavm을 변경하십시오. $ el.textContent === '새 메시지'// falsevue.nextTick (function () {vm. $ el.textContent === '새 메시지'// true})또는 이것은 :
vm. $ nextTick (function () {this. $ el.textContent === '새 메시지'// true})구성 요소를 읽는 데 오랜 시간이 걸렸습니다. 또 다른 요점은 다음과 같습니다. 지침
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.