vue事件處理器
事件處理的時候,v-on,監聽DOM事件,在運作的時候運作js的代碼。
事件監聽:v-on
<body>
<div id="app">
<button v-on:click="counter+=1">點我</button>
<p>這個按鈕被點選了{{counter}}次</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
counter:0
}
})
</script>
</body>
通常,我們使用一個方法,調用js的方法,我們還可以使用v-on接受一個定義的方法:
<body>
<div id="app">
<!--greet時我們定義的方法-->
<button v-on:click="greet">點我</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'vue.js'
},
//method對象中定義方法
methods:{
greet:function(){
alert('hello'+this.name)
}
}
})
</script>
</body>
事件的修飾符:
v-on指令縮寫@ (v-on:click == @click)
處理DOM事件細節,vue通過(.)表示的指令字尾來調用修飾符
.stop <a @click.stop=“doThis”> 阻止單擊事件冒泡
.prevent <a @submit.prevent=“onsubmit”> 送出事件不再重載頁面
.capture 添加事件偵聽器的時候使用事件捕獲模式
.self 在該元素本身觸發時(不是子元素)觸發回調
.once click事件隻能點選一次 (2.14版本新增)
按鍵修飾符
vue允許v-on在監聽鍵盤事件的時候,添加按鍵修飾符
v-on:keyCode @keyUP
.enter
.tab
.up
.left
.alt
.mate
vue.js表單
我們早介紹表單的時候,首先回顧一下雙向綁定
v-model指令在表單元素上建立雙向資料綁定
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-PgBMtgXf-1604129049371)(C:\Users\DELL\AppData\Local\Temp\1564625799276.png)]
v-model會根據控件類型自動的選取正确的方法更新元素
輸入框
<body>
<div id="app">
<p>input元素</p>
<input v-model="message">
<p>消息{{message}}</p>
<p>textarea 元素</p>
<textarea v-model="message2"></textarea>
<p style="white-space: pre">{{message2}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'親愛的,熱愛的',
message2:'古詩詞'
}
})
</script>
</body>
單選按鈕
<body>
<div id="app">
<input type="radio" id="runoob" value="林志玲" v-model="picked">
<!--label可以把光标轉移到對應的元素上-->
<label for="runoob">林志玲</label>
<br>
<input type="radio" id="google" value="迪麗熱巴" v-model="picked">
<label for="google">迪麗熱巴</label>
<br>
<span>選中值為: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked : '空'
}
})
</script>
</body>
複選框
<body>
<div id="app">
<p>單個複選框</p>
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{checked}}</label>
<p>多個複選框</p>
<input type="checkbox" id="a" v-model="checkedName" value="方天畫戟"/>
<label for="a">方天畫戟</label>
<input type="checkbox" id="b" v-model="checkedName" value="青龍偃月"/>
<label for="b">青龍偃月</label>
<input type="checkbox" id="c" v-model="checkedName" value="丈八蛇矛"/>
<label for="c">丈八蛇矛</label>
<span>最終標明的而武器:{{checkedName}}</span>
</div>
<script>
new Vue({
el:'#app',
data:{
checked:true,
checkedName:[]
}
})
</script>
</body>
select清單
<body>
<div id="app">
<select v-model="selected" name="fruit">
<option value="">選擇人物</option>
<option value="亞瑟">戰士</option>
<option value="靳柯">刺客</option>
</select>
<div id="output">
選擇的人物是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>
修飾符:
.lazy
在預設的情況下,v-model在input事件中同步輸入框的值與資料,如果輸入.lazy,轉變在change事件中同步
.number
将使用者輸入的值,自動轉換為number類型
.trim
自動過濾輸入兩端的空格
回顧:
監聽事件:v-on (兩種方法)
表單的使用 v-model
作業:
## 修飾符:
.lazy
在預設的情況下,v-model在input事件中同步輸入框的值與資料,如果輸入.lazy,轉變在change事件中同步
.number
将使用者輸入的值,自動轉換為number類型
.trim
自動過濾輸入兩端的空格
## 回顧:
監聽事件:v-on (兩種方法)
表單的使用 v-model
修飾符
## 作業:
1、事件監聽兩種方法熟練掌握
2、輸入框的使用