基本使用
作用：绑定事件监听器（事件绑定）
<body>
<div id="app">
<!-- 直接操作数据对象的变量的形式 -->
<div>
<button v-on:click="num++">点我一下</button>
{{num}}
</div>
<!-- 缩写 -->
<div>
<button @click="num++">点我一下</button>
{{num}}
</div>
<!-- 事件处理函数调用：直接写函数名 -->
<div>
<button @click="say">点我一下</button>
{{num}}
</div>
<!-- 事件处理函数调用：常规调用 -->
<div>
<button @click="saySth('world')">点我一下</button>
{{num}}
</div>
<!-- 传递事件对象 -->
<div>
<button @click="sayEventObj('world',$event)">点我一下</button>
{{num}}
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
num: 0,
},
methods: {
// 在这写当前组件/页面需要使用的方法
// 如果事件直接使用函数名并且不写小括号，那么默认会将事件对象作为唯一参数进行传递，可以在定义函数的位置直接定义一个形参，并且在函数内可以使用该形参
say: function (obj) {
alert("我点了");
console.log(obj);
},
saySth: function (str) {
alert("hello " + str);
},
// 如果使用常规的自定义函数调用（只要写了小括号），那么如果需要使用事件对象则必须作为最后一个参数进行传递，且事件对象的名称必须是“$event”
sayEventObj: function (str, obj) {
console.log(str);
console.log(obj);
},
},
});
</script>注意：事件绑定
v-on属性表达式中切记不能直接写业务逻辑，例如@click="alert('123')"。换言之，就咋行内上是不允许使用内置函数的，必须要调用自己定义的函数，然后你可以在自定义的函数内使用内置函数。事件修饰符
含义：用来处理事件的特定行为
更多事件修饰符请参考官方文档：https://cn.vuejs.org/v2/api/#v-on
<body>
<div id="app">
<!-- 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="clickHandler('a标签',$event)">去百度</a>
<a href="javascript:;" @click="clickHandler('a标签',$event)">去百度</a>
<hr>
<!-- 停止冒泡 -->
<div class="bigwa" @click="clickHandler('大娃',$event)">
<div class="midwa" @click.stop="clickHandler('二娃',$event)">
<!-- 串联修饰符 -->
<div class="smawa" @click.stop.prevent="clickHandler('三娃',$event)"
></div>
</div>
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {},
methods: {
clickHandler: function (name, obj) {
console.log("你点了" + name, obj);
},
},
});
</script>按键修饰符
按键修饰符：按键事件
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。
更多按键修饰符请参考官方文档：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
<body>
<div id="app">
<input type="text" name="" id="" v-on:keyup.enter="enterHandler"/>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {},
methods: {
enterHandler: function () {
console.log("您按了回车键");
},
},
});
</script>自定义修饰符（了解）
按键修饰符还有一个额外的细节需要注意，Vue内置的按键修饰符是有限的，如果还需要用到其他键盘按键的修饰符，则此时我们可以通过全局对象config.keyCodes自行定义按键修饰符。
当然，在实际使用的时候也允许我们不去定义修饰符而直接去使用按键对应的数字（按键码）。
<body>
<div id="app">
<input type="text" name="" id="" v-on:keyup.enter="enterHandler"/>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {},
methods: {
enterHandler: function () {
console.log("您按了回车键");
},
},
});
</script>
Comments | NOTHING