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>1234567891011121314 通常，我們使用一個方法，調用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>123456789101112131415161718192021 事件的修飾符：
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>123456789101112131415161718192021 單選按鈕
<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>12345678910111213141516171819202122 複選框
<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>1234567891011121314151617181920212223242526 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>12345678910111213141516171819202122 修飾符：
.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、輸入框的使用 ![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)