从零开始学Vue

最新推荐文章于 2024-08-19 13:55:31 发布

ALI_SAf

最新推荐文章于 2024-08-19 13:55:31 发布

阅读量148

点赞数

分类专栏： vue 文章标签： html vue

本文链接：https://blog.csdn.net/ALI_SAf/article/details/120524620

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue基本的事件

v-bind事件vue提供的属性绑定机制，可以简写为:
v-cloak事件防止闪烁
v-text事件只显示data内定义的内容
v-html事件显示北html渲染后的内容
v-on事件vue提供的时间绑定机制，可以简写为@（v-mouseover:click 等价于v-on:click等价于@click）
=>可以解决this指向问题

事件修饰符

.stop阻止冒泡事件的产生（阻止所有冒泡）
.prevent阻止默认行为的发生
.capture捕获出发事件的机制
.self只有点击当前元素才能处理函数（阻止当前元素冒泡）
.once只触发一次处理函数

复习：

alter事件弹出弹框
substring字符串截取

案例：跑马灯

分析

给button绑定点击事件
在按钮的时间处理函数中，写相关逻辑代码(首先获取msg内的字符串，然后调用substring方法截取字符串，将第一个截取放置末尾)
为了实现点击后自动截取功能，需要将2中的步骤防止一个定时器中

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>//引入Vue包
</head>
<body>
    <!--创建一个要控制的区域-->
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
        <h4>{{msg}}</h4>
    </div>
    <script>
    var vm = new Vue({//定义变量
        el:'#app',
     data:{
        msg:'猥琐发育，别浪~~！',
        intervalId:null
     },
    methods:{
        lang(){
            // console.log(this.msg)
            // var _this=this//this指向
            if(this.intervalId !=null) return;
            this.intervalId=  setInterval(()=> {//setInterval实现定时调用的函数
            var start =  this.msg.substring(0,1)//截取
            var end = this.msg.substring(1)
            this.msg = end + start
           },400)
        },
        stop(){
            clearInterval(this.intervalId)
            this.intervalId=null;
        }
    }
})
    </script>
</body>
</html>