vue学习笔记（一）---- vue指令（浪起来~~~哦耶 的案例）
案例实现分析:
把第一个字符追加到最后一个字符身上去
基本结构:
<body>
<div id="app">
<input type="button" value="继续浪" @click="lang()"/>
<input type="button" value="别浪了" @click="stop()"/>
<h1>{{msg}}</h1>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'浪起来吧~~~~哦耶'
},
methods: {
lang(){
},
stop(){
}
}
})
</script>
</body>
添加方法:
- 先截取到第一个字符,然后把这个字符放到结尾
截取字符串的方法
subsring()
substring()的使用如下:
var vm = new Vue({
el: '#app',
data: {
msg:'浪起来吧~~~~哦耶'
},
methods: {
add(){
// console.log(this.msg.substring(开始的索引，结束的索引(不包含结束的索引)))
// 想要获取'浪'
var num = this.msg.substring(0,1)
console.log('获取浪' + '-------' + num)
//想要获取'吧'
var num2 = this.msg.substring(3,4)
console.log('获取吧'+' ------- '+ num2)
//想要获取'浪起来'
var num3 = this.msg.substring(0,3)
console.log('获取浪起来'+ ' ------- ' + num3)
//substring(0)要是只传入一个参数0或者什么都不传的话，截取的就是全部字符串
var num4 = this.msg.substring()
console.log('获取全部' + ' ------- ' + num4)
var num5 = this.msg.substring(0)
console.log('获取全部' + ' ------- ' + num5)
//substring(1)要是只传入一个参数1的话，截取的就是出第一个字符以外的全部字符串
var num6 = this.msg.substring(1)
console.log('获取除第一个字符外的全部字符串'+'-------'+num6)
}
}
})
来吧展示:
获取第一个字符与除第一个字符的全部字符进行尾和头的拼接
var vm = new Vue({
el: '#app',
data: {
msg:'浪起来吧~~~~哦耶'
},
methods: {
lang(){
var header = this.msg.substring(0,1)
var body = this.msg.substring(1)
this.msg = body + header
console.log(this.msg)
}
}
})
不可能每次都由我们自动去点击它才让它跑起来,所以需要添加定时器
methods:{
lang(){
setIntervar(function(){
var header = this.msg.substring(0,1)
var body = this.msg.substring(1)
this.msg = body + header
console.log(this.msg)
},400)
}
}
报错原因:
定时器中的this指向的使window，所以需要转换一下this的指向
解决方法:
使用箭头函数，箭头函数的特性：内部的this永远指向外部的this,所以this.msg也是指向vm实例的
lang(){
setInterval(() => {
var header = this.msg.substring(0,1)
var body = this.msg.substring(1)
this.msg = body + header
console.log(this.msg)
}, 400)
}
来吧展示:
给 别浪了 绑定停止事件stop()
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'浪起来吧~~~~哦耶',
intervalId:null
},
methods: {
lang(){
// var intervalId = setInterval(() => {
this.intervalId = setInterval(() => {
var header = this.msg.substring(0,1)
var body = this.msg.substring(1)
this.msg = body + header
console.log(this.msg)
}, 400)
},
stop(){
clearInterval(this.intervalId)
}
}
})
</script>
解释:
clearInterval(this.intervalId)
这里应该给setInterval用变量接收一下
var intervalId = setInterval(()=>{})
然后把要把intervalId拿过来
但是stop()与lang()属于两个不同的函数，代表着两个不同的作用域
在clearInterval()中拿不到intervalId
不能写成clearInterval(intervalId)
注意：只要属于vm就能拿到this,data中的数据就都能拿到，只要能访问到this,那么this上的数据就能拿到
所以说把interval挂载到data身上，也就是在data中再添加一个变量
data:{ interval:null }
那么claeraInterval()就能拿到
就可以通过this.intervalId清除定时器
注意:
虽然实现了浪起来和别浪了的事件,但是有个bug在于:
每当点击浪起来的时候,就会重新开启触发新的定时器,会导致速度加快,并且点击别浪了也不会停止
解决办法:
办法一:在执行lang()方法的时候,先清除定时器
lang(){
clearInterval(this.intervalId)
this.intervalId = setInterval(() => {
var header = this.msg.substring(0,1)
var body = this.msg.substring(1)
this.msg = body + header
console.log(this.msg)
}, 400)
},
注意(bug):
当频繁一直点击“继续浪”的时候，就会卡住停止，因为400毫秒就会执行下一次定时器，一直在点击的时候就会清定时器
最佳方式:
lang(){
//如果定时器的id不等于null，就表示有定时器在执行了，直接退出就不会再开启第二个定时器
// if(this.intervalId !== null){
// return intervalId
// }
// 简写成
//if(this.intervalId !== null) return
if(this.intervalId !== null) return
this.intervalId = setInterval(() => {
var header = this.msg.substring(0,1)
var body = this.msg.substring(1)
this.msg = body + header
console.log(this.msg)
}, 400)
注意(bug):
当点击“别浪了以后”，再次点击“继续浪”没有再次执行，所以需要在stop()方法在清除定时器以后再重置定时器
stop(){
//如果不清除定时器的话，那么点击“别浪了”没有反应，不会停止
clearInterval(this.intervalId)
this.intervalId = null
//每当清除定时器之后，为了保证下次能够正常开启定时器，所以，需要把intervalIdcID重置为null
}
浪起来~~~哦耶的代码整合
<!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>浪起来~~哦耶</title>
</head>
<body>
<div id="app">
<input type="button" value="继续浪" @click="lang()"/>
<input type="button" value="别浪了" @click="stop()"/>
<h1>{{msg}}</h1>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'浪起来吧~~~~哦耶',
intervalId:null
},
methods: {
lang(){
clearInterval(this.intervalId)
if(this.intervalId !== null) return
this.intervalId = setInterval(() => {
var header = this.msg.substring(0,1)
var body = this.msg.substring(1)
this.msg = body + header
console.log(this.msg)
}, 400)
},
stop(){
clearInterval(this.intervalId)
this.intervalId = null
}
}
})
</script>
</body>
</html>
来吧展示:
vue学习笔记（一）---- vue指令（浪起来~~~哦耶 的案例）的更多相关文章
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
- Vue学习笔记之Vue的使用
0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...
随机推荐
- ES6 学习笔记（十一）迭代器和生成器函数
1.前言 JavaScript提供了许多的方法来获取数组或者对象中的某个元素或者属性(迭代).从以前的for循环到之后的filter.map再到后来的for...in和for...of的迭代机制.只要 ...
- Codeforces Round #812 (Div. 2) D. Tournament Countdown（交互题）
记录一下第一次写交互题 题目大意:一共有1<<n个人参加一场竞标赛,需要你通过比较两人的胜场来判断谁晋级,最终获得第一名 最多1/3*2^(n+1)次询问,每次询问query(a,b),如 ...
- 1.docker的基本使用
1.简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.容器是完 ...
- Postman使用指导
1. 下载好Postman,不用注册账号,直接离线使用 2. 软件的配置修改: 2.1关闭SSL认证 2.2关闭系统代理 2.3上传证书填写hosthost为服务器地址和端口:crt和key可以通过国 ...
- 2.3 Goland快捷键
1 新建 Alt + Insert Alt + Enter 2 移动 Alt + 上下箭头:以函数为单位移动 Ctrl + G : 定位到行 Ctrl + W :可以选择单词继而语句继而行继而函数Ct ...
- Java新特性（2）：Java 10以后
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 虽然到目前为止Java的版本更新还没有什么惊天动地的改变,但总是会冒出一些有趣的小玩意.前面列举了Java9和Java10的一些特色,现在接着来 ...
- ORCL 时间
一.计算时间差 两个Date类型字段:START_DATE,END_DATE,计算这两个日期的时间差(分别以天,小时,分钟,秒,毫秒): 天: ROUND(TO_NUMBER(END_DATE - S ...
- 程序员面试干货：漫谈计算机网络：数据链路层 ----- 数据链路路在何方? --从点对点数据传输 到 "广泛撒网,重点捕获"的局域网
面试答不上?计网很枯燥? 听说你学习 计网 每次记了都会忘? 不妨抽时间和我一起多学学它 深入浅出,用你的空闲时间来探索计算机网络的硬核知识! 博主的上篇连载文章<初识图像处理技术> 图像 ...
- 【微服务架构设计实施】第一部分：架构篇-1：微服务架构与Spring Cloud介绍
〇.概述 一.微服务架构与Spring Cloud (一)概念 不同说法:细粒度的.清凉组件化的小型SOA(面向服务架构) 统一说法:小型应用程序(服务组件),使用轻量级设计方法和HTTP协议通信 理 ...
- 【Java框架】SSM-Spring总结：IOC、DI、AOP、JDBC、事务管理、实际案例
〇.概述 1.常用资料 2.组成 一.控制反转与依赖注入 (一)Spring概述 1.介绍 以IOC和AOP为内核的框架 通过IOC实现控制,使用spring创建对象,与DI描述同一个概念 DI是对象 ...