Vue 事件绑定

最新推荐文章于 2024-11-10 15:10:09 发布

挚夕

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量106

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52549425/article/details/131542080

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

绑定监听

v-on:xxx=“fun”
@xxx=“fun”
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event

<body>
    <div id="app">
        <h1>{{title}}</h1>
        <button v-on:click="show">点我1</button>
        <button @click="show1($event,'666')">点我2</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#app",
            data: {
                title : "事件处理"
            },
            methods:{
                show(event){
                    alert("点击事件");
                    console.log(this);//vm
                },
                show1(event,msg){
                    console.log(msg);
                    console.log(event);
                }
            }
        });
    </script>
</body>

事件修饰符

prevent : 阻止事件的默认行为 event.preventDefault()
stop : 停止事件冒泡 event.stopPropagation()
once:事件只触发一次（常用）
capture:使用事件的捕获模式
self:只有event.target是当前操作的元素是才触发事件
passive:事件的默认行为立即执行，无需等待事件回调执行完毕

<body>
    <div id="app">
        <!-- <a @click="show">百度</a> -->
        <!-- 1.阻止默认事件 -->
        <a @click.prevent="show" href="https://baidu.com">百度</a>
        
        <div @click="show" style="width: 100px; height: 100px; border-color: black; background-color: aqua;">
            <!-- 2.阻止事件冒泡 -->
            <a @click.stop.prevent="show">百度</a>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                show(e){
                    //阻止 a标签默认行为
                    //e.preventDefault();
                    alert("提示");
                }   
            }
        });
    </script>
</body>

键盘事件

Vue中常用的按键别名：

回车=>enter
删除=>delete
(捕获“删除”和退格”键)
退出=>esc
空格=space
换行=>tab
上=>up
下=>down
左=>left
右=>right

<body>
    <div id="app">
    	//按下enter键释放    
        <input @keyup.enter="show">
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                show(e){
                    // if(e.keyCode !== 13) return;
                    console.log(e.target.value);
                }   
            }
        });
    </script>
</body>