一、v-bind绑定class

1、对象的形式

数组形式绑定class

二、绑定style样式

1、对象的形式绑定样式

html结构

vue对象

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

三、v-model双数据绑定&＃xff08;一般用于为input输入框绑定输入值&＃xff09;

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

select

四、vue中的事件绑定

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

html结构

vue对象

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

2、绑定事件的第二种方式&＃xff08;简写形式&＃xff09;

html结构

//官方推荐事件绑定用简写形式

vue对象

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

可以绑定事件类型&＃xff1a; &＃64;click/mouseover/mouseout/keydown/keyup......

3、监听键盘事件

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

vue内置事件对象

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 &＃61; {zero:48}

  4、vue自带的事件修饰符

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

• stop 阻止事件冒泡