第五课 vue的事件调用自定义方法
<template>
<!-- vue的事件调用自定义方法 -->
<div id="app">
<!--
<img v-bind:src='url' />
<img :src='url' /> -->
{{msg}}
<br>
<br>
<br>
<button v-on:click="run1()">执行方法的第一种写法</button>
<br><br><br>
<button @click="run2()">执行方法的第二种写法</button>
<br>
<br>
<br>
<button @click="getMsg()">获取data里面的msg</button>
<br>
<br>
<br>
<button @click="setMsg()">改变data里面的msg</button>
<br>
<br>
<br>
<button @click="requestData()">请求数据</button>
<hr>
<ul>
<!-- item是数据，key是数据的下标 -->
<li v-for="(item,key) in list">
{{key}}--- {{item}}
</li>
</ul>
<br>
<br>
<br>
<button @click="deleteData('111')">执行方法传值111</button>
<br>
<br>
<button @click="deleteData('222')">执行方法传值2222</button>
<br>
<br>
<br>
<!-- 通过内置变量$event触发事件查看 -->
<button data-aid='123' @click="eventFn($event)">事件对象</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: '你好vue',
list:[]
}
},
methods:{
run1:function(){
alert('这是一个方法');
},
run2(){
alert('这是另一个方法');
},
getMsg(){
alert(this.msg);
},
setMsg(){
this.msg="我是改变后的数据"
},
requestData(){
for(var i=0;i<10;i++){
this.list.push('我是第'+i+'条数据');
}
},
deleteData(val){
alert(val);
},
eventFn(e){
console.log(e);
/* 触发事件
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 69
clientY: 575
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 69
layerY: 800
metaKey: false
movementX: 0
movementY: 0
offsetX: 59
offsetY: 6
pageX: 69
pageY: 800
path: (6) [button, div#app, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 116
screenY: 679
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: button
target: button
timeStamp: 14528728.630000005
toElement: button
type: "click"
view: Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
which: 1
x: 69
y: 575
__proto__: MouseEvent
*/
// e.srcElement dom节点
e.srcElement.style.background='red';
/*获取自定义属性的值*/
console.log(e.srcElement.dataset.aid);
}
}
}
</script>
<style lang="scss">
</style>
