vue学习笔记5-事件绑定-v-on

用于绑定事件用。

<button onclick="clickit()">点我</button>
function clickit(){
    alert("ok")
}

这样可以实现事件绑定需求,在vue中使用v-on也可以进行事件绑定

<button v-on:click="clickit()">点我</button>

但是效果没了。 因为vue的方法定义只能定义在vue中

<button v-on:click="clickit">点我</button>
var vm = new Vue({
    el : "#app",
    methods : {
        clickit : function(){
            alert("vue内部点击了")
        }            
    }
})

这是第一种v-on的使用方式 第二种——

<button v-on="{click:clickit}">点我</button>

效果相同,但还是第一种更多,因为v-on也可以进行简写,可以直接用@后面接事件。

<button @click="clickit">点我</button>

效果也相同。 而且vue也封装了好多方法,可以用这些方法简介开发 例如@keyup.enter="a",如果按下键盘的时候按下的是回车,那么就可以直接触发a方法。 详细在https://cn.vuejs.org/v2/guide/events.html中有记载 菜鸟教程里面也有http://www.runoob.com/vue2/vue-events.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听Allen瞎扯淡

Sed 命令详解

sed是stream editor的简称,也就是流编辑器。它一次处理一行内容,处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern spa...

10510
来自专栏Spring相关

Spring Boot遇到的某些问题

因为项目要访问本地硬盘的文件所以要去Tomcat的server.xml里配置Context ,

14650
来自专栏Spring相关

Spring Boot遇到的某些问题

在spring整合thymeleaf模板后,页面中文将显示乱码,需要设置web.xml和springmvc-servlet.xml配置才能使中文不乱码。

14620
来自专栏Spring相关

第6章—渲染web视图—使用Thymeleaf

长期以来,jsp在视图领域有非常重要的地位,随着时间的变迁,出现了一位新的挑战者:Thymeleaf,Thymeleaf是原生的,不依赖于标签库.它能够在接受原...

9420
来自专栏Spring相关

Springboot用官方建议访问Html页面并接传值

我们以前通常习惯用webapp来放置jsp页面,但是到了Springboot中,官方建议用Static文件夹来存放及静态的资源,

1.2K40
来自专栏lgp20151222

JSP中的include的两种用法

此时引入的是静态的jsp文件,它将引入的jsp中的源代码原封不动地附加到当前文件中,所以在jsp程序中使用这个指令的时候file里面的值(即要导入的文件)不能带...

11420
来自专栏finleyMa

react学习系列4 组件生命周期

组件的生命周期非常重要。官方文档 已经就讲的比较清楚了 找了半天发现下面的图最清晰直观(点击放大):

10740
来自专栏大史住在大前端

webpack4.0各个击破(1)—— html部分

对于浏览器而言,html文件是用户访问的入口点,也是所有资源的挂载点,所有资源都是通过html中的标记来进行引用的。而在webpack的构建世界里,html只是...

15430
来自专栏Spring相关

springboot自定义错误页面

31220
来自专栏Spring相关

Css权重解析

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具...

17920

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励