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. 精神AC合集 2018.4.3

    UESTC炸了,先把看似十分OK(只是过了样例)的代码贴上,修复好后再交上去 594 #include<iostream> #include<algorithm> #inclu ...

  2. 网络知识之ipset

    ipset介绍 ipset是iptables的扩展,它允许你创建 匹配整个地址集合的规则.而不像普通的iptables链只能单IP匹配, ip集合存储在带索引的数据结构中,这种结构即时集合比较大也可以 ...

  3. my32_ error 1872 Slave failed to initialize relay log info structure from the repository

    重启了实例后,slave进程无法开启 Last_SQL_Errno: Last_SQL_Error: Slave failed to initialize relay log info structu ...

  4. css垂直居中几种方法(二)

    方法1:table-cell .box1{ display: table-cell; vertical-align: middle; text-align: center; } <div cla ...

  5. python list常见用法

    来至builtins.py: def extend(self, iterable): # real signature unknown; restored from __doc__ "&qu ...

  6. STL:set用法总结

    一:介绍 set是STL的关联式容器,以红黑树(Red-Black Tree)作为底层数据结构.自动去重,保证每个元素唯一,并对数据进行排序. 命名空间为std,所属头文件为<set> 二 ...

  7. 简单实现 ArrayList

    java中提供了多个集合框架 其中就有ArrayList  下面简单的实现一下 只写了添加,获取长度和根据下标获取元素的方法 public class MyArrayList { //定义一个obje ...

  8. textarea的实现

    由于限制字数是用原有的 maxlength会有问题,所以用一般会用js控制,今天用到三种: (一)html: <body> <form name=myform action=&quo ...

  9. [转] EF cannot be tracked because another instance of this type with the same key is already being tracked

    本文转自:http://stackoverflow.com/questions/6033638/an-object-with-the-same-key-already-exists-in-the-ob ...

  10. Java简单验证码原理(源代码+步骤操作)

    本文章一共分为五个步骤,具体操作流程如下: 一.新建名为:CheckCodeServlet的servlet类; 二.复制以下代码到新建的CheckCodeServlet类中,修改自己的包名: pack ...