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

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

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

或者@click这种写法

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

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

<template>
<div id="app">
{{msg}}
<br>
<button v-on:click="getMsg()">获取 </button>
<button @click="getMsg1()">获取1</button> <button @click="requestData()">点击按钮进行请求赋值 </button> <div>
<ul>
<li v-for="(item,key) in list">
{{key}}------ {{item}}
</li>
</ul>
</div>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
msg: 'fsafasad',
list:[]
}
},
methods:{
getMsg:function(){
alert(); }, getMsg1(){ alert();
},
requestData(){ for(var i=;i<;i++){
this.list.push("这是第"+ i +"条数据"); //这地方就是点击按钮时,会重新赋值给model,model改变之后,view就会也跟着改变,这是双向绑定
}
}
}
}
</script> <style> </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. 【iOS】ARC-MRC下的单例及其应用

    单例的应用十分普遍,单例模式使一个类仅仅有一个实例. *易于供外界訪问. *方便控制实例个数,节约系统资源. *OC中的常见单例: 如:UIApplication,  NSNotificationCe ...

  2. ANTLR v4 专业术语集

    记录<The Definitive ANTLR 4 Reference>中出现的专业术语: grammar 文法,一种形式化(formal)的语言描述. syntax 语法 phrase ...

  3. Elasticsearch常用配置及性能参数[转]

    cluster.name: estest   集群名称node.name: “testanya”  节点名称 node.master: false  是否主节点node.data: true   是否 ...

  4. [HDFS Manual] CH2 HDFS Users Guide

    2 HDFS Users Guide 2 HDFS Users Guide 2.1目的 2.2.概述 2.3.先决条件 2.4. Web Interface 2.5. Shell Command 2. ...

  5. python class和class(object)用法区别

    # -*- coding: utf-8 -*- # 经典类或者旧试类 class A: pass a = A() # 新式类 class B(object): pass b = B() # pytho ...

  6. zoj 3430 Detect the Virus(AC自己主动机)

    Detect the Virus Time Limit: 2 Seconds      Memory Limit: 65536 KB One day, Nobita found that his co ...

  7. mvc webapi路由重写

    修改app_start/webapiconfig.cs using System.Web.Http; using System.Web.Routing; using Ninject; using Tx ...

  8. docker容器里设置中文时区

    本文讨论docker容器里中文时区的问题,总所周知docker hub上的镜像默认都是英文时区的,在国人使用过程当中需要将时区设置成中文,我原来光配置/etc/localtime了date显示的时间也 ...

  9. QtCreator pro中相对路径和debug文件夹下未放动态库时调试报QtCreator:during startup program exited with code 0xc0000135错误

    QtCreator  pro中相对路径一般是以pro文件(非main函数所在文件)所在的当前目录为起点,用$$PWD表示. 如头文件和库文件 INCLUDEPATH +=$$PWD/inc win32 ...

  10. Google Protobuf 使用 Java 版

    一 . Protobuf 的入门 Protobuf 是一个灵活,高效,结构化的数据序列化框架, 相比于 XML 等传统的序列化工具,它更小,更快,更灵活,更简单. Protobuf 支持数据结构化一次 ...