<!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. 如何将python3.6软件的py文件打包成exe程序

    在我们完成一个Python项目或一个程序时,希望将Python的py文件打包成在Windows系统下直接可以运行的exe程序.在浏览网上的资料来看,有利用pyinstaller和cx_Freeze进行 ...

  2. DevStore分享：详析消费者十大心理学

    做生意,其实就是一个恋爱的过程,让用户找到你.了解你,爱上你.而这个过程中的关键点就是用户.只要与用户心理相关的,那么就会影响到他们的购买决策.而作为卖方的你,就应该了解消费者心里面在想些什么. 第一 ...

  3. 如何建立DB2分区数据库？（转）

    欢迎和大家交流技术相关问题:邮箱: jiangxinnju@163.com博客园地址: http://www.cnblogs.com/jiangxinnjuGitHub地址: https://gith ...

  4. 验证APNS证书的有效性

    openssl s_client -connect gateway.sandbox.push.apple.com:2195 -cert xxx.pem

  5. CentOS 相关软件安装 与 Siege压测

    1.登录linux机器 a.打开mac的钥匙串 b.ssl root@ip c.输入密码 常用命令: cat /proc/version  查看系统版本 cat /etc/issue control ...

  6. HTML DOM setInterval() 方法

    定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被 ...

  7. SqlMapConfig.xml配置

    总结自:https://blog.csdn.net/d582693456/article/details/79886780 SqlMapConfig.xml是mybatis的核心配置 properti ...

  8. 20145328 《Java程序设计》第9周学习总结

    20145328 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 16.1JDBC 16.1.1JDBC简介 JDBC(Java DataBase Connec ...

  9. 二叉树的层次遍历（Java代码实现）

    与树的前中后序遍历的DFS思想不同,层次遍历用到的是BFS思想.一般DFS用递归去实现(也可以用栈实现),BFS需要用队列去实现. 层次遍历的步骤是: 1.对于不为空的结点,先把该结点加入到队列中 2 ...

  10. vCenter Server 6.7 集成 vRealize Orchestrator 7.5

    第一步,安装独立Orchestrator 7.5,并初始化   Orchestrator ova导入和初始化步骤省略...请参考官方文档... Orchestrator 初始化中的认证源需要和vCen ...