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. [转] Angular 4.0 内置指令全攻略

    [From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...

  2. 使用Maven运行Java main的3种方式使用Maven运行Java main的3种方式

    maven使用exec插件运行java main方法,以下是3种不同的操作方式. 一.从命令行运行 1.运行前先编译代码,exec:java不会自动编译代码,你需要手动执行mvn compile来完成 ...

  3. PIE SDK SFIM融合

    1.算法功能简介 SFIM 融合方法全称为基于平滑滤波的亮度变换.基本原理是将高分辨率影像通过低通滤波抑制其高频空间信息保留低频信息,再将原高分辨率影像与通过低通滤波的高分辨率影像进行比值运算,以抵消 ...

  4. 破解myBase试用到期

    请保持你的myBase7是关闭的 1.找到myBase7的安装目录(myBase.exe的目录): 2.右键编辑打开myBase.ini: 3.找到 App.UserLic.FirstUseOn,并在 ...

  5. rancher2.X搭建k8s集群平台

    一, 新版特性 Rancher 1.6支持多种容器编排框架,包括Kubernetes.Mesos.Docker Swarm,默认的基础编排引擎是Cattle,Cattle极简的操作体验受到了大量开源社 ...

  6. (转)用shell脚本实现杨辉三角的4个实例!

    概述:    中国古代数学家在数学的许多重要领域中处于遥遥领先的地位.中国古代数学史曾经有自己光辉灿烂的篇章,而杨辉三角的发现就是十分精彩的一页.杨辉三角形,是二项式系数在三角形中的一种几何排列.杨辉 ...

  7. Druid手动创建连接的坑

    环境:druid 1.1.10 今天优化了一天的代码, 老代码手动创建连接,坑 Connection conn = DBUtil.getConnection("d_log_dot_" ...

  8. 20个最受欢迎的Linux命令(转)

    本文根据 commandlinefu 网站的历史排名,筛选出了前 20 个得票最高的 Linux 命令.看看你都能熟练使用了吗? 1.以 root 帐户执行上一条命令 sudo !! 2.利用 Pyt ...

  9. node.js分片上传文件

    前端 : <html> <head> <title>分片上传文件</title> </head> <body> <div ...

  10. HttpClient请求工具类

    package com.yangche.utils; import org.apache.http.NameValuePair; import org.apache.http.client.Clien ...