0
点赞
收藏
分享

微信扫一扫

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象


接上篇《​​6.Vue双向数据绑定和ref属性操作原生DOM​​》

上一篇我们主要讲解了Vue及双向数据绑定和Vue事件,以及Vue中的ref获取dom节点的操作,本篇我们来详细的介绍Vue事件,以及如何定义、执行方法,如何获取和改变数据,执行方法传值以及事件对象的操作。
本系列博文使用的Vue版本:2.6.11

一、执行事件的方法

这个我们在上一篇讲到,执行Vue的事件,在标签体中添加“v-on:click”属性,指定一个需要触发的方法:
<button v-on:click="run1()">执行事件的第一种写法</button>
然后在与data ()同级的区域内,增加一个“methods:”的方法定义区的声明,并在其中定义我们需要实现的方法:

<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},
methods:{ /*存放自定义方法的地方 */
run1:function(){
alert("这是一个方法");
}
}
}
</script>

点击按钮之后,就触发了相关的方法:

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_dataset

还有一种比较简洁的写法,就是标签体中添加“@click”属性,指定一个需要触发的方法:

<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">

<!-- v-on:click用来绑定Vue的方法 -->
<button v-on:click="run1()">执行事件的第一种写法</button>
<!-- @click用来绑定Vue的方法 -->
<button @click="run2()">执行事件的第二种写法</button>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},
methods:{ /*存放自定义方法的地方 */
run1:function(){
alert("这是一个方法");
},run2(){
alert("这是另一个方法");
}
}
}
</script>

<style>
</style>

这里我们可以注意到,在“methods:”定义另一个方法时,直接在上一个方法的后面添加逗号,紧跟着编写一个新的方法即可,看起来就像是一个json的对象数组一般,而实际上在Vue中,每一个方法都是一个单独的对象。方法的定义既可以使用第一种“run1:function()”的方式,也可以写括号定义方法“run2()”。

效果:

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_vue事件_02

 

二、获取和改变data中定义的数据

1、获取data中定义的数据
我们在使用Vue定义方法时,在方法中可以获取在data中定义的动态数据。使用“this.数据名”即可。例如我们编写第三个按钮,来获取data中定义的msg的值,可以在方法中使用“this.msg”获取:

<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">

<!-- v-on:click用来绑定Vue的方法 -->
<button v-on:click="run1()">执行事件的第一种写法</button>
<!-- @click用来绑定Vue的方法 -->
<button @click="run2()">执行事件的第二种写法</button>
<!-- 获取data中的数据 -->
<button @click="getMsg()">获取data中的msg数据</button>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},
methods:{ /*存放自定义方法的地方 */
run1:function(){
alert("这是一个方法");
},run2(){
alert("这是另一个方法");
},getMsg(){
alert(this.msg);
}
}
}
</script>

<style>
</style>

这里我们延伸一下,在微信小程序里获取msg对象,需要写“this.data.msg”,而在React里获取msg对象,需要写“this.state.msg”,在Angular(5/6)里面获取msg对象和Vue写法一样。

效果:

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_vue事件_03

 

2、改变data中定义的数据
改变data中定义的数据很简单,因为获取数据是使用“this.数据名”的方式,改变其值只需要为其赋值即可“this.数据名=新值”例如我们新增一个按钮,点击后重新设置data中msg的值:

<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<!-- v-on:click用来绑定Vue的方法 -->
<button v-on:click="run1()">执行事件的第一种写法</button>
<!-- @click用来绑定Vue的方法 -->
<button @click="run2()">执行事件的第二种写法</button>
<!-- 获取data中的数据 -->
<button @click="getMsg()">获取data中的msg数据</button> <br/> <br/>
<button @click="setMsg()">改变data中的msg数据</button><!-- 改变data中的数据 -->
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},
methods:{ /*存放自定义方法的地方 */
run1:function(){
alert("这是一个方法");
},run2(){
alert("这是另一个方法");
},getMsg(){
alert(this.msg);
},setMsg(){
this.msg="我是改变后的数据";
}
}
}
</script>

<style>
</style>

效果:

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_vue_04

结合上面两个操作方法,我们编写一个功能,实现点击一个按钮后,将data中的一个对象赋值,然后将赋值后的list数据渲染到页面上:

