5.Vue指令：v-on

最新推荐文章于 2020-11-03 14:59:51 发布

高新园养鸡场

最新推荐文章于 2020-11-03 14:59:51 发布

阅读量120

点赞数

分类专栏： Vue 2.0 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/zyc3545/article/details/108161860

版权

Vue 2.0 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

用法

提供事件绑定

为按钮绑定点击事件的写法：

//js
<input type="button" value="请点击"/>
document.getElementById("btn").onclick = function(){
    alert("点击成功");
}

//jquery
<input type="button" value="请点击"/>
$("#btn").on("click",function(){
    alert("点击成功");
});

//vue
<input id="btn" type="button" value="请点击" v-on:click="show"/>
<input id="btn" type="button" value="请点击" @click="show"/> //简写 @是v-on:的简写

var vm = new Vue({
    el:"#content",
    data:{
        msg:"默认值"
    },
    methods:{	//注意methods是属性不是数组。
        show:function(){
        	alert("点击成功");
        }
   }
});

绑定多个事件

注意：在用对象同时绑定多个事件时，不能用@代替v-on。

<button v-on="{mouseenter:onEnter,mouseleave:onOut}">点我</button>

methods:{
    onEnter:function(){
    	alert("onEnter");
    },
    onOut:function(){
    	alert("onOut");
    }
}

key事件（按键绑定）

<form v-on:keyUp.enter="onkeyUpenter">

methods:{
	onkeyUpenter : function() {
	    console.log("keyenterpressed");
	}
}

案例：跑马灯特效

思路

跑马灯转换为函数模型即subString()将字符串第一个字符排到末尾，然后重复这个过程。例如：“1234”–>“2341”–>“3412”–>“4123”
跑马灯需要一个时间间隔，这可以通过setInterval()完成。

实现

字符串操作

   <body>
	<div id="panel" >
		<input type="button" value="开始" v-on:click="run"/>
		<input type="button" value="停止" v-on:click="stop"/>
		<p v-text="txt"></p>
	</div>
</body>
<script>
	var vm = new Vue({
		el:"#panel",
		data:{
			txt:"跑马灯特效~~~   "
		},
		methods:{
			run:function(){
				//取第一个字符
				var start = txt.substring(0,1);
				//取后面的字符
				var end = txt.substring(1);
				//重新赋值vue中txt，html中内容自动随之改变，无需操作dom
				txt = end + start;
			},
			stop:function(){
				//TODO 停止跑马灯
			}
		}
	});
</script>

点击运行结果：
在这里插入图片描述
原来问题出在txt变量，在methods中访问data变量时需要使用this：

run:function(){
	var start = this.txt.substring(0,1);
	var end = this.txt.substring(1);
	this.txt = end + start;
},

定时器

run:function(){
	setInterval(function(){
		var start = this.txt.substring(0,1);
		var end = this.txt.substring(1);
		this.txt = end + start;
	},800);
},

运行又报错：
在这里插入图片描述
原来，还是this惹祸，setInterval()里的this并非vm。解决办法有两种：

//1.通过变量接收vm的this：
run:function(){
	_this = this; //这一步是关键
	setInterval(function(){
		var start = _this.txt.substring(0,1);
		var end = _this.txt.substring(1);
		_this.txt = end + start;
	},800);
},

//2.通过ES6语法中的箭头函数解决（推荐）
run:function(){
	setInterval( () => {
		var start = this.txt.substring(0,1);
		var end = this.txt.substring(1);
		this.txt = end + start;
	},500);
},

停止定时器

如要得到run()中开启的定时器，则需要变量接收setInterval()函数，但按下面的写法，stop()函数是访问不到intervalId的：

run:function(){
	var intervalId = setInterval( () => {//intervalId只是run()的局部变量
		var start = this.txt.substring(0,1);
		var end = this.txt.substring(1);
		this.txt = end + start;
	},500);
},

正确写法是放到vm的data中：

data:{
    txt:"跑马灯特效~~~   ",
    intervalId:null
},
methods:{
    run:function(){
    	this.intervalId = setInterval( () => {
    		//取第一个字符
    		var start = this.txt.substring(0,1);
    		//取后面的字符
    		var end = this.txt.substring(1);
    		//重新赋值vue中txt，html中内容自动随之改变，无需操作dom
    		this.txt = end + start;
    	},400);
    },
    stop:function(){
    	clearInterval(this.intervalId);
    }
}

当然，目前还存在问题，就是多次点击运行会开启多个定时器，只需要对intervalId判空即可：

run: function() {
	if (this.intervalId == null) {//避免多次开启
		this.intervalId = setInterval(() => {
			//取第一个字符
			var start = this.txt.substring(0, 1);
			//取后面的字符
			var end = this.txt.substring(1);
			//重新赋值vue中txt，html中内容自动随之改变，无需操作dom
			this.txt = end + start;

		}, 400);
	}
},

完整代码

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#panel p{
				color: red;background-color: black;padding: 10px;width: 180px;
			}
		</style>
	</head>
	<body>
		<div id="panel">
			<input type="button" value="开始" v-on:click="run" />
			<input type="button" value="停止" v-on:click="stop" />
			<p v-text="txt"></p>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#panel",
			data: {
				txt: "跑马灯特效~~~   ",
				intervalId: null
			},
			methods: {
				run: function() {
					if (intervalId != null) {
						this.intervalId = setInterval(() => {
							//取第一个字符
							var start = this.txt.substring(0, 1);
							//取后面的字符
							var end = this.txt.substring(1);
							//重新赋值vue中txt，html中内容自动随之改变，无需操作dom
							this.txt = end + start;

						}, 400);
					}
				},
				stop: function() {
					clearInterval(this.intervalId);
				}
			}
		});
	</script>
</html>

高新园养鸡场

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.Vue指令：v-on

用法提供事件绑定为按钮绑定点击事件的写法：//js<input type="button" value="请点击"/>document.getElementById("btn").onclick = function(){ alert("点击成功");}//jquery<input type="button" value="请点击"/>$("#btn").on("click",function(){ alert("点击成功");});//vu
复制链接

扫一扫

专栏目录