vue事件修饰符01

最新推荐文章于 2022-10-10 19:37:58 发布

DanielLeefu

最新推荐文章于 2022-10-10 19:37:58 发布

阅读量114

点赞数

分类专栏： vue 代码文章标签： vue

本文链接：https://blog.csdn.net/qq_41579115/article/details/102455238

版权

代码同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

vue事件修饰符以及跑马灯小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
    
        .inner{
            width:500px;
            height:500px;
            background:red;
        }
    </style>
 


        
   
</head>
<body>

    <!-- //vue 实例所控制的元素区域。就是我们的 v -->
    <div class="app"> 
        <h2> {{msg}} </h2>
        <!-- 使用 v-cloak 能够解决 插值表达式的闪烁问题 -->
        <p v-cloak>  +++++{{ msg }}+++++++ </p>
        <h2 v-text="msg">=================</h2>
        <p v-html="msg1"> sdf </p>
        <!-- v-text 会覆盖元素中原本的内容。插值表达式只会替换自己的这个占位符，不会把整个页面的内容清空 -->
         <!-- //v-on：绑定事件函数 缩写  @ -->
        <input type="button" value="开始" @click = "start_on"> 
        <input type="button" value="停止" @click = "tingzhi">
        <h2> {{message}} </h2>
    </div>
    <script>
        let vm = new Vue({   // new 出来的vm 对象，就是我们  MVVM 中的VM 的调度者
            el : '.app',   // 当前我们new  的这个vue 实例，要控制页面上的哪一个区域
            data:{  //MVVM中的M,来保存页面数据
                msg : '这是一个实例',
                msg1:121212,
                message : '猥琐发育，别浪！',
                timer : null
            },
            methods : {
                
                start_on: function(){
                        let _this = this;  //解决this指向问题
                        if(this.timer != null) return;  //判断有没有定时器，有的话，将停止不再启动定时器
                        this.timer = setInterval(function(){  //也可以用箭头函数来改变this指向
                                let prev =_this.message.substring(0,1);
                                    let end =_this.message.substring(1);
                                    _this.message = end + prev;
                            },300)
                //会出现点击多次定时器，速度越来越快的原因
                },
                tingzhi:function(){
                        clearInterval(this.timer); 
                        // 会出现点击多次定时器停不了的原因
                        this.timer = null;//当第一次点击执行停止后，timer虽然被清除了，但是并不为空，所有后面的程序执行不了，要在清除定时器的时候将timer页变为空
                }
            }   
        });
    



    
        

    </script>

    <div id="app1">
        <!-- // 事件修饰符

 // 使用  .stop 阻止事件冒泡 -->

        <!-- <div class="inner" @click = "divHeader">
            <input type="button" value="点击" @click.stop = "btnHandler">
        </div> -->
<!-- 使用  .prevent 阻止默认行为  (阻止a跳转)-->
<a href="http://www.baidu.com" @click.prevent = "linkHeader">有问题，去百度</a>

<!-- 使用  .once 只触发一次事件初六函数 -->
<a href="http://www.baidu.com" @click.prevent.once = "linkHeader">去百度</a>


<!-- 使用  .capture 实现捕获触发事件的机制 -->
<div class="inner" @click.capture = "divHeader">
    <input type="button" value="搓他" @click = "btnHandler">
</div>

`
<!-- 使用  .self 实现只有点击当前元素，才会触发事件处理函数 -->
<!-- <div class="inner" @click.self= "divHeader">
        <input type="button" value="搓他" @click = "btnHandler">
    </div> -->
    
<!-- stop 和 .self 的区别 -->

<!-- .self只会阻止自己身上冒泡行为的触发，不会真正阻止冒泡的行为  -->

 </div>


    <script>
        let vmm = new Vue({
            el:'#app1',
            data:{
                    msg:"lalal"
            },
            methods : {
                divHeader(){
                    console.log('这是div');
                },
                btnHandler(){
                    console.log('这是input');
                },
                linkHeader(){
                    console.log('这是a')
                }

            }

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

DanielLeefu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue事件修饰符01

vue事件修饰符以及跑马灯小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