<!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. DevOps架构实践

    1. 场景 持续部署:业界没有统一明确地定义,简单理解为将集成结果部署到不同的环境供用户使用,并且立即反馈部署结果的实践,其中不同的环境包括:开发环境.测试环境.预发布环境.生产环境 持续部署两个核心 ...

  2. 关于http响应状态码

    http状态返回代码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. http状态返回代码 代码   说明 100   (继续) 请求者应当继续提出请求. 服务器返回此代码表示已 ...

  3. request.getQueryString()代表的含义

    在jsp做分页的时候,有时候我们想获取get请求链接中的参数保留下来. 比如客户端发送 http://localhost/test.do?a=b&c=d&e=f 通过request.g ...

  4. 前端工程师在实现支付功能的时候能做些什么（V客学院技术分享）？

    现在最流行的两种支付微信支付和支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及. 一.业务逻辑 (电商平台为例子) 支付大部分用在电商平台,各种打赏,游戏充值 ...

  5. 【c++ primer, 5e】【函数基础】

    p182~p185: 函数1.在调用函数和执行return语句的同时,也发生了控制权的转移. 2.函数返回值不能是一个数组.(但是可以返回一个包含数组的对象,或者指向数组的指针) 3.重要概念:名字的 ...

  6. [HAOI2017模拟]囚人的旋律

    没有传送门辣. 神奇的DP题. 首先看到这道题第一眼应该想到正解不是在图上搞,肯定要把原图转化成序列. 根据逆序对的性质.每个点和标号大于他的点连边的点,其权值必定要小于该点,而没和他连边的且标号大于 ...

  7. 20145324 《Java程序设计》第6周学习总结

    20145324 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 1.使用输入串流将数据从来源取出 InputStream 使用输出串流将数据写入目的地 OutStream ...

  8. Spring笔记2——Spring中Bean的装配

    1.引言 Spring中,对象无需自己负责查找或创建与其关联的其他对象,而是由容器负责把需要相互协作的对象引用赋予各个对象.创建应用对象之间的协作关系的行为通常称为装配(Wiring),这也是依赖注入 ...

  9. Caffe学习笔记（一）：Caffe架构及其模型解析

    Caffe学习笔记(一):Caffe架构及其模型解析 写在前面:关于caffe平台如何快速搭建以及如何在caffe上进行训练与预测,请参见前面的文章<caffe平台快速搭建:caffe+wind ...

  10. SQLite-C#-帮助类

    public static class SQLiteHelper { private static string connectionString = string.Empty; #region vo ...