//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. Python实用笔记 (11)高级特性——迭代器

    这些可以直接作用于for循环的对象统称为可迭代对象:Iterable. 可以使用isinstance()判断一个对象是否是Iterable对象: >>> from collectio ...

  2. vue全家桶(2.1)

    3.路由切换 3.1.vue-router路由切换 3.1.1.什么是前端路由 路由这个概念最先是后端出现的,发送不同的请求,后端根据请求的不同返回不同的资源,这个时候的url是和后端交互的,需要在后 ...

  3. GIT更换连接方式

    1-使用 git remote -v 查看对应的克隆地址: git remote -v origin https://github.com/username/repository.git (fetch ...

  4. VS2017 快捷键

    VS2017注释:先CTRL+K 然后CTRL+C   (ctrl按住不松,松开k按c) 取消注释:先CTRL+K,然后CTRL+U  (ctrl按住不松,松开k按c)

  5. Spring Cloud Alibaba基础教程:Sentinel Dashboard中修改规则同步到Apollo

    在之前的两篇教程中我们分别介绍了如何将Sentinel的限流规则存储到Nacos和Apollo中.同时,在文末的思考中,我都指出了这两套整合方案都存在一个不足之处:不论采用什么配置中心,限流规则都只能 ...

  6. 一周学会linux实战笔记

    山篇 思考------实践-------再思考-------再实践 1.高效愉快地学习 2.先建立一个整体框架,然后细节 3.用的什么再学习什么 4.先know how,再know why 5.计算机 ...

  7. 用.NET做B/S结构的系统,您是用几种结构来开发,每一层之间的关系以及为什么要这样分层?

    表现层(UI):通俗讲就是展现给用户的界面,即用户在使用一个系统的时候他的所见所得. 业务逻辑层(BLL):针对具体问题的操作,也可以说是对数据层的操作,对数据业务逻辑处理. 数据访问层(DAL):直 ...

  8. 每日一题 - 剑指 Offer 35. 复杂链表的复制

    题目信息 时间: 2019-06-28 题目链接:Leetcode tag: 链表 难易程度:中等 题目描述: 请实现 copyRandomList 函数,复制一个复杂链表.在复杂链表中,每个节点除了 ...

  9. Shein一面(视频面)07.07

    应聘职位:Java工程师 时长:30min 面经: Spring讲一下 SpringAOP用到什么设计模式 JVM包括什么 运行时数据区包括什么 什么时候入栈,出栈 Sychronized和可重入锁区 ...

  10. Windows下生成IOS证书并发布APP安装到IPhone

    目录: 一:生成证书 二:安装到IPhone 准备环境: 1.Appuploader(需要安装Java环境) 2.爱思助手 一.生成证书 1.1.打开appuploader后登陆开发者账号 1.2.点 ...