<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: / @ 事件绑定 定时器运用的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. VUE基础插值表达式

    vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...

  3. vue 基础重要组件 模板指令 事件绑定

    组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...

  4. Vue之变量、数据绑定、事件绑定使用举例

    vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  5. react 入坑笔记（四） - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  6. vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss

    vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...

  7. jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  8. jquery 深入学习笔记之中的一个 （事件绑定）

    [jquery 事件绑定] 1.加入元素事件绑定 (1) 加入事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 加入事件为未来 ...

  9. vue 笔记，ref 及 $event 事件对象

    本文仅用作简单记录 ref : 在标签上添加 ref = “name” ,表示获取当前元素节点 <input type="text" ref="info" ...

随机推荐

  1. 手把手教你如何在Ubuntu系统中安装Pycharm

    前几天带大家一起安装了Ubuntu14.04系统,没来得及上车的伙伴可以戳这篇文章:手把手教你在VMware虚拟机中安装Ubuntu14.04系统.今天小编带大家一起在Ubuntu14.04中安装Py ...

  2. Vue总结(一)

    vue总结 构建用户界面的渐进式框架 渐进式:用到什么功能即可使用转么的框架子模块. 两个核心点 向应的数据绑定 当时图发生改变->自动跟新视图,利用Object.defindProperty中 ...

  3. 【js基础】判断是否是合法邮箱地址（正则表达式的应用）

    2019-01-21 09:11:21 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  4. 紫书 例题 9-13 UVa 1220 （最大独立子集）

    这里的状态定义的非常的巧妙,d(i, 1)表示以i为根节点且选i的子树的最大独立子集 d(i, 0)表示以i为根节点且不选i的子树的最大独立子集 d(i, 1) = sum{ d(v, 0) | v是 ...

  5. css————获取样式的各种方法

    元素.style.样式:只能获取行间样式,css中的样式不能获取,且获得的内容是字符串. 元素.offsetWidth:可以获取无论css样式还是行间样式,但只能获得width,height,pare ...

  6. C++11 volatile 类型

    volatile作用: 作为指令关键字,确保本条指令不会受到编译器的优化而省略,而且要求每次直接读值. 定义: volatile int nTest; volatile关键字是一种类型修饰符,用它声明 ...

  7. Unity容器实现自动注册

    如何创建Unity容器? 首先NuGet搜索Unity, 该示例中使用的版本为4.0.1 新建控制台程序 示例中使用常规操作, 创建一个IPay接口, 分别有两个实现类: ApplePay.Huawe ...

  8. EditPlus,UltraEdit等编辑器列选择的方法

    在使用富文本编辑器的时候,通常模式是行选择状态,由于今天想使用EditPlus列选择状态, 于是通过在网上收集的资料,总结出相关富文本编辑器的列选择的方法. EditPlus  1)菜单:编辑 -&g ...

  9. CF 246 div2 D Prefixes and Suffixes (全部前缀的出现次数)

    题目链接:http://codeforces.com/contest/432/problem/D 题意:对一个长度不超过10^5的字符串.按长度输出和后缀全然匹配的的前缀的长度,及该前缀在整个串中出现 ...

  10. LinkedIn Cubert 实践指南

    · LinkedIn Cubert安装指南 · Understanding Cubert Concepts(一)Partitioned Blocks · Understanding Cubert Co ...