Vue学习笔记【4】——Vue指令之v-on
Vue指令之v-on
v-on指令介绍
直接使用指令
v-on使用简化指令
@绑定事件代码：
@事件名="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的更多相关文章
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
- Vue学习笔记之Vue的使用
0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...
随机推荐
- ubuntu Oracle SQL Developer 安装
一. 官网下载oracle 安装包 二.下载完毕后,检查你的Ubuntu是否安装了tar和alien sudo apt-get install tar sudo apt-get install ali ...
- python3.x current_question
扩散四维过程遇到的问题,暂不能解决,但先收集起来. ''' list_str=['test', None, '', 'str', ' ', 'END'] data = filter(lambda st ...
- 【dart学习】-- Dart之异步编程
一,概述 编程中的代码执行,通常分为同步与异步两种. 同步:简单说,同步就是按照代码的编写顺序,从上到下依次执行,这也是最简单的我们最常接触的一种形式.但是同步代码的缺点也显而易见,如果其中某一行或几 ...
- CDN技术详解(七)
动态内容加速服务的实现 随着Web2.0的兴起,产生了动态网页.个性化内容.电子交易数据等内容的加速,这些就涉及了动态内容加速技术. 静态内容的加速,都是对于表现层的加速,对于动态页面等内容的加速,则 ...
- 优雅的SpringMVC和Restful
一.前言 1.前段时间一直在写微信小程序的请求,终于把客户端的请求弄好了,可是服务端呢,该怎么写,纠结了半天,用servlet暂时写好了一个:http://www.cnblogs.com/JJDJJ/ ...
- tomcat设置deploy部署文件位置
参考: https://blog.csdn.net/xiaojiang167168/article/details/25330899 一.较新版本的eclipse中,Tomcat设置之后,项目部署.编 ...
- java.lang.ArrayIndexOutOfBoundsException 异常分析及解决
参考:http://blog.csdn.net/javaeeteacher/article/details/4485834 这是一个非常常见的异常,从名字上看是数组下标越界错误,解决方法就是查看为什么 ...
- 使用java读取excel数据
package excelOperation2; import java.io.File; import java.io.FileNotFoundException; import java.util ...
- Python selenium web UI之Chrome 与 Chromedriver对应版本映射表及下载地址和配置(windows, Mac OS)
浏览器及驱动下载 进行web UI 自动化时,需要安装浏览器驱动webdriver,Chrome浏览器需要安装chromedriver.exe 驱动,Firefox需安装 geckodriver.ex ...
- Dubbo入门到精通学习笔记（二十）：MyCat在MySQL主从复制的基础上实现读写分离、MyCat 集群部署(HAProxy + MyCat)、MyCat 高可用负载均衡集群Keepalived
文章目录 MyCat在MySQL主从复制的基础上实现读写分离 一.环境 二.依赖课程 三.MyCat 介绍 ( MyCat 官网:http://mycat.org.cn/ ) 四.MyCat 的安装 ...