1.js代码

var box=new Vue({
el:'.box',
data:{
msg:'hello'
},
methods:{ /*方法放置区,函数*/
show:function(){    //定义一个show方法
alert();
}
}
})

2.html代码

<input class="box" type="button" value="按钮" v-on:click="show();"/>  

注解:1.点击事件的绑定

   2.鼠标移动事件的绑定:v-on:mouseover

   3.其他事件类似:v-on:mousemove ......

   4.v-on:可以简写成@

    v-on:click="   等同   @click=''

vue v-on:事件的更多相关文章

  1. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  2. Vue 实例之事件 操作样式 (文本、事件、属性、表单、条件)指令

    Vue 可以独立完成前后端分离式web项目的JavaScript框架 三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...

  3. vue for 绑定事件

    vue for 绑定事件 <div id="pro_list" v-for="item in pro_list"> <div class=&q ...

  4. Vue方法与事件

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson10 一 vue方法实现 <!DOCTYPE html> ...

  5. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  6. Vue中的事件与常见的问题处理

    Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...

  7. vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

    vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...

  8. vue教程1-04 事件 v-on:click="函数"

    vue教程1-04 事件 v-on:click="函数"   v-on:click/mouseout/mouseover/dblclick/mousedown..... 实例:为d ...

  9. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  10. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

随机推荐

  1. 更改npm默认路径

    Windows下的Nodejs npm路径是appdata,如果你想通过npm在自己指定的路径下去搭建环境,那么就要去nodejs的安装目录中找到node_modules\npm\npmrc文件,修改 ...

  2. poj3190

    一.题意:有n头牛,每头牛需要占用一个时间段的时间来挤奶,且必须有机器.问最少需要多少个机器 二.思路:区间贪心.把尽量多的牛放在一个棚子里,这样就可以使得用到的棚子数最少.只要任意两头牛的挤奶时间不 ...

  3. 转 LIST INCARNATION OF DATABASE

    incarnation在英文中是“化身”的意思. 那么在oracle中,它又是什么意思呢?有什么作用呢? 我们看一些基本概念 Current Incarnation(当前化身):数据库当前正在使用的化 ...

  4. Murano Weekly Meeting 2016.08.23

    Meeting time: 2016.August.23 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: ...

  5. zookeeper简单命令

    bin/zkCli.sh -server ls / create /zk_test my_data get /zk_test set /zk_test admln delete /zk_test ad ...

  6. Mysql系列-字符集

    字符集 怎样选择合适的字符集 如果应用程序需要发布到很多国家和地区,需要支持各种各样的文字,则选择Unicode编码,Mysql中即UTF-8.q如果需要将数据导入数据库,这时候要注意数据库字符集对数 ...

  7. Java动态性 字节码操作

    Java动态性的两种常见方式:-字节码操作 - 反射;字节码操作比反射开销小,性能高,JAVAasist性能高于反射,低于ASM 运行时操作字节码可是实现  : 动态生成新的类:动态的改变某个类的结构 ...

  8. 将 flask 中的 session 存储到 SQLite 数据库中

    将 flask 中的 session 存储到 SQLite 数据库中 使用 flask 构建服务器后端时,常需要在浏览器端存储 cookie 用于识别不同用户,根据不同的 cookie 判断出当前请求 ...

  9. js 常用事件句柄总结

    HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可插入 HT ...

  10. C++程序设计基础(3)条件语句和循环语句

    注:读<程序员面试笔记>笔记总结 1.知识点 1.1条件语句 (1)if……:(2)if……else……:(3)if……else if……:(4)switch(){case ():brea ...