<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件修饰符之使用$event与$prevent修饰符操作表单</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="hdcms">

    <!--<form action="" @submit="post($event)">-->

    <!--prevent 写入到代码里面等同于写入js中。阻止提交事件发生-->

    <form action="" @submit.prevent="post('lantian')">

        <h1>{{times}}</h1>

        <button>提交</button>

    </form>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            times: new Date()

        },

        methods: {

//            post($event) {

//                //preventDefault() 阻止元素发生默认的行为

//                event.preventDefault();

//                alert('lantian');

//            },

            post(num) {

                alert(num);

            }

        }

    });

</script>

</body>

</html>

　　

026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单的更多相关文章

  1. Vue 时间修饰符之使用$event和prevent修饰符操作表单

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单

    提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 027——VUE中事件修饰符：stop prevent self capture

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. VUE中事件修饰符：stop prevent self capture

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  5. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

    ==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...

  7. 028——VUE中事件修饰符once

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue中事件代理

    由于在vue实例内部,this指向了实例本身,所以在编写事件代理的时候,用e.currentTarget引用绑定事件代理的元素,e.target引用事件目标元素.刚刚不注意想用this引用代理元素报错 ...

  9. vue中事件冒泡规则和事件捕获规则

    <div id="app"> <div @click="handleClickOne"> <p @click="hand ...

随机推荐

  1. pyinstaller 打包生成的exe文件，在其他电脑上报错

    解决方法: 1.第一种情况,在打包的时候不要加参数-w,看一下执行exe文件后出现的报错再看下一步的行动 2.应该是需要装一个VC 2015 x64(下载地址:https://www.microsof ...

  2. java中内存泄露和内存溢出

    内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就是内存溢出. ...

  3. OpenCV KNN 之 使用方法

    http://blog.csdn.net/WL2002200/article/details/43149229 OpenCV 中KNN构造函数如下. C++: CvKNearest::CvKNeare ...

  4. 为Android添加开机启动脚本

    转:https://blog.csdn.net/u014316462/article/details/76438611 本文介绍了一种在Android 4.2.2源码中添加.修改文件或者代码,来达到使 ...

  5. 【分库分表】sharding-jdbc—分片策略

    一.分片策略 Sharding-JDBC认为对于分片策略存有两种维度: 数据源分片策略(DatabaseShardingStrategy):数据被分配的目标数据源 表分片策略(TableShardin ...

  6. [日志] spring boot + logback 日志输出配置

    一.输出日志到控制台 springboot有很多starter(参考starter)方便快速构建项目依赖组件,logback是springboot默认的日志组件,启动即可看到打印在控制台输出的info ...

  7. 实现类似mysql group_concat的功能

    实现类似mysql group_concat的功能 SELECT SG.Id ,SG.GroupName ,HostNames = STUFF((SELECT ',' + SH.[HostName] ...

  8. click事件多次触发 jQuery

    jQuery 中 click事件会累计绑定 例如下列代码: aNode.click(function(){ bNode.click(function(){ console.log('haha'); } ...

  9. 前端小炒的win7使用笔记（收藏篇）

    收藏篇 此中技巧及使用笔记,大多为冲浪时无意间发现,进而总结,其中种种小超都已一一验证过. 传说中WIN7上帝模式可查看200多项系统设置项目 在桌面创建文件夹,命名为 GodModel.{ED7BA ...

  10. DispatcherServlet讲解

    1.1.1.DispatcherServlet作用DispatcherServlet是前端控制器设计模式的实现,提供Spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring I ...