指令3——（v-on）
2019-02-27 本文已影响0人
小丘啦啦啦
一、v-on
用来绑定事件，值识别为一个变量，与Vue对象的方法对应，可简写为（@）。
无传参的方法，默认了一个参数为event， 是原生 DOM 。
定义了自己参数的方法，还需要在内联语句处理器中访问原始的 DOM ，可以用特殊变量 $event 把它传入方法。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{val}}</p>
<!-- 绑定事件，指向Vue对象的方法 -->
<input type="button" value="点击按钮" v-on:click="add">
<!-- 事件后面也可直接更改Vue对象的数据属性 -->
<input type="button" value="控制按钮" v-on:mouseover="mouseAdd('用鼠标增加',$event)">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
methods: { //methods属性中定义了当前Vue对象所有可用方法
add: function (event) {
/* this指向当前Vue对象的数据 */
this.val++;
if (event) {
console.log(event.target.tagName);
}
},
mouseAdd(msg,event){
this.val++;
if (event) {
console.log(event.target.tagName);
console.log(msg);
}
}
}
})
</script>
</body>
</html>
二、跑马灯
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="button" value="动起来" @click="lang"/>
<input type="button" value="停止" @click="stop"/>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'猥琐发育，画画~',
intervalId:null
},
methods:{
lang(){ //es6对象方法简写
if(this.intervalId!=null){
//如果不为null,说明已经开启了定时器,避免重复开定时器
return;
}
this.intervalId = setInterval(()=>{
//把定时器的id赋值给Vue对象的数据,为之后清除定时器准备
const start = this.msg.substring(0,1);
//这里箭头函数this会指向此Vue对象
const end = this.msg.substring(1);
this.msg = end+start;
/* Vue实例会实时监听自己身上data数据的变化
只要有变就会自动把最新数据同步到页面(不需要考虑重新渲染dom) */
},400);
},
stop(){
clearInterval(this.intervalId); //清除定时器
this.intervalId = null; //定时器id重新赋值为null
}
}
})
</script>
</body>
</html>
