Vue指令之v-on

v-on指令介绍

  1. 直接使用指令v-on

  2. 使用简化指令@

  3. 绑定事件代码：@事件名="methods中的方法名称"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    <!-- Vue 中提供了 v-on: 事件绑定机制 -->

    <input type="button" value="按钮" v-on:click="alert('hello')">

    <input type="button" value="按钮" @click="show">

  </div>

  <script src="./lib/vue-2.4.0.js"></script>

  <script>

    var vm = new Vue({

      el: '#app',

      data: {

        mytitle: '这是一个自己定义的title'

      },

      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法

        show: function () {

          alert('Hello')

        }

      }

    })

    //原生js代码

    /* document.getElementById('btn').onclick = function(){

      alert('Hello')

    } */

  </script>

</body>

</html>

　　

案例：跑马灯效果

实现步骤

第一步：导入Vue包

第二步：创建一个要控制的区域

第三步：定义一个vue实例

第四步：编写具体代码

代码分析

 一、让文字动起来

  1.给（唱起来~）按钮绑定一个点击事件 指令：v-on  @

  2.在按钮的事件处理函数中，写相关的业务逻辑代码：

  拿到msg字符串，然后对字符串进行操作，substring

  来进行对字符串的截取操作把第一个字符串截取，放到最后。

  3.为了实现点击一下按钮，自动截取的功能，需要把2中的代码

  放到一个定时器中去。

 二、让文字停止

  思路：利用setInterval返回的intervalID来停止定时器。但是

  由于外部的函数不能获取到setInterval函数中的数据，所以我们要把

  IntervalID的值获取后放入到data中。

  1.在data中定义一个变量来存放intervalID，初始默认值为null。

  2.为（停！）按钮绑定一个点击事件 指令：v-on  @

  遇到的问题：每点一次唱起来按钮，都会开启一个定时器，我们要在开

  启定时器之前做一个判断，如果intervalId不为null，说明已经开启了

  一个定时器，不必再新开启，如果intervalId为null，则开启定时器。

  3.判断intervalID是否为null时出现的问题：

      如果只写if(this.intervalId != null) return; 这一句，

  这种方法点击完唱起来按钮后再点击停止按钮会出现一个问题——唱起来按钮失效了，

  点击它文字不会再动起来，因为点击按钮后，虽然定时器被停止了，但是intervalId

  没有初始化回null，每次都会进入这个if语句，永远不能再开启定时器，因此，每次

   点击停止按钮后，都要吧this.intervalId重新赋值为null！

三、注意：

  ①在vm实例中，想要获取data上的数据，

  或者调用methods中的方法，必须通过this.属性名或this.方法名来访问，

  这里的this，就表示我们new出来的VM实例。

  ②VM实例会自动监听其data中所有数据的改变，一旦发生变化，立即更新，

  同步到页面中。程序员只需要关心数据，不需要考虑如何重新渲染页面。

代码实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 第一步：导入Vue包 -->

    <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

    <!-- 第二步：创建一个要控制的区域 -->

    <div id="app">

        <!-- 第四步：编写具体代码 -->

        <h4>{{ msg }}</h4>

        <input type="button" value="唱起来~" @click="sing">

        <input type="button" value="停！" @click="stop">

    </div>

    <!-- 第三步：定义一个vue实例-->

    <script>

      var vm = new Vue({

        el:'#app',

        data:{

            msg:'大山滴子孙~呦！~~~~~爱太阳~咯~~~~',

            intervalId:null //在data上定义intervalID

        },

        methods:{

            sing(){//es6写法

                if(this.intervalId != null) return;

                // 使用es6语法中的箭头函数来写

                this.intervalId = setInterval(() => {

                //获取字符串开头的第一个字符

                var start = this.msg.substring(0,1)

                //获取字符串除开头第一个字符外的其他字符

                var end = this.msg.substring(1)

                //重新拼接得到新的字符串，并赋值给this.msg

                this.msg = end+start

                },400)

                // 原来的写法

                // var _this = this

                // setInterval(function(){

                // //获取字符串开头的第一个字符

                // var start = this.msg.substring(0,1)

                // //获取字符串除开头第一个字符外的其他字符

                // var end = this.msg.substring(1)

                // //重新拼接得到新的字符串，并赋值给this.msg

                // this.msg = end+start

                // },400)

            },

            stop(){//停止定时器

                clearInterval(this.intervalId)

                this.intervalId = null

            }

        }

    })

    </script>

</body>

</html>

　　

Vue学习笔记【4】——Vue指令之v-on的更多相关文章

  1. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  2. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  3. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  4. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  5. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  6. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  7. Vue学习笔记之Vue知识点补充

    0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...

  8. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  9. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  10. Vue学习笔记之Vue的使用

    0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...

随机推荐

  1. 【和孩子一起学编程】 python笔记--第二天

    第六章 GUI:用户图形界面(graphical user interface) 安装easygui:打开cmd命令窗口,输入:pip install easygui 利用msgbox()函数创建一个 ...

  2. mui使用总结

    mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的信息,请访问mui官网 DOM结构 关于mui ...

  3. UNP学习第九章 基本名字与地址转换

    之前都用数值地址来表示主机(206.6.226.33),用数值端口号来标识服务器. 然而,我们应该使用名字而不是数值:名字比较容易记,数值地址可以改变但名字保持不变. 随着往IPv6上转移,数值地址变 ...

  4. 【Dart学习】--Dart之字符串(String)的相关方法总结

    字符串定义使用单引号或双引号 String a = "abcdefg"; String b = '; 创建多行字符串,保留内在格式使用三个单引号或三个双引号 创建多行字符串,保留内 ...

  5. 工程师技术(四)：配置SMB文件夹共享、多用户Samba挂载、普通NFS共享的实现、安全NFS共享的实现

    一.配置SMB文件夹共享 目标: 本例要求在虚拟机 server0 上发布两个共享文件夹,具体要求如下: 1> 此服务器必须是 STAFF 工作组的一个成员   2> 发布目录 /comm ...

  6. textAppearance的属性设置

    android:textAppearance="?android:attr/textAppearanceSmall" android:textAppearance="?a ...

  7. jenkins安装-配置

    jenkins安装-配置 注意: jenkins访问 用chrome浏览器 安装包下载:http://pkg.jenkins-ci.org/redhat/ (使用2.92版本的) 安装jdk: 1.8 ...

  8. 探索Redis设计与实现3：Redis内部数据结构详解——sds

    本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...

  9. apache的tomcat负载均衡和集群配置 "

    略看了一下,感觉太复杂,要配置的东西太多,因此在这里写出一种更简洁的方法. 要集群tomcat主要是解决SESSION共享的问题,因此我利用memcached来保存session,多台TOMCAT服务 ...

  10. 解决ios下部分手机在input设置为readonly属性时，依然显示光标

    解决ios下部分手机在input设置为readonly属性时,依然显示光标 在出现如上所说的问题是尝试给input 加上  onfocus="this.blur()"  方法 添加 ...