vue指令 v-on

<strong>v-on指令</strong> 动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。

注意：如果用在普通元素上时，只能监听原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
常用的修饰符包括：

.stop - 调用 event.stopPropagation()；停止冒泡。

.prevent - 调用 event.preventDefault(); 停止监听原生事件。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.once - 触发一次。

使用手法：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

案例实操：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
   <div id="app">
       <p :style="{color:fontColor}">{{content}}</p>
       <button @click="changeColor">改变颜色</button>
       <button @click="alertMessage">弹窗输出</button>
   </div>
</body>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            content: '小码哥教育HTML5学院!',
            fontColor: 'black'
        },
        methods:{
            changeColor: function () {
                this.fontColor = this.fontColor == 'red' ?
                 'black' : 'red';
            },
            alertMessage: function () {
                alert(this.content);
            }
        }
    })
</script>
</html>

我们在上面案例中接触到了新的methods方法，通过这个方法可以直接通过 app 实例访问这些方法，或者在指令表达式中使用,方法中的 this 自动绑定为 Vue 实例。

1-7 vue指令 v-on

1-7 vue指令 v-on

vue指令 v-on

推荐阅读更多精彩内容