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. ansys14.0 从入门到精通

    凌桂龙 李战分 2013.2 清华大学 FLUENT流体计算应用教程 索书号:TB126-39 ZW2.1     单元 结点 和 自由度 载荷 与 边界条件 : 关系 就是约束 , 边界条件是 结构 ...

  2. python小商店

    (1) 输入自己所有的钱.(2) 展示商品的序号,名称及其价格.(3) 输入要买商品的序号.(4) 输入要买商品的数量.(5) 购物车中显示购买的水果名称及其对应的数量和剩余钱.(6) 如果序号输入有 ...

  3. AppInventor2笔记

    将视觉化的 块语言 翻译为 Android上的实现 的编译器使用了Kawa语言框架,而Kawa是Scheme编程语言的方言,由Per Bothner开发,并由自由软件基金会发布,它是GNU操作系统的一 ...

  4. switch case 注意事项+1 及 case合并综合练习例子

    case可以合并: 练习11:根据输入的星期,得到具体每天做的事情.星期一学习,星期二学习,星期三自习,星期四学习,星期五自习,星期六学习,星期日学习 class Switch02{ public s ...

  5. SQLAlchemy安装和使用

    1.SQLAlchemy安装 SQLAlchemy依赖mysql-python驱动,mysql-python目前只有支持py2的版本和mysql5.5的版本 点我:mysql-python链接 版本: ...

  6. Oracle 数据库实例和数据库

    本文参考自oracle数据库实例,数据库的理解,纯属读书笔记,用于加深记忆. 先看Tom关于这二者的解释: 1.数据库 物理操作系统文件或磁盘的集合(我觉得可以理解为数据文件等).使用Oracle 1 ...

  7. STL:map用法总结

    一:介绍 map是STL的关联式容器,以key-value的形式存储,以红黑树(平衡二叉查找树)作为底层数据结构,对数据有自动排序的功能.命名空间为std,所属头文件<map> 二:常用操 ...

  8. 在ZYNQ-7000平台上利用PS点亮PL上的LED灯

    在ZYNQ-7000平台上利用PS点亮PL上的LED灯 1.实验方案 图1    实验方案系统框图 2.具体步骤 2.1.vivado工程建立 ①打开vivado集成开发环境,点击“Create Pr ...

  9. Linux抓包工具:tcpdump

    tcpdump 是一个命令行实用工具,允许你抓取和分析经过系统的流量数据包.它通常被用作于网络故障分析工具以及安全工具. tcpdump 是一款强大的工具,支持多种选项和过滤规则,适用场景十分广泛.由 ...

  10. jqGrid 将行变成超连接时浏览器解析超连接错误

    1.将行变成超连接如下所示 name: , align: "center", formatter: function (cellValue, options, rowdata, a ...