1. V- 바인드 약어
<!-완전한 구문-> <a v-bind : v-bind : href = "url"> </a> <!-약어-> <a : href = "url"> </a> <!-완료 구문-> <버튼 v-bind : disabled = "somedynamicCondition"> button> <!-Abbreviation-> <somedibult = ""somedynamamicCondition ">
2. V-on 약어
<!-완료 구문-> <a v-on : 클릭 = "dosomething"> </a> <!-약어-> <a @click = "dosomething"> </a>
3. 필터
{{메시지 | 자본화}}4. 조건부 렌더링
v-if <h1 v-if = "ok"> 예 </h1> </h1> </h1> </h1> no </h1> <div v-if = "math.random ()> 0.5"> 죄송합니다 </div> <div v-else> 미안하지 않음 </div> template-v-if <템플릿 v-if = "OK"> title </h1> <p> pargraph 1 </p>. 2 </p> </template> v-show <h1 v-show = "ok"> hello! </h1>
5. 목록 렌더링
v-for <ul id = "example-1"> <li v-for = "항목의 항목"> {{item.message}} </li> </ul> var example1 = new vue ({el : '#example-1', data : {intem : [usmer : 'foo'}, {메시지 : 'bar'}}); <ul id = "example-2"> <li v-for = "항목의 항목"> {{parentmessage}}-{{$ index}}-{{item.message}} </li> </ul> var exames2 = new vue ({el : '#example-2', data : {parentmessage : '{메시지 :'메시지 : '메시지 :'메시지 : '메시지 :'메시지 : '메시지 :'메시지 : '메시지 :' }]}});배열 변경 감지
vue.js는 관찰 된 배열의 돌연변이 된 방법을 랩핑하여보기 업데이트를 트리거 할 수 있습니다. 래핑 된 메소드는 다음과 같습니다. push (), pop (), shift (), unshift (), splice (), sort (), reverse ()
example1.items.push ({message : 'baz'}); example1.items = example.filter (function (item) {return item.message.match (/foo/);}); Template-v-for <ul> <template v-for = "항목의 항목"> <li> {item.msg}} </li> <li> </li> </템플릿> </ul>객체 v-for
<ul id = "repeat-object"> <li v-for = "value in object"> {{$ key}} : {{value}} </li> </ul> new vue ({el : '#repeat-object', data : {Object : {firstName : 'John', lastName : 'doe', Age : 30}});값 범위 v-for
<div> <span v-for = "n in 10"> {{n}} </span> </div>6. 방법 및 이벤트 처리기
메소드 프로세서
<div id = "example"> <button v-on : click = "greet"> greet </button> </div> var vm = new vue ({el : '#example', data : {name : 'vue.js'}, // 'methods'에서 메소드를 정의합니다. //`event`는 기본 DOM 이벤트 알림 (event.target.tagname)}}) // JavaScript 코드에서 메소드 vm.greet ()를 호출 할 수도 있습니다. // -> '안녕하세요 vue.js!'인라인 명령문 프로세서
<div id = "example-2"> <button v-on : "say ( 'hi')"> say hi </button> <button v-on : click = "say ( 'what')"> say what </button> </div> new vue ({el : '#example-2', 방법 : {say : function (msg) {alert (msg)});때로는 인라인 명령문 프로세서에서 기본 DOM 이벤트에 액세스해야합니다. 특별 변수 $ 이벤트를 사용하여 메소드로 전달할 수 있습니다.
<button v-on : click = "say ( 'hello!', $ event)"> 제출 </button> 메서드 : {say : function (msg, event) {// 이제 기본 이벤트 객체 이벤트에 액세스 할 수 있습니다 .preventDefault ()}};## 이벤트 수정 자
<!-버블 링-> <a v-on : click : "dothis"> </a> <!-제출 이벤트 제출 이벤트는 더 이상 페이지를 과부하시키지 않습니다-> <form v-on : submit.prevent = "onsubmit"> </form> <!-수정자는 voN :> <! <! <! <! <! <! <! <! v-on : 제출 .prevent> </form>
## 키 수정 자
<!-vm.submit ()는 키 코드가 13-> <입력 V- 온 : keyup.13 = "제출"> <!-위와 동일-> <input v-on : keyup.Enter = "제출"> <!-약어 구문-> <input @keyup.Enter = "제출">
모든 주요 별칭 : Enter, Tab, Delete, ESC, Space, Up, Down, Left, 오른쪽
## 다른 예
new vue ({el : '#demo', data : {newlabel : '', stats : stats}, methods : {add : function (e) {e.preventDefault () if (! this.newlabel) {return;} this.stats.push (the {label : this.newlabel, value : 100}); (stat) {if (this.stats.length> 3) {this.stats. $ remod (stat);7. 전환
CSS 전환
<div v-if = "show"transceition = "expand"> hello </div> 그런 다음 .expand-transition, .expand-enter 및 .expand-leave에 대한 css 규칙을 추가하십시오 :/* 필수*/. Expand-Transition {전이 : 모든 .3s 편의; 높이 : 30px; 패딩 : 10px; 배경색 : #eee; 오버플로 : 숨겨진;}/* .expand-enter 입력 시작 상태를 정의하십시오* //* .expand-leave 이탈 상태를 정의하십시오*/. Expand-enter, .expand-leave {height : 0; 패딩 : 0 10px; 불투명도 : 0;}동적 바인딩을 통해 동일한 요소에서 다른 전환을 달성 할 수 있습니다.
<div v-if = "show": antransition = "antrositionName"> hello </div> new vue ({el : '...', data : {show : false, transitionName : 'fade'}}또한 JavaScript 후크를 제공 할 수 있습니다.
vue.Transition ( 'expand', {preverenter : function (el) {el.textContent = 'proforeenter'}, enter : function (el) {el) (el) {el.textContent = 'beforeleave'}, Leave : function (el) {el.textContent = 'Leave'}, 내세 : function (el) {el.textContent = 'extleave'}, LeaveCANCELLED : function (el) {// handle cancellation});8. 구성 요소
1. 등록
// var mycomponent = vue.extend ({template : '<div> 사용자 정의 구성 요소! </div>'}); // register vue.component ( 'my-component', myComponent); // 루트 인스턴스 생성 신입 vue ({el : '#example'}); <div id = "<my-component> </my compont> 또는 write" vue.component ( 'my-component', {template : '<div> 사용자 정의 구성 요소! </div>'}); // 루트 인스턴스 생성 new vue ({el : '#example'}); <div id = "example"> <my-component> </my-component> </div>2. 소품을 사용하여 데이터를 전달하십시오
Example 1:
vue.component ( 'child', {// props props : [ 'msg'], // props는 템플릿에서 사용할 수 있습니다. //`the.msg`를 사용하여 템플릿을 사용하여 '<span> {{msg}} </span>'}); <child msg = "hello! "> </child>Example 2:
vue.component ( 'child', {// javaScript props의 camelcase : [ 'myMessage'], 템플릿 : '<span> {{myMessage}} </span>'}); <!-html의 케밥 사례-> <child my message = "hello!"> </child>3. 동적 소품
<div> <입력 v-model = "parentmsg"> <br> <child v-bind : my-message = "parentmsg"> </child> </div>
V-Bind의 약어 구문을 사용하는 것은 일반적으로 더 간단합니다.
<child : my-message = "parentmsg"> </child>
4. 프로 롭 바인딩 유형
PROP는 기본적으로 일원 바인딩입니다. 부모 구성 요소의 특성이 변경되면 하위 구성 요소로 전달되지만 다른 방법은 그렇지 않습니다. 이는 아동 구성 요소가 실수로 상위 구성 요소의 상태를 수정하는 것을 방지하기위한 것입니다. 이는 응용 프로그램의 데이터 흐름을 이해하기 어렵게 만듭니다. 그러나 .sync 또는 .once 바인딩 수정자를 사용하여 양방향 또는 단일 시간 바인딩을 명시 적으로 강제 할 수도 있습니다.
비교 구문 :
<!-기본값은 단방향 바인딩-> <child : msg = "parentmsg"> </child> <!-양방향 바인딩-> <child : msg.sync = "parentmsg"> </child> <!-싱글 바인딩-> <child : msg.once = "parentmsg"> </chirect : <h6 : show.sync = "showmodal"> 슬롯 = "헤더"> 사용자 정의 헤더 </h3> </modal> </div>
5. 검증
구성 요소는 소품에 대한 검증 요구 사항을 지정할 수 있습니다. 이 검증 요구 사항이 구성 요소의 API를 형성하여 다른 사람들이 구성 요소를 올바르게 사용하도록하기 때문에 구성 요소가 다른 사람에게 제공 될 때 유용합니다. 현재 소품 값은 검증 요구 사항을 포함하는 객체입니다.
vue.component ( 'example', {props : {// 기본 유형 감지 ( 'null`은 모든 유형을 의미합니다. () {return {msg : 'hello'}}}, //이 소품을 양방향 바인딩으로 지정하십시오. // 바인딩 유형이 올바르지 않으면 경고가 포기됩니다. {coerce : function (val) {return val + ''// 값을 문자열로 변환}}}}}}}}}} {coerce : coerce : function (val) {return json.parse (val) // json 문자열을 개체}}}}}});기타 예 :
vue.component ( 'modal', {template : '#modal-template', props : {show : {type : boolean, 필수 : true, twoway : true}});6. 등록
// var mycomponent = vue.extend를 정의하십시오 (템플릿 : '<div> 사용자 정의 구성 요소! </div>'}); // vue.component ( 'my-component', mycomponent); // 루트 인스턴스 생성 mew vue ({el : '#example'}); <div id = "acomponent> </mycomponent> </component> </component>또는 직접 작성하십시오.
vue.component ( 'my-component', {template : '<div> 사용자 정의 구성 요소! </div>'}); // 루트 인스턴스 생성 new vue ({el : '#example'}); <div id = "example"> <my-component> </my-component> </div>7. 소품을 사용하여 데이터를 전달하십시오
Example 1:
vue.component ( 'child', {// props props : [ 'msg'], // props는 템플릿에서 사용할 수 있습니다. //`the.msg`를 사용하여 템플릿을 사용하여 '<span> {{msg}} </span>'}); <child msg = "hello! "> </child>Example 2:
vue.component ( 'child', {// javaScript props의 camelcase : [ 'myMessage'], 템플릿 : '<span> {{myMessage}} </span>'}); <!-html의 케밥 사례-> <child my message = "hello!"> </child>8. 동적 소품
<div> <입력 v-model = "parentmsg"> <br> <child v-bind : my-message = "parentmsg"> </child> </div>
V-Bind의 약어 구문을 사용하는 것은 일반적으로 더 간단합니다.
<child : my-message = "parentmsg"> </child>
9. Prop 바인딩 유형
PROP는 기본적으로 일원 바인딩입니다. 부모 구성 요소의 특성이 변경되면 자식 구성 요소로 전달되지만 다른 방법은 그렇지 않습니다. 이는 아동 구성 요소가 실수로 상위 구성 요소의 상태를 수정하는 것을 방지하기위한 것입니다. 이는 응용 프로그램의 데이터 흐름을 이해하기 어렵게 만듭니다. 그러나 .sync 또는 .once 바인딩 수정자를 사용하여 양방향 또는 단일 시간 바인딩을 명시 적으로 강제 할 수도 있습니다.
비교 구문 :
<!-기본값은 편도 바인딩-> <child : msg = "parentmsg"> </child> <!-양방향 바인딩-> <child : msg.sync = "parentmsg"> </child> <!-싱글 바인딩-> <child : msg.once = "parentmsg"> </child>
기타 예 :
<modal : show.sync = "showmodal"> <h3 slot = "Header"> 사용자 정의 헤더 </h3> </modal> </div>
10. 프로 롭 확인
구성 요소는 소품에 대한 검증 요구 사항을 지정할 수 있습니다. 이 검증 요구 사항이 구성 요소의 API를 형성하여 다른 사람들이 구성 요소를 올바르게 사용하도록하기 때문에 구성 요소가 다른 사람에게 제공 될 때 유용합니다. 현재 소품 값은 검증 요구 사항을 포함하는 객체입니다.
vue.component ( 'example', {props : {// 기본 유형 감지 ( 'null`은 모든 유형을 의미합니다. () {return {msg : 'hello'}}}, //이 소품을 양방향 바인딩으로 지정하십시오. // 바인딩 유형이 올바르지 않으면 경고가 포기됩니다. {coerce : function (val) {return val + ''// 값을 문자열로 변환}}}}}}}}}} {coerce : coerce : function (val) {return json.parse (val) // json 문자열을 개체}}}}}});기타 예 :
vue.component ( 'modal', {template : '#modal-template', props : {show : {type : boolean, 필수 : true, twoway : true}});11. 슬롯을 사용하여 컨텐츠를 배포하십시오
<lot> 요소는 구성 요소 템플릿에서 컨텐츠 배포 슬롯으로 사용됩니다. 이 요소 자체는 대체됩니다.
이름 속성이있는 슬롯을 이름 지정된 슬롯이라고합니다. 슬롯 속성이있는 콘텐츠는 이름이 일치하는 이름의 슬롯에 배포됩니다.
예를 들어, 다음과 같은 템플릿이있는 다중 검사 구성 요소가 있다고 가정합니다.
<div> <슬롯 이름 = "one"> </slot> <lot> </slot> <slot name = "two"> </slot> </div>
부모 구성 요소 템플릿 :
<multi-insertion> <p slot = "one"> one </p> <p slot = "two"> 2 </p> <p> 기본값 a </p> </multi-insertion>
렌더링 결과는 다음과 같습니다.
<div> <p slot = "one"> one </p> <p> 기본값 a </p> <p slot = "two"> 2 </p> </div>