@blur 示例如下：

<template>
  <div>
    <!-- @blur 当元素失去焦点时触发blur事件 -->
    <div>
      <input type="text" placeholder="请输入内容" @blur="blurInfo"/>
    </div>
 
  </div>
</template>
 
<script>
    export default {
      name: "info",
      methods:{
        blurInfo(){
          console.log("blur事件被执行了")
        }
      }
    }
</script>
 
<style scoped>
 
</style>

@focus 示例如下

<template>
  <div>
    <!-- @focus 当元素获得焦点时触发focus事件 -->
    <div>
      <input type="text" placeholder="请输入内容" @focus="focusInfo"/>
    </div>
 
  </div>
</template>
 
<script>
    export default {
      name: "info",
      methods:{
        focusInfo(){
          console.log("focus事件被执行了")
        }
      }
    }
</script>
 
<style scoped>
 
</style>

@input 示例如下：

<template>
  <div>
    <!--  @input 当输入框发生变化时,触发input事件 -->
    <div>
      <input type="text" placeholder="请输入内容" @input="inputInfo"/>
    </div>
 
  </div>
</template>
 
<script>
    export default {
      name: "info",
      methods:{
        inputInfo(){
          console.log("input事件被执行了")
        }
      }
    }
</script>
 
<style scoped>
 
</style>

@click 示例如下：

<template>
  <div>
    <!-- @click 当按钮被点击时触发click事件 -->
    <div>
      <button type="infoo" placeholder="请输入内容" @click="clickInfo">按钮</button>
    </div>
 
  </div>
</template>
 
<script>
    export default {
      name: "info",
      methods:{
        clickInfo(){
          console.log("click事件被执行了")
        }
      }
    }
</script>
 
<style scoped>
 
</style>

@change当输入框失焦的时候触发

@close当关闭（窗口，按钮等）时事件触发