<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. 光纤收发器TR-962D/932D的面板指示灯及开关代表的含义？

    指示灯含义说明:POWER(绿色):“常亮”表明光纤收发器处于通电状态:LFP指示灯: “常亮”表明LFP功能开启,“常灭”表示LFP功能关闭:FX_LINK/ACT(绿色):“常亮”表明光纤端口连接 ...

  2. Unix操作系统的入门与基础

    http://dev2dev.cnblogs.com/archive/2005/10/10/251894.aspx Unix操作系统的入门与基础 与大家熟悉的Windows用户界面和使用习惯不同,Un ...

  3. Perl线程介绍

    Perl 中的线程 本文首先概述了线程的概念和意义,接着回顾了 Perl 语言中对线程支持的演化历史,然后通过一系列示例重点介绍了 Perl 中线程的实现,数据的共享以及线程间的同步,最后归纳并总结了 ...

  4. JQ遍历 input 并修改name属性

    1.执行完克隆行后,会出现name属相相同的问题 function addRow(){ var obj = $("tr[name='info']:last"); var objCl ...

  5. LINQ to SQL活学活用(1)：这要打破旧观念

    程序架构 如今比較经典的架构,看看以下图片. 怎样实现 在一个N层应用程序中我们怎样使用LINQ to SQL呢?这给刚刚入门的朋友的确是个难题,使用LINQ to SQL就是ORM技术,能够非常轻松 ...

  6. C# 之 继承

    继承     继承是OOP最重要的特性之中的一个.不论什么类都能够从还有一个类中继承,这就是说,这个类拥有它继承的类的全部成员. 在OOP中,被继承的类称为父类. 在C#中的对象仅能直接派生于一个基类 ...

  7. 不仅仅是MVC

    MVC Smart MV Three tier 等等

  8. java(异常体系及权限修饰符)

    java异常体系 异常的体系: 异常体系: --------| Throwable 所有错误或者异常的父类 --------------| Error(错误) --------------| Exce ...

  9. 【DRF分页】

    目录 第一种 PageNumberPagination 查第n页,每页显示n条数据 第二种 LimitOffsetPagination 在第n个位置,向后查n条数据 第三种 CursorPaginat ...

  10. 今日SGU 5.1

    SGU 100 题意: 普通的a+b #include<bits/stdc++.h> #define de(x) cout<<#x<<"="&l ...