码农教程 - 一技在手,衣食无忧! tools

Vue v-on 指令

❮ 上一节 Vue 指令参考 下一节 ❯

示例

使用v-on更改背景颜色的指令<div>单击按钮时的元素。

<template>
  <h1>v-on Example</h1>
  <div v-bind:class="{ yelClass: bgColor }">
    <p>Click the button to change background color of this DIV box.</p>
    <button v-on:click="bgColor = !bgColor">Click</button>
    <p>bgColor property: "{{ bgColor }}"</p>
  </div>
</template>
运行示例 »

请参阅下面的更多示例。

定义和用法

这个v-on指令放置在元素上以附加事件侦听器。

附加事件侦听器v-on我们需要提供事件类型、任何修饰符以及该事件发生时应运行的方法或表达式。

如果v-on放置在常规 HTML 标签上，我们可以定义监听的事件类型是常规事件，例如input,click或者mouseover。

如果v-on放置在自定义组件上，我们可以定义监听的事件类型是从该组件发出的自定义事件。

简写为v-on:是@。

修饰符

修饰符 细节
.capture 首先捕获冒泡事件.capture修改器已设置。 运行示例 »
.once 该事件只能在页面加载后触发一次。 运行示例 »
.passive 通过设置将事件处理程序标记为被动passive: true在 DOM 元素上。这意味着浏览器不必等待查看是否event.preventDefault()被调用，对于经常发生的事件（例如滚动），将事件处理程序设置为被动可以提高性能。 运行示例 »
.prevent 该事件被阻止触发。例如，可用于阻止默认表单提交事件。不可能阻止所有事件。 运行示例 »
.stop 冒泡事件将停止进一步传播。这event.stopPropagation()叫做。 运行示例 »
.self 默认情况下，事件向上传播到父元素，因此一个事件可以触发多个事件侦听器。这.self修饰符仅允许来自其自身元素的事件触发事件侦听器。 运行示例 »
.{keyAlias} 例如，限制事件处理程序仅对某些事件键做出反应v-on:click.right或者v-on:keyup.s。我们甚至可以要求处理程序需要同时发生多个按键才能做出反应，如下所示：v-on:click.left.shift。 运行示例 »
.left 单击鼠标左键。
.right 单击鼠标右键。
.middle 单击鼠标中键。

更多示例

示例1

使用.capture修饰符首先捕获父元素中的点击事件。

<template>
  <h1>v-on Example</h1>
  <p>When the '.capture' modifier is used on the parent DIV element, the event is captured first in the parent element when the child element is clicked.</p>
  <p>If the '.capture' modifier is removed from this code, the child element will capture the click event first. This is the default behavior, that the event bubbles up, first in child element, then to the parent.</p>
  <div v-on:click.capture="this.msg.push('parent')" id="parent">
    <p>This is the parent element.</p>
    <div v-on:click="this.msg.push('child')">
      <p>This is the child element. CLICK HERE!</p>
    </div>
  </div>
  <p>The order of when and where the event is captured.</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
}
#parent {
  width: 250px;
  background-color: lightpink;
}
#parent > div {
  cursor: pointer;
  background-color: lightgreen;
}
</style>
运行示例 »

示例2

使用.stop修饰符以防止事件进一步传播。

<template>
  <h1>v-on Example</h1>
  <p>The '.stop' modifier stops the click event from propagating any further.</p>
  <p>If the '.stop' modifier is removed from this code, the parent element will also capture the click event on the child element.</p>
  <div v-on:click="this.msg.push('parent')" id="parent">
    <p>This is the parent element.</p>
    <div v-on:click.stop="this.msg.push('child')">
      <p>This is the child element. CLICK HERE!</p>
    </div>
  </div>
  <p>The order of when and where the event is captured.</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
}
#parent {
  width: 250px;
  background-color: lightpink;
}
#parent > div {
  cursor: pointer;
  background-color: lightgreen;
}
</style>
运行示例 »

示例3

使用.passive修饰符以增强滚动期间的性能。

<template>
  <h1>v-on Example</h1>
  <p>The '.passive' modifier sets the event handler as passive, and this can enhance performance.</p>
  <div v-on:scroll.passive="this.scrollTimes++" id="parent">
    <p>Scroll here.</p>
    <p>Bladi-bladi-bladi</p>
    <p>potato potato</p>
    <p>Scroll-scroll-scroll</p>
    <p>Scroll more...</p>
  </div>
  <p>Scroll happended {{ scrollTimes }} times.</p>
</template>

<script>
export default {
  data() {
    return {
      scrollTimes: 0
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
  width: 200px;
  height: 50px;
  overflow: scroll;
  background-color: lightcoral;
}
</style>
运行示例 »

示例4

使用.once修饰符以增强滚动期间的性能。

<template>
  <h1>v-on Example</h1>
  <p>The '.once' modifier prevents the event from happening more than once.</p>
  <button v-on:click.once="clickTimes++">Click</button>
  <p>Click event happened {{ clickTimes }} times.</p>
</template>

<script>
export default {
  data() {
    return {
      clickTimes: 0
    };
  }
}
</script>
运行示例 »

示例5

使用.self修饰符，以便父元素仅对自身发生的单击事件做出反应。

<template>
  <h1>v-on Example</h1>
  <p>The '.self' modifier is set on the parent element. </p>
  <p>Click on the child element and see how the event propagates past the parent element because the parent click event only reacts to click on the element itself.</p>
  <div v-on:click="addMsg('grandParent')" id="grandParent">
    Grandparent element
    <div v-on:click.self="addMsg('parent')">
      Parent element.
      <div v-on:click="addMsg('child')">
        Child element. CLICK HERE!
      </div>
    </div>
  </div>
  <p>The order of when and where the event is captured.</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  },
  methods: {
    addMsg(txt) {
      this.msg.push(txt);
    }
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
  cursor: pointer;
}
#grandParent {
  width: 250px;
  background-color: lightpink;
}
#grandParent > div {
  background-color: lightgreen;
}
#grandParent > div > div {
  background-color: lightskyblue;
}
</style>
运行示例 »

示例6

使用.prevent修饰符以防止单击鼠标右键时出现默认下拉列表。

<template>
  <h1>v-on Example</h1>
  <p>The '.prevent' modifier is set to prevent the drop down menu to appear when the user does a right mouse button click.</p>
  <div 
    v-on:click.right.prevent="changeColor" 
    v-bind:style="{ backgroundColor: 'hsl(' + bgColor + ',80%,80%)' }">
    <p>Press right mouse button here.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: 0
    }
  },
  methods: {
    changeColor() {
      this.bgColor += 50
    }
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
  width: 200px;
}
</style>
运行示例 »

示例7

使用.left.shift当用户在按住 Shift 键的同时单击鼠标左键时，可使用修饰符更改图片。

<template>
  <h1>v-on Example</h1>
  <p>Hold 'Shift' key and press left mouse button on the image:</p>
  <img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</template>

<script>
export default {
  data() {
    return {
      imgFish: true,
      imgUrl: 'img_fish.svg'
    }
  },
  methods: {
    changeImg() {
      this.imgFish = !this.imgFish;
      if (this.imgFish) {
        this.imgUrl = 'img_fish.svg'
      }
      else {
        this.imgUrl = 'img_tiger.svg'
      }
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
</style>
运行示例 »

相关页面

Vue教程：Vue 活动

Vue教程：Vue v-on 指令

Vue教程：Vue 方法

Vue教程：Vue 事件修饰符

JavaScript 教程：JavaScript 事件


❮ 上一节 Vue 指令参考 下一节 ❯