//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. element ui 版本升级

    element ui 版本升级 1. 卸载之前版本 npm uninstall element-ui 2.重新安装element-ui npm i element-ui 3.就如package.jso ...

  2. .net core 静态类获取appsettings

    注入获取 通过IConfiguration直接获取的方法官方文档里就有,可以直接看这里 如:appsettings.json { "Position": { "Title ...

  3. 关于数据库客户端navicat创建新连接失败的问题

    如图是navicat创建新连接的截图: 我就有一个疑问了,主机填localhost或者127.0.0.1都是本机,自然是可以连接成功的,那如果填本机的IP地址会怎样呢? 如下图,出现了报错: 说我的访 ...

  4. 在Github上建立自己的个人主页

    目录 注册Github账号 登录Github账号 建立新仓库 选择个人主页的主题 注册Github账号 首先打开Github的主页(https://github.com/),点击右上角的sign up ...

  5. redis入门指南(二)—— 数据操作相关命令

    写在前面 以下绝大部分内容取材于<redis入门指南>,部分结合个人知识,实践后得出. 只记录重要,明确,属于新知的相关内容,杜绝冗余和重复. 字符串 1.字符串类型是redis中最常见的 ...

  6. 理解css中Grid布局,在项目中如何实现grid页面布局

    简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...

  7. windows快速安装redis

    下载地址:https://github.com/microsoftarchive/redis/releases 下载解压,命令行:redis-server.exe redis.windows.conf

  8. 状压DP之LGTB 与序列

    题目 思路 这道题竟然是状压DP,本人以为是数论,看都没看就去打下一题的暴力了,哭 \(A_i\)<=30,所以我们只需要考虑1-58个数,再往后选的话还不如选1更优,注意,1是可以重复选取的, ...

  9. Rancher1.6 部署prometheus

    一.rancher基础配置 镜像:prom/prometheus:latest 映射端口:9090:9090 服务连接: blackbox-exporter cadvisor node-exporte ...

  10. Windows 用来定位 DLL 的搜索路径

    参考自:https://msdn.microsoft.com/zh-cn/library/253b8k2c.aspx 通过隐式和显式链接,Windows 首先搜索“已知 DLL”,如 Kernel32 ...