vue的学习（跑马灯案例、事件修饰符） 2020/2/12

最新推荐文章于 2021-12-06 09:02:56 发布
最新推荐文章于 2021-12-06 09:02:56 发布
阅读量187 收藏
点赞数 1
分类专栏： Vue框架学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43588361/article/details/104280686
版权

一、跑马灯案例

（1）代码实现

<!DOCTYPE html>
<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>
</head>
<body>
    <div id="app">
    <h4>{{msg}}</h4>
    <input type="button" value="流动" v-on:click="liu">
    <input type="button" value="停止" v-on:click="stop">
    </div>
    <script>
        var vm=new Vue({
            
            el:'#app',
            data:
            {
                msg:'流动……',
                interval:null
            },
            methods: {
                liu()
                {
                    if(this.interval!=null)return;
                    this.interval=setInterval
                    (
                    ()=>
                    {
                    var start=this.msg.substring(0,1);
                    var end=this.msg.substring(1);
                    this.msg=end+start;
                    },300
                    )
                },
                stop()
                {
                    clearInterval(this.interval);
                    this.interval=null;
                }
            },

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

（2）知识点

substring() 方法用于提取字符串中介于两个指定下标之间的字符
语法：
stringObject.substring(start,stop)
在这里插入图片描述
2.VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

3.箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

4.setInterval
在这里插入图片描述

二、事件修饰符

（1）使用 .stop 阻止冒泡
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">   
 </div>
（2）使用 .self 实现只有点击当前元素时候，才会触发事件处理函数
<div class="inner" @click="div1Handler">    
<input type="button" value="戳他" @click="btnHandler">  
 </div>
stop和self的区别

.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止其余冒泡的行为

<div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
</div>
<div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
</div>
（3）使用 .prevent 阻止默认行为
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
（4）使用 .capture 实现捕获触发事件的机制
<div class="inner" @click.capture="div1Handler">    
  <input type="button" value="戳他" @click="btnHandler">   
 </div>

说明：先执行inner的点击事件，再执行button的点击事件

（5）使用 .once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
梦想是成为工程师
关注
专栏目录
前端全套教程vue1天v-cloak的学习 跑马灯效果 事件修饰符v-model指令的学习简易的计算器vue中样式-class vue中样式 v-for v-if和v-show的使用
qq_35647460的博客
12-25 192
v-text v-cloak v-html v-bind v-on <!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=
Vue个人理解 Second Page（Vue个人理解 Second Page（v-on、事件修饰符、v-model数据双向绑定、Vue中样式的使用、使用内联样式、V-for和key属性、v-if与）
weixin_48780364的博客
10-28 159
Vue个人理解 Second Page（v-on、事件修饰符、v-model数据双向绑定、Vue中样式的使用、使用内联样式、V-for和key属性、v-if与v-show区别）
VUE绑定事件案例—文字跑马灯效果
weixin_49596018的博客
01-28 209
VUE绑定事件案例—文字跑马灯效果 要实现的效果：点击【浪起来】的时候，文字逐渐向左移动一个单位（循环）； 点击【猥琐发育】，文字停止移动。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
Vue第一天（基本指令 跑马灯案例 计算器案例 事件修饰符 双向绑定 样式）
周琛的点滴记录~
04-18 289
Vue第一天 基本指令 跑马灯案例 计算器案例 事件修饰符 双向绑定 样式 这是我第5遍学习Vue了（可能是因为感觉自己达不到游刃有余的感觉吧，也可能是以前学的不系统，要学就得学扎实了。） 创建一个实例 <script src="../../vue.min.js"></script> <div id="app"> <p>{{ titl...
Vue学习笔记01——插值表达式和事件修饰符
qq_38988704的博客
09-23 379
最近学长给我们一个关于前端Vue的教学资料，他认为非常实用，值得我们花时间去学习。我这边的项目也快完成了，省出一些时间，正好可以每天挤出一些时间学习Vue的知识！ 这是我前两天的学习笔记，正好是个day1内容，和大家分享一下！ 初始模板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
Vue事件绑定及事件绑定修饰符
lienze.tech
12-06 314
前言 这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题 于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。 微信小程序搜索：Python面试宝典 或可关注原创个人博客：https://lienze.tech 也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习 事件绑定 v-on 给元素绑
Vue.js 学习笔记 五 常用的事件修饰符
weixin_30828379的博客
09-17 160
介绍几个常用的事件修饰符 直接上代码 <div id="divApp"> <div class="divColor" v-on:click="clickDiv"> <!--正常情况下因为按钮是放在div里的，所以点击按钮的时候，后续还会触发div的click事件，这叫冒泡--> ...
vue事件修饰符01
DanielLeefu的博客
10-09 149
vue事件修饰符以及跑马灯小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
Vue系列教程（五）跑马灯效果案例
Hit the keyboard hard
02-10 1100
这篇文章使用vue来制作一个跑马灯效果，下面是实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯效果</title> </head> <body> <div id="app"...
Vue系列教程（六）事件修饰符
Hit the keyboard hard
02-11 462
在讲解事件修饰符之前，大家先请看下面的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件修饰符</title> </head> <style> .inner { ...
Vue的学习记录，心得体会-1
Gurad233的博客
06-27 2695
Vue是什么？vue是如今最火的前端框架，是一套构建用户界面的框架，让程序员减少对dom的操作，更多的精力用来关注业务逻辑上，在mvc中，主要是负责v，view(视图)这一层。为什么要学习vue呢？vue可以极大的提高我们的开发效率，让我们不再关注dom，而是去关注与业务逻辑，帮我们在工作中提升竞争力。vue是一个框架，jquery是一个库，框架和库的区别是什么？框架：有一套完整的解决方法，对于项...
vue组件-轮播（走马灯效果）
liu620151的博客
11-23 1万+
这是一个在项目中用到的一个轮播效果，前端最难的应该就是动画了，逻辑什么的相比后台来说还是比较简单的（个人觉得），先来看看效果图 拿到设计图时翻遍了所有的轮播插件，发现跟UI要的效果都相差甚远啊，没办法，只能找个相对来说适合的进行整改了，找的是一个jquery写的一个方法，因为项目用的是vue，vue里面使用jquery插件还是有点难用的（谁用谁知道），于是得想办法用自定义指令模拟touc
Vue指令学习文档
流楚丶格念的博客
03-09 4150
文章目录Vue指令插值表达式Vue基本指令Vue指令之`v-bind`的三种用法Vue指令使用综合案例Vue指令之`v-on`和`跑马灯效果`跑马灯效果跑马灯完整代码Vue指令之`v-on的缩写`和`事件修饰符`事件修饰符：Vue指令之`v-model`实现`双向数据绑定`双向数据绑定案例Vue指令之`v-for`和`key`属性1. 迭代数组案例：循环遍历普通数组案例 ：循环遍历对象数组2. 迭代对象中的属性案例：遍历对象中属性3. 迭代数字案例：迭代数字输出4.for循环中key的使用Vue指令之`v-
vscode中设置vue代码的自动提示
热门推荐
weixin_43588361的博客
02-11 1万+
vueHelper插件 和 vue 2 Snippets
vscode中默认浏览器的修改
weixin_43588361的博客
02-11 1775
1,打开vscode编辑器，点击编辑器主界面左上侧第五个小图标——‘扩展’按钮； 2,进入扩展搜索右拉框，在应用商店搜索框中输入“view in browser”会自动进行搜索 3,等待几秒钟时间，扩展就会陆续出现，在view in browser 选项右下角会出现“安装”小按钮； 点击安装即可。安装完后会提示重新加载，点击重新加载即可 4,点击左侧第一个图标按钮，回到资源管理器界面，选择你想要查...
Vue学习笔记（双向数据绑定、样式、v-for遍历、v-if和v-show显示隐藏元素） 2020/2/14
weixin_43588361的博客
02-14 651
一、v-model （1）概念 v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 注意： v-model 只能运用在 表单元素中 例如：input(radio, text, address, email…) select checkbox textarea ...
vue的学习 2020/2/11
weixin_43588361的博客
02-11 154
Vue的基本代码 <!-- 1. 导入Vue的包 --> <script src="./lib/vue-2.4.0.js"></script> <script> // 2. 创建一个Vue的实例 // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数 // 注意：我们 new 出来的这个 vm 对象，就是我们 M...
rhino grasshoper平面线生造型.gh
最新发布
10-18
【rhino@grasshoper 平面线生造型】https://www.bilibili.com/video/BV1kbpZeUE6d?vd_source=b420114c993138474d2e93d83ead77a5
Vue 框架教程：键盘事件与修饰符深度解析
本文主要介绍了Vue框架中的键盘事件、键值修饰符以及双向数据绑定的概念和用法。通过示例代码展示了如何监听键盘事件并输出提示，以及如何使用键值修饰符来精确控制事件触发条件。 一、键盘事件 在Vue中，可以使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值