<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<button @click="requestData()">请求数据</button>
<hr/>
<ul>
<li v-for="item in list" :key="item">
{{item}}
</li>
</ul>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue',
list:[]
}
},
methods:{ /*存放自定义方法的地方 */
requestData(){
for(var i=0;i<10;i++){
this.list.push("我是第"+i+"条数据");
}
}
}
}
</script>

<style>
</style>

这个例子我们用到了前面学习的“方法的定义”、“data数据的获取”、“data数据的复制”、“v-for循环渲染list数据”的操作。
这是后面我们编写小项目的时候经常用到的,请求数据和渲染数据的原理。

效果:
 

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_vue_05

我们一直点上面的按钮会不停的扩充这个list,我们可以在前面展示list的索引值“key”,就能看到其元素的添加顺序:

<ul>
<li v-for="(item,key) in list" :key="item">
{{key}}-- {{item}}
</li>
</ul>

效果:

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_vue传递对象_06

 

三、方法的传值

1、传递普通参数
方法的传值和之前我们编写js方法一样,按照传参顺序进行方法参数的设置即可,例如我们分别给方法传一个和传两个值:

<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<!-- parameter -->
<button @click="paramFunc1('111')">方法传参1</button> <br/> <br/>
<button @click="paramFunc2('222','333')">方法传参2</button>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},
methods:{ /*存放自定义方法的地方 */
paramFunc1(param){
alert("参数:"+param);
},paramFunc2(param1,param2){
alert("参数1:"+param1+" 参数2:"+param2);
}
}
}
</script>

<style>
</style>

效果:

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_dataset_07

 

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_vue传递对象_08

 

2、传递事件对象
除了传值之外,我们还可以给方法传递一个事件对象,该事件对象我们可以监听鼠标、键盘、屏幕等事件,并可以编写响应的事件内部方法,同时可以使用“e.srcElement”获取当前元素的DOM对象,例如我们给一个按钮的方法传递该按钮的事件对象,并在点击时让它变为红色:

<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<button @click="eventFunc($event)">事件对象</button>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},
methods:{ /*存放自定义方法的地方 */
eventFunc(e){
//e.srcElement 相当于获取DOM节点
e.srcElement.style.background='red';
}
}
}
</script>

<style>
</style>

效果:

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_dataset_09

既然我们可以通过“e.srcElement”获取当前元素的DOM对象,那么就可以通过“e.srcElement.dataset”属性获取在标签中定义的自定义属性,

有关“dataset”的知识,可以参照新浪的Web API接口参考中有关“HTMLElement.dataset”的文档:
​​​https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset​​

这里是引用上面的一些简介,可以帮助我们了解“HTMLElement.dataset”:

HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。
一个HTML data-attribute 及其对应的DOM dataset.property 不共享相同的名称,但它们总是相似的:

在HTML中的一个自定义数据属性的名称以 data- 开头。它只能包含字母,数字和以下字符: dash (-), dot (.), colon (:), underscore (_)  - 但不是任何ASCII大写字母(A到Z)。
JavaScript 中的一个自定义数据属性的名称是相同HTML属性的名称,但在 camelCase中,没有破折号,点等。

通过上面我们可以知道,在标签中设置一个“data-param=111”自定义属性,即设置了一个名为“param”,值为“111”的参数。
我们写个测试例子,获取设置在标签中的自定义参数中的值:

<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<button data-param='111' @click="eventFunc($event)">事件对象-获取自定义属性值</button>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},
methods:{ /*存放自定义方法的地方 */
eventFunc(e){
//e.srcElement 相当于获取DOM节点
e.srcElement.style.background='red';
alert("自定义属性值:"+e.srcElement.dataset.param);
}
}
}
</script>

<style>
</style>

效果:

【Vue学习总结】7.Vue定义方法、操作数据以及事件对象_srcElement_10

至此我们介绍了执行事件的方法、获取和改变data中定义的数据以及方法的传值。下一篇我们来讲解通过Vue事件结合双向数据绑定来实现todolist。

参考:
《IT营:itying.com-2018年Vue2.x 5小时入门视频教程》

举报

相关推荐

0 条评论