事件處理

繫結監聽

       <h1>1.繫結監聽</h1>
       <button @click="test1">test1</button>
       <button @click="test2('abc')">test2</button>
       <button @click="test3">test3</button> 
<!--等同於<button @click="test3($event)">test3</button>--> 
       <button @click="test4(123,$event)">test4</button>
       <h2>2.事件修飾符</h2>
 

button 繫結click事件 傳入引數 傳入$event引數 傳入數字引數和$event引數

				//以下函式均寫在data中
		test1(){
                    alert('test1')
                },
                test2(msg){
                    alert(msg)
                },
                test3(event){
                    alert(event.target.innerHTML)
                },
                test4(number,event){
                    alert(number+ '----'+event.target.innerHTML)
                },
 

事件修飾符

       <h2>2.事件修飾符</h2>
       <div style="width: 200px;height: 200px;background:red" @click='test5'>
        <div style="width: 100px;height: 100px;background:blue" @click.stop='test6'></div>
       </div>
       <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
 

		test5(){
                   alert('outer')
               },
               test6(){
                   alert('inner')
               },
   			test7(){
                   alert('點選超連結')
               },

stop阻止事件冒泡

藍色div在紅色div內，當點選藍色div時，頁面彈出 inner，然後彈出outer，這就是事件冒泡，子元素找到父元素的事件。藍色div @click.stop可以阻止事件冒泡

prevent 阻止事件預設行為 超連結點選後會預設跳轉到目的路徑，加上prevent後，只執行test7內容，不會實現頁面跳轉

按鍵修飾符

       <h2>3.按鍵修飾符</h2>
       <input type="text" @keyup.13="test8">
       <input type="text" @keyup.enter="test8">

		test8(event){
                        alert('event.target.value' + ' ' + event.keyCode )
                }

頁面效果 輸入內容後按下enter鍵，會出現

enter對應keycode 是13 可以通過@keyup後跟數字或者enter兩種方式來實現

表單資料自動收集

輸入框，單選框，下拉框，多選框，多行文字框

特殊 下拉框是從data中遍歷address陣列，v-model繫結cityid，將所選中address中的id賦值給cityId

如圖是vue除錯工具的外掛

<div id="model">
        <form action="###" @submit.prevent="handleSubmit" >
            使用者名稱:<input type="text" v-model="username"><br>
            密碼:<input type="password" v-model="password"><br>
            <span>性別</span>
            <input type="radio" id="female" value="女" v-model="sex">
            <label for="female">女</label>
            <input type="radio" value="男" v-model="sex" v-model="sex">
            <label for="male">男</label><br>
            <span>愛好</span>
            <input type="checkbox" id="basket" name="basket" value="basket" v-model="hobby">
            <label for="basket">籃球</label>
            <input type="checkbox" id="foot" name="foot" value="foot" v-model="hobby">
            <label for="foot">足球</label>
            <input type="checkbox" id="tabletennies" name="tabletennies" value="tabletennies" v-model="hobby">
            <label for="tabletennies">乒乓球</label><br>
            <span>城市</span>
            <select v-model="cityId">
                <option value="">未選擇</option>
                <option :value="add.id" v-for="(add,index) in address" :key="index">{{add.name}}</option>
            </select>
            <br>
            <span>介紹：</span><br>
            <textarea rows="10" v-model="description"></textarea><br><br>
            <input type="submit">
        </form>
    </div>

 		new Vue({
            el:'#model',
            data:{
                username:'',
                password:'',
                sex:'女',
                hobby:[],
                address:[{id:1,name:'BJ'},{id:2,name:'SH'},{id:3,name:'GD'}],
                description:'',
                cityId:''
            },
            methods:{
                handleSubmit(){
                    alert('form提交')
                }
            }
        })