<!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. CDOJ 1287 MC挖矿世界(Spfa+set优化)

    题目大意:原题链接 解题思路:此题要求多点最短距离,但是直接套用floyd会超时. 然后我们想直接从每一个点开始bfs就好了,但是还是会TLE,为什么呢? 因为你访问了很多次没有意义的地方,因为有些点 ...

  2. 解决wordcloud导出图片不清楚

    使用WordCloud生成词云图片 本文详细介绍参考自:https://www.jianshu.com/p/fdd0acccf1c5 wordcloud开源项目:https://github.com/ ...

  3. Java枚举类型定义方式

    public enum Method { // get请求 GET("get"), // post请求 POST("post"); private String ...

  4. java字符串分割的小练习

    最近看到一个网友的一个小问题,有关字符串分割的,思考了一下,后面给出代码:碰到一个java字符串判断结尾的问题,发现与c\c++以"\0"判断字符串结尾不同的是,java中字符串是 ...

  5. ServletConfig获取Servlet的公共参数方法

    web.xml配置: <servlet> <servlet-name>AServlet</servlet-name> <servlet-class>AS ...

  6. Shape-in​​side css新属性 几何图形的实现

    https://www.w3cplus.com/css3/css-shapes-101.html

  7. 有道云笔记配合MPic+七牛云 自制MarkDown文档图床(适用Typora)

    注:从有道云笔记v6.5开始,有道云笔记会员可以使用MarkDown有道自带的图床.(但是非会员可以采用下面的七牛云图床+MarkDown方法) 0x00 前言 一直用有道云笔记,粘贴图片,做笔记没问 ...

  8. Django学习笔记之ORM字段和字段参数

    Object Relational Mapping(ORM) 一.ORM介绍 1. ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象 ...

  9. [pixhawk笔记]6-uORB流程及关键函数解析

    本文中将结合代码.文档及注释,给出uORB执行流程及关键函数的解析,由于uORB的机制实现较为复杂,所以本文主要学习如何使用uORB的接口来实现通信.回到上一篇笔记中的代码: #include < ...

  10. elasticsearch搜索集群基础架构

    1.  elasticsearch cluster搭建 http://www.cnblogs.com/kisf/p/7326980.html   为了配套spring boot,elasticsear ...