Vue.js 이벤트 프로세서 와 폼 컨트롤 바 인 딩 상세 설명

이벤트 처 리 는 주로 v-on 이라는 명령 을 통 해 실 행 됩 니 다.
사건 감청 및 방법 처리
1.간단하게 페이지 에 직접 삽입 할 수 있 습 니 다.
2.methods 에 방법 을 정의 한 다음 v-on 에서 실행 할 수 있 습 니 다.
3.함수 에 바 인 딩 을 통 해 파 라 메 터 를 전달 할 수 있 고 변수$event 를 통 해 함수 에 원생 DOM 이 벤트 를 전달 할 수 있 습 니 다.

<div id="app-1">
 <button v-on:click="counter += 1">  1</button>
 <p>        {{counter}}</p>
 <button v-on:click="great">great</button>
 <button @click="sya('hi')">say hi</button>
 <button @click="warn('form cannot be submit yet', $event)">submit</button>
</div>
<script type="text/javascript">
 var app1 = new Vue({
 el:'#app-1',
 data:{
 counter:0
 },
 methods:{
 great:function(event){
 alert('     '+ this.counter);
 alert(event.target.tagName);
 },
 sya:function(message){
 alert(message);
 },
 warn:function(msg,event){
 if(event) event.preventDefault();
 alert(msg);
 }
 }
 })
</script>

이벤트 수식 기
Vue.js 는 v-on 에 이벤트 수정자 를 제공 합 니 다.점(.)이 표시 하 는 명령 접 두 사 를 통 해 수식 자 를 호출 합 니 다.
.stop
.prevent
.capture
.self

<div id="app2">
<!--          -->
<a v-on:click.stop="doThis"></a>
<!--            -->
<form v-on:submit.prevent="onSubmit"></form>
<!--         -->
<a v-on:click.stop.prevent="doThat"></a>
<!--       -->
<form v-on:submit.prevent></form>
<!--                  -->
<div v-on:click.capture="doThis">...</div>
<!--           （      ）        -->
<div v-on:click.self="doThat">...</div>
</div>

버튼 수정자
키보드 사건 을 감청 할 때,우 리 는 자주 흔히 볼 수 있 는 키 값 을 모니터링 해 야 한다.Vue 는 v-on 이 키보드 이 벤트 를 감청 할 때 버튼 수정자 를 추가 할 수 있 도록 합 니 다.

<!--     keyCode   13     vm.submit() -->
<input v-on:keyup.13="submit">

모든 keyCode 를 기억 하 는 것 이 어렵 기 때문에 Vue 는 가장 자주 사용 하 는 버튼 에 별명 을 제공 합 니 다.

<!--    -->
<input v-on:keyup.enter="submit">
<!--      -->
<input @keyup.enter="submit">

모든 버튼 별명:
enter
tab
delete("삭제"와"체크 해제"키 캡 처)
esc
space
up
down
left
right
전역 config.keyCodes 대상 을 통 해 키 수정자 별명 을 사용자 정의 할 수 있 습 니 다:

//      v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

폼 컨트롤 바 인 딩
앞의 학습 을 통 해 우 리 는 v-model 이 입력 상자 에서 양 방향 응답 기능 을 가지 고 있다 는 것 을 알 고 있다.그러나 v-model 은 본질 적 으로 문법 사탕 에 불과 하 며 사용자 의 입력 사건 을 감청 하여 데 이 터 를 업데이트 하고 극단 적 인 예 를 특별히 처리 합 니 다.

//  
<input type="text" v-model="message" placeholder="edit it">
<p>this message is {{message}}</p>
<hr>
//    
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<hr>
//   
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<hr>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names  : {{ checkedNames }}</span>
<hr>
//    
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
<hr>
//    
<select v-model="selected">
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<hr>
<select v-model="mulselected" multiple>
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected  : {{ mulselected }}</span>

동적 속성

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
<p>toggle   {{toggle}}</p>

<input type="radio" v-model="pick" v-bind:value="a">

<select v-model="selected">
 <!--         -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>

수식 부호
lay:변경 후 실행

<input v-model.lazy="msg" >

number:출력 문자열 을 Number 형식 으로 변환 합 니 다.

<input v-model.number="age" type="number">

trim:사용자 가 입력 한 첫 번 째 빈 칸 을 자동 으로 걸 러 냅 니 다.

<input v-model.lazy.trim="msg" >

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.