方法都写在methods重,有两种写法:
1、

getMsg:function(){
alert();
},  这种写法就是对象中的方法
2、
getMsg1(){
alert();
}注意没有function,否则报错

对于view上面的事件有两种方式定义: v-on:click="""这种方式

或者@click这种写法

----------------

实现一个功能:当点击请求数据按钮时,会将数据赋值

  1. <template>
  2. <div id="app">
  3. {{msg}}
  4. <br>
  5. <button v-on:click="getMsg()">获取 </button>
  6. <button @click="getMsg1()">获取1</button>
  7.  
  8. <button @click="requestData()">点击按钮进行请求赋值 </button>
  9.  
  10. <div>
  11. <ul>
  12. <li v-for="(item,key) in list">
  13. {{key}}------ {{item}}
  14. </li>
  15. </ul>
  16. </div>
  17. </div>
  18. </template>
  19.  
  20. <script>
  21. export default {
  22. name: 'app',
  23. data () {
  24. return {
  25. msg: 'fsafasad',
  26. list:[]
  27. }
  28. },
  29. methods:{
  30. getMsg:function(){
  31. alert();
  32.  
  33. },
  34.  
  35. getMsg1(){
  36.  
  37. alert();
  38. },
  39. requestData(){
  40.  
  41. for(var i=;i<;i++){
  42. this.list.push("这是第"+ i +"条数据"); //这地方就是点击按钮时,会重新赋值给model,model改变之后,view就会也跟着改变,这是双向绑定
  43. }
  44. }
  45. }
  46. }
  47. </script>
  48.  
  49. <style>
  50.  
  51. </style>

vue的事件对象,方法执行的更多相关文章

  1. Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

    <template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...

  2. vue2.* 事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象 05

    <template> <div id="app"> <button v-on:click="run1()">执行事件的第一种 ...

  3. Vue入门---事件与方法详解

    一. vue方法实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  4. vue的事件对象

    事件对象: v-on:click/mouseover 简写:     @click=""   @click="show($event)" <input t ...

  5. Vue 获取数据、事件对象、todolist

    vue中在方法里获取data里的msg:this.msg 在微信小程序里this.data.msg 改变data里的msg:this.msg="改变后的msg" 可以通过list. ...

  6. vue的事件

    vue的事件: vue事件简写: vue中事件是 v-on:click=' show()'    但是我嫌弃它写太长每次都要 v-on: 事件 vue中就有事件简写   @click='show()' ...

  7. HTML DOM 事件对象

    HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...

  8. JS HTML DOM 事件对象(onclick、onmouseenter)

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). HTML DOM 事件 DOM:  ...

  9. HTML DOM 事件与方法

    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮). 鼠标事件 键盘事件 框架/对象(F ...

随机推荐

  1. 通过__block的作用深入研究block

    block普通引用 默认情况下,在block中访问外部变量是通过复制一个变量来操作的,既可以读,但是写操作不对原变量生效,下面通过代码来举证 NSString *a = @"testa&qu ...

  2. LRU原理和Redis实现——一个今日头条的面试题(转载)

    很久前参加过今日头条的面试,遇到一个题,目前半部分是如何实现 LRU,后半部分是 Redis 中如何实现 LRU. 我的第一反应是操作系统课程里学过,应该是内存不够的场景下,淘汰旧内容的策略.LRU ...

  3. Nodejs 使用 es module (import/export)

  4. pom文件中maven-assembly-plugin插件学习

    一.使用场景 如果项目是微服务架构,可能用到这个插件的概率比较高,平时普通的项目不需要这样的实现方式. 如果项目内的一部分通用功能,不需要挨个引用,则需要将通用功能部分达成jar包. 二.Maven- ...

  5. 【iCore4 双核心板_uC/OS-II】例程六:信号量——任务同步

    一.实验说明: 信号量是一个多任务内核提出的一个协议机构,上一个实验中我们介绍了信号量访问共享资源 的功能,其实信号量最初是用来控制访问共享资源的,它还可以用来同步一个中断服务函数和一个任 务,或者同 ...

  6. 【Unity】通用的Debugger日志模块

    模块代码整理自 http://gad.qq.com/lore/catalog/10007 Debugger类.提供打印日志的静态方法. using System; using System.IO; n ...

  7. Spark基本架构及原理

    Hadoop 和 Spark 的关系 Spark 运算比 Hadoop 的 MapReduce 框架快的原因是因为 Hadoop 在一次 MapReduce 运算之后,会将数据的运算结果从内存写入到磁 ...

  8. 大数据架构:搭建CDH5.5.1分布式集群环境

    yum install -y ntp gcc make lrzsz wget vim sysstat.x86_64 xinetd screen expect rsync bind-utils ioto ...

  9. C++ 智能指针七

    /* 智能指针weak_ptr */ #include <iostream> #include <string> #include <memory> /* weak ...

  10. Android Studio Gradle Build Running 加速

    加速效果