接上篇《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>

点击按钮之后，就触发了相关的方法：

还有一种比较简洁的写法，就是标签体中添加“@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()”。

效果：

 

二、获取和改变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写法一样。

效果：

 

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>

效果：

结合上面两个操作方法，我们编写一个功能，实现点击一个按钮后，将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数据”的操作。
这是后面我们编写小项目的时候经常用到的，请求数据和渲染数据的原理。

效果：
 

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

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

效果：

 

三、方法的传值

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>

效果：

 

 

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>

效果：

既然我们可以通过“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>

效果：

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

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

转载请注明出处：https://blog.csdn.net/acmman/article/details/108040904