v-on 绑定事件事件修饰符

最新推荐文章于 2022-07-14 17:24:35 发布

SpringYoungYu

最新推荐文章于 2022-07-14 17:24:35 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/qq_44917015/article/details/116002500

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            outline: 1px solid;
            /* border: 1px solid; */
        }
    </style>
</head>
<body>
    <!-- v层 -->
    <div id="app">
        <h3>{{name}}</h3>
        <button type="submit" v-on:click='submithandler("事件参数",$event)'>提交</button>
        <a href="http://163.com" @click.prevent='submithandler'>跳转</a>
        <a href="http://163.com" @click.prevent='btnFunc'>跳转2</a>
        <!-- 按键修饰符 -->
        <!-- key    keyCode -->
        <input type="text" @keydown.ycy="btnFunc">
        <input type="text" @keydown.13="btnFunc">
        <input type="text" @keydown.space="btnFunc">
        <input type="text" @keydown.enter="btnFunc">
        <input type="text" @keydown.q="btnFunc">
    </div>
    <script src="./vue.js"></script>
    <!-- 
        v-on
        绑定事件监听 表达式可以是一个方法或者一个内联语句
        在普通的html元素上 只能监听原生 dom事件
        用在自定义组件上时 可以监听子组件触发的自定义事件

        事件对象的接收：
            如果没有传参数 默认第一个参数接收
            如果传入了参数 那么需要传递$event 在函数体需要使用相应形参接收
        m 数据模型层 v 视图层 vm 监听m层和v层

        使用object.defineProperty 进行数据劫持 setter 方法 
        一种发布订阅模式 去通知他改变试图

        按键修饰符
        prevent 阻止默认事件
        
     -->
    <script>
        // 自定义按键修饰符
        Vue.config.keyCodes.ycy = 13;
        // vm层
        const vm = new Vue({
        el:'#app',//vue指定挂载的区域 vue编译的范围
        // m层
        data:{//数据层 储存数据 相当于m层 数据模型 model    
            name:'ycy',
            // btnFunc:function(){
            //     console.log('按钮方法')
            // }
            btnFunc(e){
                if( e.type == 'keydown' ) console.log('enter',e)
                else  console.log('按钮方法',e)
            }
        },
        methods: {//函数方法
            submithandler(item,e){
                console.log('submit',item || {},e || {},e ?? '未定义')
                console.log(Vue)
                this.name = 'change'
            }
        },
    });
    </script>
</body>
</html>