<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. 【 Codeforces Round #425 (Div. 2) D】Misha, Grisha and Underground

    [Link]:http://codeforces.com/contest/832/problem/D [Description] 给你一棵树; 然后给你3个点 让你把这3个点和点s,t,f对应; 然后 ...

  2. 实际运用中DataSet、DataTable、DataRow点滴

    DataSet.DataTable都自带有序列化标记,但是DataRow没有, 所以如果是在CS程序中,Release版本程序DataTable才是最小的数据传输单元,如果使用DataRow则会报[未 ...

  3. 【ios开发学习 - 第二课】iOS项目文件夹结构

    文件夹结构 AppDelegate Models Macro General Helpers Vendors Sections Resources   一个合理的文件夹结构首先应该是清晰的.让人一眼看 ...

  4. sed的一些tricks

    1.sed -f xx.sed input_file 可以将一系列操作放在一个xx.sed脚本里执行 ``` #!/bin/sed -f ``` 2.在匹配字符串后面或行尾添加内容 在text后面添加 ...

  5. javescript定时器demo

    本来认为这个事情还是挺easy的不值得写上去,今天同事突然问我.我心想曾经写过,可是就是想不起函数的名称的,于是翻了一下原来的代码. function run() { interval = setIn ...

  6. Android Studio升级到0.8.1后怎样设置字体大小？

    升级到0.8.1后.打开设置字体大小页面.你会发现无论是Default还是Darcula,都不同意你改变字体的大小.事实上这个是由于这两个模式是Android Studio自带模式,所以不同意你修改, ...

  7. The ORDER BY clause is invalid in views, inline functions, derived tables, subqueries, and common table expressions, unless TOP or FOR XML is also specified.

    https://stackoverflow.com/questions/30045871/sorting-the-view-based-on-frequency-in-sql-server Just ...

  8. 懒加载js实现和优化

    1.懒加载的作用和原理 在我们展示多图片的场景下,类似淘宝或者百度图片,由于图片的数目过多,全部从服务器请求会给用户糟糕的用户体验,为了提升用户体验,我们这里使用懒加载,随着下拉逐步加载. 每个图片的 ...

  9. POJ 2323 贪心

    题意: 思路: 贪 贪 贪 如果当前的c>之前的c+s 那么之前的合适 一直贪下去就好了 //By SiriusRen #include <cstdio> #include < ...

  10. Android 如何获取Android RecyclerView滑动的距离

    如何获取 RecyclerView 的滑动距离? RecyclerView 虽然有getScrollX() 和 getScrollY(), 但是测试发现这两个函数总是返回0,太无语了.因此想到了下面几 ...