<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. 多路径软件常用操作（MPIO）

    一:查看存储盘的路径 1. 查看MPIO的存储盘的路径 # lspath (适用于所有存储的MPIO路径查询) # mpio_get_config -Av (适用于DS3K/DS4K的MPIO路径查询 ...

  2. VMware下最小化安装centos 7 后上网设置

    1.文件/etc/sysconfig/network-scripts/ifcfg-eno16777736 将ONBOOT=no 改为 ONBOOT=yes 保存 2.重启网卡:service netw ...

  3. 安装php-ldap模块

    php-ldap模块作用就是实现ldap认证,因此需要安装 1.安装软件包解决依赖 yum install openldapyum install openldap-devel 2.拷贝库文件 cp ...

  4. Unity 实现Log实时输出到屏幕或控制台上<一>

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/49818953 作者:car ...

  5. cogs 32. [POI1999] 位图

    32. [POI1999] 位图 ★   输入文件:bit.in   输出文件:bit.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述 ] 给定一个 n*m 的矩形位图, ...

  6. 三种连接 & DOS & SYNFLOOD & 防御

    accept的时候,三次连接是建立的. 有一种DOS攻击是SYN FLOOD,就是大量的SYN到达,但是没有ACK,无法建立起连接. 防御的方法,有多种,如下: 比如,禁止部分源地址: 到达一定阈值之 ...

  7. 11.2.0.1升级到11.2.0.4报错之中的一个：UtilSession failed: Patch 9413827

    UtilSession failed: Patch 9413827 requires component(s) that are not installed in OracleHome. These ...

  8. es64 const

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. adb logcat 使用

    之前打印log的时候,使用的是别人配置好的快捷键,结果现在快捷键没有配置,具体的log命令就不会了.今天上网查了一下,记录下来 打印的log是 android.util.Log.e("zha ...

  10. javafx style and cssFile

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...