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. 事件获取目标 currentTarget target srcElement 三者之间的区别和联系

    currentTarget   指的是触发事件的当前对象,可以是冒泡和捕获的对象,不一定是点击或者鼠标移入等事件的直接触发对象.可以是他的父元素等. target 指的是事件触发的直接对象.IE有兼容 ...

  2. 软件测试作业——WordCount的测试

    一.代码提交 1.代码地址:https://gitee.com/zst1978805482/WordCount 2.作业地址:https://edu.cnblogs.com/campus/xnsy/T ...

  3. element-ui日期组件DatePicker设置日期选择范围Picker Options

    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

  4. angular的基本要点

    <body ng-app="Myapp"> <div ng-controller="firstcon"> <h1>hello ...

  5. java线程中的 sleep() wait() yield()

    sleep()方法是让线程休眠  可以指定时间  其实就是让线程进入阻塞状态  指定的时间过后 进入就绪状态  不释锁 相当于抱着锁睡觉 wait()  让线程进入等待状态  被唤醒后才会继续执行   ...

  6. topN问题

    topN问题:给出一个数组,找出前N个最大的元素. topN问题可以用分治法解决,这个问题与快速排序类似,快速排序是用一个数对数组进行划分,topN问题则不需完成排序,只需划分出前n个最大的数字即可. ...

  7. Flask 框架理解(一)

    Flask 框架理解(一) web 服务器 , web 框架 以及 WSGI 这里说的 web 服务器特指纯粹的 python HTTP 服务器(比如 Gunicorn,而不是 Apache,Ngin ...

  8. 【Linux相识相知】文本处理工具之grep\egrep\fgrep及正则表达式

    常说Linux上有文本处理的三剑客,grep.sed和awk,本文就grep做出详细的描述,并引出正则表达式. grep NAME:打印模式匹配的行 SYNOPISIS: grep [OPTIONS] ...

  9. 【iptables】规则的试验和查看

    1.存在桥接,查看桥接访客网络规则 ebtables -L 可以看到对不同的链的策略

  10. List< >泛型集合

    //一旦你确定了泛型的类型,集合里的元素已经有了确切的定义 List<int> list = new List<int>();  //创建泛型集合的对象 list.Add(); ...