vue学习——v-on实例

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

v-on

  • 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

  • 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

  • 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个
    $event属性：v-on:click="handle('ok', $event)"。

  • 从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

vue的方法是定义在method里的。

点击方法

<button v-on:click="onClick">点我</button>

缩写

<button @click="onClick">点我</button>

对象语法 (2.4.0+)

 <button v-on="{ mousedown: mouseDown, mouseup: mouseUp }">点我咯</button>

阻止默认行为，没有表达式——阻止表单默认提交行为

<form @keyup="onKeyUp" @submit.prevent="onSubmit">
            <input type="text">
            <button type="submit">提交</button>
        </form>

methods:

methods:{
                onClick: function(){
                    console.log("you clicked！")
                },
                mouseDown: function(){
                    console.log("you mouseDown！")
                },
                mouseUp: function(){
                    console.log("you mouseUp")
                },
                onEnter: function(){
                    console.log("onEnter");
                },
                onOut:function(){
                    console.log("onOut");
                },
                onSubmit:function(){
                    console.log("submited");
                },
                onKeyUp:function(e){
                    console.log("keyUp : "+e.keyCode);
                },
            },

修饰符：

  • .stop - 调用 event.stopPropagation()。

  • .prevent - 调用 event.preventDefault()。

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

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

  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

  • .native - 监听组件根元素的原生事件。

  • .once - 只触发一次回调。

  • .left - (2.2.0) 只当点击鼠标左键时触发。

  • .right - (2.2.0) 只当点击鼠标右键时触发。

  • .middle - (2.2.0) 只当点击鼠标中键时触发。

  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

更多参照：v-on

完整demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue学习 v-on</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div >
        <!-- 点击方法 -->
        <button v-on:click="onClick">点我</button>
        <!-- 缩写 -->
        <button @click="onClick">点我</button>
        <!-- 对象语法 (2.4.0+) -->
        <button v-on="{ mousedown: mouseDown, mouseup: mouseUp }">点我咯</button>
        <!-- 阻止默认行为，没有表达式 阻止表单默认提交行为 -->
        <form @keyup="onKeyUp" @submit.prevent="onSubmit">
            <input type="text">
            <button type="submit">提交</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
        var app = new Vue(
        {
            el: "#app",
            data:{
            },
            methods:{
                onClick: function(){
                    console.log("you clicked！")
                },
                mouseDown: function(){
                    console.log("you mouseDown！")
                },
                mouseUp: function(){
                    console.log("you mouseUp")
                },
                onEnter: function(){
                    console.log("onEnter");
                },
                onOut:function(){
                    console.log("onOut");
                },
                onSubmit:function(){
                    console.log("submited");
                },
                onKeyUp:function(e){
                    console.log("keyUp : "+e.keyCode);
                },
            },
        })
    </script>
</body>
</html>

以上是 vue学习——v-on实例 的全部内容， 来源链接： utcz.com/z/375082.html

回到顶部