一、v-bind的用法：

1. 动态绑定class

<template>
  <!-- 使用对象键值对动态添加class -->
  <div :class="{active:'isActive',title:true}">
      hello world
  </div>
  <!-- 默认class可以和动态clas合并 -->
  <div class = 'default' :class="{active:'isActive',title:true}">
    hello world
  </div>
  <!-- 将class放到一个函数中-->
  <div :class="getClass()">
    hello worlddddd
  </div>
  <!-- ，或者计算属性中  -->
  <div :class="myClass">
    计算属性
  </div>
  <!-- 数组语法 ,abc作为真实class，title作为动态class，允许三元运算以及对象-->
  <div :class="['abc',title,isActive?'active':'',{active:true}]"> 
    hello world
  </div>
</template>

<script>
export default {
  name: 'bindClass',
  props: {
    
  },
  data(){
    return {
      isActive:true,
      title:'titleInData'
    }
  },
  computed:{
    myClass(){
      return {
        active:false,
        title:false
      }
    }
  },
  methods: {
    getClass(){
      return {
        active:true,
        title:false
      }
    }
  },
}
</script>
<style scoped>
  .active{
    color: red;
  }
</style>

2. 动态绑定style

<template>
  <div :style="{color:finalColor}"> hello style</div>
  <!-- style对象中，键值要用驼峰，短横线写法要用‘’引起来 -->
  <div :style="{fontSize:'50px','font-size':'20px'}">hello style</div>
  <!-- style可以直接放到一个对象中 -->
  <div :style="finalStyle">in a style obj</div>
  <!-- style使用数组语法 -->
  <div :style="[finalColor,tempStyle]">hello style</div>
</template>

<script>
export default {
  name: 'BindStyle',
  data () {
    return {
      finalColor:'red',
      finalStyle:{
          color:'red',
          fontSize:'40px'
      },
      tempStyle:{
          color:'blue'
      }
    }
  }
}
</script>

<style scoped>

</style>

3.动态绑定属性(动态属性名)

<template>
  <!-- 动态绑定属性  abc:theValue-->
  <div :[key]="value"> hello world</div>
  <!-- 直接绑定一个对象 -->
  <div v-bind="bindObj">v-bind一个对象</div>
</template>

<script>
export default {
  name: 'BindProperty',
  data () {
    return {
      key:'abc',
      value:'theValue',
      bindObj:{
          name:'why',
          age:18,
          home:'chongqing'
      }
    }
  }
}
</script>

<style scoped>

</style>

二、v-on的用法

<template>
  <div>
      <!-- v-on默认传递$event对象 -->
      <button v-on:click='handleClick'>点击</button>
      <button v-on:mousemove='handleMove'>鼠标移动</button>
      <!--直接绑定一个表达式  -->
      <button @click="counter++">{{counter}}</button>
      <!-- 绑定一个对象 -->
      <button v-on="{click:handleClick,mousemove:handleMove}">绑定一个对象</button>
      <!-- v-on传递参数，$event可以获取到事件发生时的事件对象 -->
      <button v-on:click="handleClick($event,'someValue')">传递参数</button>
      <!-- v-on的修饰符 -->
      <!-- 停止冒泡 -->
      <button @click.stop="handleClick">修饰符：停止冒泡</button>
      <!-- enter键执行 -->
      <input type="text" @keyup.enter="handleInput">
  </div>
</template>
 nbn
<script>
export default {
  name: 'useOn',
  data () {
    return {
      counter: 1
    }
  },
  methods: {
      handleClick(e,props){
          console.log(e.target)
          console.log('props:',props)
      },
      handleMove(e){
          console.log(e.target)
      },
      handleInput(e){
          console.log(e.target.value)
      }
  }
}
</script>

<style scoped>

</style>