Vue中的事件修饰符

最新推荐文章于 2024-05-06 16:43:20 发布

一只829

最新推荐文章于 2024-05-06 16:43:20 发布

阅读量106

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_63533863/article/details/122509301

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>初识vue</title>
   <!--引入vue-->
    <script type="text/javascript"src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height:50px;
            background-color: aqua;
        }
        .box1{
            padding: 5px;
            background-color: aqua;
        }
        .box2{
            padding: 5px; ;
            background-color: rgb(0, 255, 21);
        }
        .list{
            width: 200px;
            height: 220px;
            background-color: blanchedalmond;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <!--Vue中的事件修饰符:
1.prevent:阻止默认事件（常用）:
2.stop:阻止事件冒泡（常用)
3.once:事件只触发一次（常用):
4.capture:使用事件的指获模式;
5.self:只有event.target是当前操作的元素是才触发事件:
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
-->
    <!--准备好一个容器-->
    <div id="root">
        <h1>hello, {{name}}</h1>
        <!--阻止默认事件（常用）-->
        <a href="https://blog.csdn.net/qq_63533863?t=1"@click.prevent="showInfo">点我提示信息</a><!--.prevent阻止默认事件（事件修饰符）-->
        <!--阻止事件冒泡（常用)-->
        <div class="demo1"@click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!--事件只触发一次（常用)-->
        <div class="demo1"@click="showInfo">
            <button @click.once="showInfo">点我提示信息</button>
        </div>
        <!--使用事件的指获模式-->
        <div class="box1" @click="showMsg(1)">
            div1
            <div class="box2" @click.capture="showMsg(2)">
                div2
            </div>
        </div>
        <!--只有event.target是当前操作的元素是才触发事件-->
        <div class="demo1"@click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>
        <!--事件的默认行为立即执行，无需等待事件回调执行完毕-->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false//组织vue在启动时生成生产提示

       new Vue({
           el:'#root',//el用于制定当前vue实例为哪个容器服务，值通常为css选择字符串
           data: {
               name:'zxz'//data中用于存储数据，数据供el所制定的容器去使用，值我们暂时先携程一个对象
           },
           methods:{
           showInfo(){
               alert('hello')
               
           },
           showMsg(msg){
               console.log(msg)
           },
           demo(){
               for(let i=0;i<10000;i++){
               console.log("#")}
               console.log('累死了')
           }
        
        
        }

        
       })
  
    </script>
</body>
</html>

一只829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的事件修饰符

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>初识vue</title>  <script type="text/javascript"src="../js/vue.js"></script> <style> *{ .
复制链接

扫一扫