vue有关绑定的知识点

一、v-bind绑定class

1、对象的形式

数组形式绑定class

二、绑定style样式

1、对象的形式绑定样式

html结构

<div :style="styleObj">some text here...</div>

vue对象

new Vue({
el: ".box",
data: {
styleObj: {
width: "200px",
height: "200px",
backgroundColor: "green",
color: "yellow"
}
}
})

三、v-model双数据绑定（一般用于为input输入框绑定输入值）

<input v-model="myvalue" type="text"/>

input类型分为text/checkbox/radio...

select

四、vue中的事件绑定

1、事件绑定的第一种方式

html结构

vue对象

new Vue({
el:".box",
methods:{
myclick:function(){

}
}
})

2、绑定事件的第二种方式（简写形式）

html结构

<button @click="myclick"></button> //官方推荐事件绑定用简写形式

vue对象

new Vue({
el:".box",
methods:{
myclick:function(){

}
}
})

可以绑定事件类型： @click/mouseover/mouseout/keydown/keyup......

3、监听键盘事件

所有的键盘事件keydown/keyup/keypress

vue内置事件对象

<input @keydown="input($event)" />

new Vue({
el:".box",
methods:{
input:function(ev){

}
}
})

vue自带的键盘事件名

• keyup.left/right/up/down
• keydown.left/right/up/down
• keypress.left/right/up/down

自定义键盘按下事件修饰符

Vue.config.keyCodes = {
zero:48
}

<input type="text" @keydown.zero="input" />

4、vue自带的事件修饰符

• prevent/stop/self/once
• prevent 阻止事件的默认行为
• stop 阻止事件冒泡