99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Vue.js學(xué)習(xí)之事件處理器與表單控件綁定詳解

發(fā)布時間：2016-11-17 23:21  回復(fù):0  查看:2595   最后回復(fù)：2016-11-17 23:21  
本文和大家分享的就是Vue.js基礎(chǔ)知識之事件處理器與表單控件綁定相關(guān)知識，希望可以幫助大家更好的 學(xué)習(xí)Vue.js，一起來看看吧。

事件處理主要通過v-on 這個指令來執(zhí)行。

事件監(jiān)聽及方法處理

1. 簡單的可以直接內(nèi)嵌在頁面。

2. 可以通過將方法定義在 methods 中，然后再 v-on 中執(zhí)行

3. 可以通過綁定給函數(shù)傳遞參數(shù)，還可以傳遞通過變量 $event 給函數(shù)傳遞原生 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(' 點擊數(shù)目為 '+ 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  提供了 事件修飾符 。通過由點 (.) 表示的指令后綴來調(diào)用修飾符。

.stop
.prevent
.capture
.self
<div id="app2">
<!--  阻止單擊事件冒泡  -->
<a v-on:click.stop="doThis"></a>
<!--  提交事件不再重載頁面  -->
<form v-on:submit.prevent="onSubmit"></form>
<!--  修飾符可以串聯(lián)   -->
<a v-on:click.stop.prevent="doThat"></a>
<!--  只有修飾符  -->
<form v-on:submit.prevent></form>
<!--  添加事件偵聽器時使用時間捕獲模式  -->
<div v-on:click.capture="doThis">...</div>
<!--  只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時觸發(fā)回調(diào)  -->
<div v-on:click.self="doThat">...</div>
</div>
按鍵修飾符

在監(jiān)聽鍵盤事件時，我們經(jīng)常需要監(jiān)測常見的鍵值。 Vue  允許為  v-on  在監(jiān)聽鍵盤事件時添加按鍵修飾符：

<!--  只有在  keyCode  是  13  時調(diào)用  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
表單控件綁定

通過前面的一些學(xué)習(xí)，我們知道v-model 在輸入框中具有雙向響應(yīng)功能。但  v-model  本質(zhì)上不過是語法糖，它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。

文本
<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>
復(fù)選框
<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 數(shù)組 : {{ 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 數(shù)組 : {{ mulselected }}</span>
動態(tài)屬性

<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">
    <!--  內(nèi)聯(lián)對象字面量  -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
lay ：在改變后才觸發(fā)

<input v-model.lazy="msg" >
number ：將輸出字符串轉(zhuǎn)為 Number 類型

<input v-model.number="age" type="number">
trim ：自動過濾用戶輸入的首尾空格

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

文章來源：前端開發(fā)博客
您還未登錄，請先登錄

熱門帖子

最新帖子

?