VUE基础知识四：事件绑定及修饰符、双向绑定

事件绑定及修饰符

• 在调用事件的时候需要传入参数

method:{
	clickHandle(event){
		console.log(event.target)
	}
},
// 在没有传入任何参数的时候，存在一个默认参数event，表示当前标签对象
template:`<div @click="clickHandle">hello world!</div>`
//-----------------------------
method:{
	clickHandle(num,event){
		console.log(num)
		console.log(event.target)
	}
},
// 当传入参数的时候，如果不显示写出event，则方法中无法接收，可以使用$event方式获取并作为参数传入
template:`<div @click="clickHandle(num,$event)">hello world!</div>`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 绑定多个事件

method:{
	clickHandle(){
		console.log(2)
	},
	clickHandle2(){
		console.log(1)
	},
},
// 错误写法
template:`<div @click="clickHandle,clickHandle2">hello world!</div>`
// 正确写法
template:`<div @click="clickHandle(),clickHandle2()">hello world!</div>`
1
2
3
4
5
6
7
8
9
10
11
12

• 事件冒泡规则（默认）

method:{
	clickHandle(event){
		console.log(2)
	},
	divClickHandle(event){
		console.log(1)
	}
},
/*此时点击button,同时会触发clickHandle、divClickHandle两个事件，从内到外依次触发*/
template:`
<div @click="divClickHandle">
	<button @click="clickHandle">点击这里</button>
</div>
`
1
2
3
4
5
6
7
8
9
10
11
12
13
14

事件修饰符

• prevent：阻止默认行为，如在form表单在action中的地址，默认会发生跳转，为了阻止跳转，可以在点击事件上增加prevent修饰符。

method:{
	clickHandle(event){
		console.log(2)
	}
},
template:`
<div>
	<button @click.prevent="clickHandle">点击这里</button>
</div>
`
1
2
3
4
5
6
7
8
9
10

• stop：停止事件冒泡，当父标签和子标签都定义了事件，在点击子标签的时候，父标签的点击事件也会被触发，此时为了让父标签事件不触发，可用stop修饰符。

method:{
	clickHandle(event){
		console.log(2)
	},
	divClickHandle(event){
		console.log(1)
	}
},
template:`
<div @click="divClickHandle">
	<button @click.stop="clickHandle">点击这里</button>
</div>
`
1
2
3
4
5
6
7
8
9
10
11
12
13

• self：父子标签都有事件，点击子标签触发子标签点击事件，点击父标签触发父标签点击事件，可以在父标签上增加self修饰符。

method:{
	clickHandle(event){
		console.log(2)
	},
	divClickHandle(event){
		console.log(1)
	}
},
template:`
<div @click.self="divClickHandle">
	<button @click="clickHandle">点击这里</button>
</div>
`
1
2
3
4
5
6
7
8
9
10
11
12
13

按键修饰符

• enter：在点击enter的时候，触发事件。

template:`
<div>
	<button @keydown.enter="clickHandle">点击这里</button>
</div>
`
1
2
3
4
5

• tab：同理enter，点击tab键触发
• delete：同理enter，点击delete键触发
• esc：同理enter，点击esc键触发
• up：同理enter，点击向上箭头键触发
• down：同理enter，点击向下箭头键触发

鼠标修饰符

• left：点击左键，触发事件

template:`
<div>
	<button @click.left="clickHandle">点击这里</button>
</div>
`
1
2
3
4
5

• right：同理left，点击右键，触发事件
• middle：同理left，点击中键，触发事件

双向绑定

• input：输入框绑定
• textarea：文本域绑定
• input：checkbox多选框绑定

// 在多选框被选中后，value值会自动赋值给message数组，取消选中后，也会从message中去除,message是个数组
<input type="checkbox" value="id1" v-model="message"/>
<input type="checkbox" value="id2" v-model="message"/>
<input type="checkbox" value="id3" v-model="message"/>
<input type="checkbox" value="id4" v-model="message"/>
data(){
    return{
    	message:[]
    }
}
1
2
3
4
5
6
7
8
9
10

• input：radio单选框绑定，和checkbox相同，不同在于radio是单选，message使用字符串即可，无需数组

• select-option：选择框绑定

<select v-model="message">
    <option style="color:aliceblue;" disabled value="">请选择内容</option>
    <option v-for="item of options" :value="item.value">{{item.text}}</option>
</select>
data(){
    return{
        message:"",
        options:[{
            value:"A",
            text:"A"
        },{
            value:"B",
            text:"B"
        },{
            value:"C",
            text:"C"
        }]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19