<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. [Chromium文档转载，第002章]Mojo C++ Bindings API

    Mojo C++ Bindings API This document is a subset of the Mojo documentation. Contents Overview Getting ...

  2. C++ lambda表达式 （一）

    为什么要lambda函数 匿名函数是许多编程语言都支持的概念,有函数体,没有函数名.1958年,lisp首先采用匿名函数,匿名函数最常用的是作为回调函数的值.正因为有这样的需求,c++引入了lambd ...

  3. github连接报"ssh: connect to host github.com port 22: Connection timed out"错误

    1. 异常 在连接github时,执行"ssh -T git@github.com" 命令时,出现 ssh: connect to host github.com port 22: ...

  4. Tomcat 的三种高级运行模式

    Tomcat 的连接器有两种:HTTP和AJP AJP(Apache JServ Protocol):AJP是面向数据包的基于TCP/IP的协议,它在Apache和Tomcat的实例之间提供了一个专用 ...

  5. JavaScript定时调用函数(SetInterval与setTimeout)

    setTimeout和setInterval的语法同样.它们都有两个參数.一个是将要运行的代码字符串.另一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将运行那段代码. 只是这两个函数还是有差别的 ...

  6. 矩阵乘法2（codevs3147）

    题目描写叙述 Description 给出两个n*n的矩阵.m次询问它们的积中给定子矩阵的数值和. 输入描写叙述 Input Description 第一行两个正整数n,m. 接下来n行,每行n个非负 ...

  7. java基本的语法

     Java语言发展史 课程大纲: Java语言发展史: 1.sun公司1995年推出,2009年Oracle公司收购sun: 下载: 1.到Oracle官网下载 Java体系与特点 课程大纲: J ...

  8. vue -- 脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  9. 18.链表管理内存实现c语言自动释放内存

    运行截图: 创建记录分配的内存地址大小和地址的结构体 struct MEM { void *p; int size; }; 创建管理内存结构体的链表 typedef struct LinkNode { ...

  10. Spark MLlib协同过滤算法

    算法说明 协同过滤(Collaborative Filtering,简称CF,WIKI上的定义是:简单来说是利用某个兴趣相投.拥有共同经验之群体的喜好来推荐感兴趣的资讯给使用者,个人透过合作的机制给予 ...