<template>

<div id="app">
<h1>{{ msg }}</h1>
<br>
<button v-on:click="run1()"> 第一种写法</button>
<br>
<button @click='run2()'> 第二种写法</button>
<br>
<button @click='getMsg()'> 获取mesg</button>
<br>
<button @click='setMsg()'>更改mesg</button>
<br>
<button @click='addData()'>增加数据</button>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
<br>
<button @click="byvalue('values=1')">执行方法传值</button>
<br>
<button data-aid='123' @click="eventFn('$event')">事件对象</button>
</div>
</template> <script>
/*
双向数据绑定,用于表单,
*/
export default {
name: 'app',
data () {
return {
msg: 'hello',
list:[]
}
},methods:{
run1(){
alert("第一种方法")
},run2(){
alert("第二种方法")
},getMsg(){
alert(this.msg)
},setMsg(){
this.msg="改变内容"
},addData(){
for(var i=0;i<10;i++){
this.list.push("我是第"+i+" 条数据");
}
},byvalue(env){ #进行传值
alert(env)
},eventFn(e){
console.log(e);
//e.srcElment.style.backgroud='red';
}
}
} </script>
<style> h1, h2 {
font-weight: normal;
}
.box{
width: 100px;
height: 100px;
background-color: #42b983
}
</style>

  

vue.js--基础事件定义,获取数据,执行方法传值的更多相关文章

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

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

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

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

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

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

  4. React事件方法、React定义方法的几种方式、获取数据、改变数据、执行方法传值

    1.案例实现代码如下 import React, { Component } from 'react'; /** * 特别注意this,对于传值和绑定都十分重要 */ class Home4 exte ...

  5. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  6. vue.js基础知识篇(5):过渡、Method和Vue实例方法

    第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...

  7. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  8. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  9. vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

    父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...

随机推荐

  1. PIE SDK栅格分级渲染

    1.  功能简介 栅格数据分级渲染是根据不同的分级规则,对像元值进行等级划分:并通过对每一级设置不同的显示符号和标注信息,从而达到分级显示的效果. 2.功能实现说明 2.1. 实现思路及原理说明 第一 ...

  2. PIE SDK图层属性

    1. 功能简介 通过查看图层属性可以对图层的基本信息(一般信息,来源,注释,字段信息等)有所了解 ,下面就基于PIE SDK,介绍查看图层属性功能的实现. 2. 功能实现说明 2.1. 实现思路及原理 ...

  3. git和svn有什么区别

    如果你在读这篇文章,说明你跟大多数开发者一样对GIT感兴趣,如果你还没有机会来试一试GIT,我想现在你就要了解它了. GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等.如果 ...

  4. esper(4-5)- Context 条件

    条件主要包含:Filter,Pattern,Crontab以及Time Period Filter主要就是对属性值的过滤,比如: create context NewUser partition by ...

  5. 对象池3(方法功能)PoolManager(控制)PoolTimeObject(时间管理)text01(调用)Destorys(销毁)

    1.对象池PoolManager namespace kernal { public class PoolManager : MonoBehaviour { //“缓冲池”集合 public stat ...

  6. 剑指offer第3题:从尾到头打印链表

    方法一:采用栈来存储,用ArrayList保存.注意题目给出的输出结果是ArrayList import java.util.ArrayList; import java.util.Stack; pu ...

  7. oem的使用

    1 浏览器输入下面的网址: 虚拟机[安装orcale的机器]:http://localhost:1158/em/ 本机:http://192.168.47.10:1158/em/ 192.168.47 ...

  8. jQuery 文本插入和标签移动方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. android aidl通信 RemoteCallbackList客户端注册回调

    RemoteCallbackList 声明 public class RemoteCallbackList<E extends IInterface> 情况 在AIDL中客户端向服务端注册 ...

  10. Portals

    Portals Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式. const appRoot = document.getElementById('app-root') ...