vue有关绑定的知识点

一、v-bind绑定class

1、对象的形式

<div :class="{text-danger:true}"></div>

数组形式绑定class

<div :class="[textRed,base,radius]"></div>

二、绑定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结构

<button v-on:click="myclick"></button>

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 阻止事件冒泡