//html
<div id="app">
  <input type="button" value="ok" v-bind:title="msg" v-on:click="show" />
  <input type="button" value="OK" :title="msg" @click="show" />//对应的v-bind和v-on的简写
</div>
//script
<script>
  var vm = new Vue({
    el:'app',
    data:{
      msg:'点击一下'
    },
    methods:{//methods中定义了当前vue实例中所有可用的方法
      show:function(){
        alert('hello')
      }
    }
  })
</script>

说明:

v-on是用来绑定事件的,click还可以换成mouseover,dbclick,mouseon等浏览器端常见的事件机制

v-on的缩写是@

vue学习(四) v-on:事件绑定的更多相关文章

  1. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  2. Spine学习四 - 在动作上绑定回调事件

    Spine事件特性: SpineEvent(string startsWith = "", string dataField = "", bool includ ...

  3. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  4. vue使用svg,animate事件绑定无效问题及解决方法

    由于使用svg制作圆形进度条,但是进度展示的太生硬,没有过渡圆滑的效果,所以使用 animate(在svg元素里可以查到) 元素标签,但 这样使用了,还是没有效果,我前端使用的 vue ,所以通过 @ ...

  5. Javascript 事件对象(四)一个事件绑定多个不同的函数

    给一个对象绑定多个事件处理函数: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-T ...

  6. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  7. 迷你MVVM框架 avalonjs 学习教程14、事件绑定

    之前的章节许多示例代码也或多或少地展示了如何使用ms-click来绑定事件了.能直接在模板上绑定是事件,这也是静态模板与动态绑定的一大区别.ms-click不是简单的onclick的别名,它在内部屏蔽 ...

  8. Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)

    文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...

  9. Vue学习笔记之表单绑定输入

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

随机推荐

  1. 发布Nuget包时遇到都意外

    准备好工具和发布教程.(这些网上都有,我就不说了,就说说我遇到都意外.) 在发布包都过程中,我给我都dll命名为Common.不知道是不是这个原因导致的我包发布上去后,程序对其引用时居然没主动引用进程 ...

  2. 使用 nuget server 的 API 来实现搜索安装 nuget 包

    使用 nuget server 的 API 来实现搜索安装 nuget 包 Intro nuget 现在几乎是 dotnet 开发不可缺少的一部分了,还没有用过 nuget 的就有点落后时代了,还不快 ...

  3. Codeforces Round #651 (Div. 2)

    感觉自己无可救药了. A题:找到小于等于n的两个不同的数的gcd最大是多少,显然是floort(n/2).设这两数是a * gcd, b * gcd然后gcd(a,b) = 1,那么gcd要尽量大,不 ...

  4. Flask01-HelloWorld

    # flask学习 参考:http://www.pythondoc.com/flask-mega-tutorial/ ## python3. 默认支持虚拟环境使用(用最简单的方法,解决问题) wget ...

  5. dart快速入门教程 (3)

    3.运算符 运算符本质上就是代表某运算规则的符号,例如: + ,这个符号,代表着数学运算里面的加法,按照加法法则进行运算即可,同理,学习运算符就是掌握这些规则而已 3.1.算术运算符 算术运算符主要包 ...

  6. CListBOX 用法

    ListBox的操作比较简单: 1添加数据 声明控件变量的类别为Control,变量类型为CListBox,变量名为m_ListBox_Content. m_ListBox_Content.AddSt ...

  7. JAVA基础-继承机制

    需要掌握的知识点: 包的使用 继承时,子类如何覆盖父类方法(重写和重载) 继承时,构造方法的执行过程 JVM中子类如何实例化(先实例化父,再实例化子) super和this关键字 final关键字 包 ...

  8. Golang从合并链表聊递归

    从合并链表聊递归 递归是工程师最常见的一种解决问题的方式,但是有时候不容易真正掌握.有人说是看起来很简单,自己写起来会费点劲. 最著名的例子就是斐波那契数列(Fibonacci sequence),通 ...

  9. 常用API - Scanner、Random、ArrayList

    API 概述 API(Application Programming Interface),应用程序编程接口. Java API是一本程序员的 字典 ,是JDK中提供给我们使用的类的说明文档. 这些类 ...

  10. Blazor带我重玩前端(二)

    概览 Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式.官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版 ...