VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用
<body>
<!-- 2. 创建一个要控制的区域 -->
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop"> <!-- 插值表达式 -->
<h4>{{ msg }}</h4> </div> <script>
// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法
// 必须通过 this.数据属性名 或 this.方法名 来进行访问
// 这里的this，就表示 我们 new 出来的 VM 实例对象
var vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育，别浪~~！',
intervalId: null // 在data上定义 定时器Id
},
methods: {
lang() { if (this.intervalId != null) return;
// 判断定时器有没有在运行，在运行 则直接返回。避免重复点击导致多个定时器同时生效。
// this.intervalId != null 表示定时器里的内容不是空值，所以是在运行。 this.intervalId = setInterval(() => { // 注意箭头函数用法和特点，ES6再复习一下。
var start = this.msg.substring(0, 1)
// 获取到 后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end + start
}, 400) // 注意： VM实例，会监听自己身上 data 中所有数据的改变，
// 只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；
// 【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
},
stop() { // 停止定时器
clearInterval(this.intervalId) this.intervalId = null;
// 每当清除了定时器之后，需要重新把 intervalId 置为 null
// 否则下一次点击开启定时器时，定时器的值不是null，就无法运行新一轮定时器。 // 疑问： 清除了定时器之后， 定时器的值是？？？
}
}
})
</script>
</body>
VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- VUE基础插值表达式
vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...
- vue 基础重要组件 模板指令 事件绑定
组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...
- Vue之变量、数据绑定、事件绑定使用举例
vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- react 入坑笔记（四） - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
- vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss
vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...
- jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- jquery 深入学习笔记之中的一个 （事件绑定）
[jquery 事件绑定] 1.加入元素事件绑定 (1) 加入事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 加入事件为未来 ...
- vue 笔记，ref 及 $event 事件对象
本文仅用作简单记录 ref : 在标签上添加 ref = “name” ,表示获取当前元素节点 <input type="text" ref="info" ...
随机推荐
- 分享一个js对象开发组件写法
var TextCount = (function(){ //私有方法,外面将访问不到 var _bind = function(that){ that.input.on('keyup',functi ...
- WebAssembly学习(五)：AssemblyScript - Hello World
一.项目创建 1.创建AssemblyScript根目录 mkdir AssemblyScript 2.安装AssemblyScript开发依赖 cnpm install --save-dev Ass ...
- 便捷编程－Xcode常用第三方插件 (随时更新)
Xcode工具插件 1.XAlign 让Xcode编辑器中的代码以多种方式瞬间对齐 地址:https://github.com/qfish/XAlign 2.VVDocumenter-Xcode 在X ...
- 关于Shiro的退出请求是如何关联到登录请求的思考
一.结论 先给出结论,是因为本身是很简单的道理.假设我们没有使用任何认证授权的框架,就简单的使用Cookie和HttpSession,那么用户登录后的每一个请求是如何关联上这个用户的呢?答案很简单,由 ...
- udacity android 学习笔记: lesson 4 part a
udacity android 学习笔记: lesson 4 part a 作者:干货店打杂的 /titer1 /Archimedes 出处:https://code.csdn.net/titer1 ...
- 彻查网络局部网段内Ping时断时续的问题
前两天须要安装2台server,结果前期一直有问题的网络又来了,明明vlan内能ping通,可是与vlan外却ping不同. 这个现象非常像是arp病毒,于是周末的时间我们就进行了一次彻底的排查,一定 ...
- XML与JSON的区别?各自有哪些优缺点?
JSON和XML都是数据传输格式,它们有哪些区别,又都有些什么优缺点呢?零度带领大家来分析分析. 一.先来看看两者的定义 1.XML的定义 扩展标记语言 (Extensible Markup Lang ...
- BZOJ 1231 状压DP
思路: f[i][j] i表示集合的组成 j表示选最后一个数 f[i][j]表示能选的方案数 f[i|(1<< k)][k]+=f[i][j]; k不属于i j属于i且符合题意 最后Σf[ ...
- javafx KeyCombination
import javafx.application.Application; import javafx.application.Platform; import javafx.event.Actio ...
- 分享一下事件监听addEventListener----attachEvent的用法
来自:http://www.cnblogs.com/wkylin/archive/2011/10/09/2203161.html 事件监听addEventListener----attachEvent ...