AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue2（初识vue）（三）

2023-08-24 65
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue2（初识vue）

三，事件绑定


事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名”

事件名可以是原生也可以是自定义的。注意函数的定义也要在Vue中，采用methods属性


3.1，在事件对应的方法中获取到事件对象

加括号，加括号一般是需要有额外参数的情况。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <form action="">
            <div>
                <table border="1">
                    <tr>
                        <td>序号</td>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="(stu,index) in person.studentArray">
                        <td>{{index+1}}</td>
                        <td>{{stu.name}}</td>
                        <td>{{stu.age}}</td>
                        <td><button type="button" @click="fun1($event,stu.name)">修改</button></td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                person:{
                    studentArray:[
                        {name:"小豪",age:"18"},
                        {name:"导哥",age:"20"}
                    ],
                },
            } 
        },
        methods:{
            // 声明了一个叫fun1的方法
            fun1(event,name){
                console.log("事件对象",event);
                console.log(name);
            },
        }
    })
</script>
</html>


3.1，事件修饰符-阻止冒泡

冒泡发生的情景：子元素和父元素绑定了相同的事件，然后点击了子元素，父元素也触发了该事件


使用原生js阻止冒泡


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <div @click="fun3">
            外层div
            <div @click="fun3">里层div</div>
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun3(event){
                console.log("sss");
                event.stopPropagation(); // 使用原生js阻止冒泡
            },
        }
    })
</script>
</html>

e9c798d2b33ed97bad5f33890558ba07_54d886a324a845a08a55d778157f647a.png

使用vue事件的修饰符阻止冒泡


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <div @click="fun3">
            外层div
            <div @click.stop="fun3">里层div</div>
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun3(event){
                console.log("sss");
                // event.stopPropagation(); // 使用原生js阻止冒泡
            },
        }
    })
</script>
</html>


2fb7dfa92c9dc8b9e8ebc962ad4a3a2d_0a072106a70e4e25944b0a24e683487f.png


3.2，事件修饰符-阻止默认行为

有些标签是由默认行为的，比如a标签，有个默认的页面跳转。


使用原生js阻止默认行为


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" @click="fun5">百度</a>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun5(event){
                alert("不可跳转！")
                event.preventDefault(); // 使用原生js阻止默认行为
            },
        }
    })
</script>
</html>


f823f4775049e246f333e509fd0b23d5_7dbda6d887534bdb8a6116953e86ee6b.png

使用vue的事件修饰符阻止默认行为


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <a href.prevent="http://www.baidu.com" @click="fun5">百度</a>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun5(event){
                alert("不可跳转！")
                // event.preventDefault(); // 使用原生js阻止默认行为
            },
        }
    })
</script>
</html>

c1d6cdb46628350388e3535539bd315f_cc8588c3b51247789990adce34cd76e0.png


3.3，一次事件

此事件只会执行一次，第二次点击无效


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <div @click.once="fun7">一次事件</div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun7(event){
                console.log("sss");
            },
        }
    })
</script>
</html>


c117bb3de729d2167b9a56c69a23a237_ce3085c450dd4631b814fc54696aad36.png


3.3，键盘事件修饰符

键盘事件修饰符，主要筛选输入特定字符才触发。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <!-- 13表示是输入enter，起的keycode值可以查询 -->
        <input type="text" @keyup.13="change">
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            change(event){
                console.log(event.key,event.keyCode);
            }
        }
    })
</script>
</html>

2c637c8a2c0ff19efa0d44a3d874401b_b80cc1b8b20246d19033a8b78ebd6784.png

文章标签：
JavaScript
关键词：
vue2 vue VUE.js
VUE.js vue2
天秤座的码农
目录
相关文章
无所不能的蛋蛋
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
无所不能的蛋蛋
168 61
甜甜的笑容12378
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
甜甜的笑容12378
16 7
CamilleKing
|
1天前
|
JavaScript API
vue学习（13）监视属性
vue学习（13）监视属性
CamilleKing
8 2
人间真情在哪儿
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
人间真情在哪儿
11 2
谢妹纸
|
1天前
|
JavaScript
vue知识点
vue知识点
谢妹纸
7 2
花非花雾非雾11
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
花非花雾非雾11
15 3
CamilleKing
|
1天前
|
JavaScript 前端开发
vue学习（15）watch和computed
vue学习（15）watch和computed
CamilleKing
8 1
CamilleKing
|
1天前
|
JavaScript
vue学习（14）深度监视
vue学习（14）深度监视
CamilleKing
10 0
mao29955
|
6天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
mao29955
10 0
一定加油呀
|
6天前
|
缓存 JavaScript
Vue中的keep-alive是什么意思？以及如何使用
Vue中的keep-alive是什么意思？以及如何使用
一定加油呀
7 0

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    开箱即用的Vite-Vue3工程化项目模板
  • 3
    vue加载地图，在tab切换到其他页面再切换回来的时候，地图不显示了
  • 4
    【轻松入门vue】vue前后端交互
  • 5
    vue中手机号码+座机号码、邮箱正则校验规则封装
  • 6
    如何写一手漂亮的 Vue
  • 7
    VUE element-ui之form表单中input输入超过规定长度error提醒，并实时显示输入长度，可无限输入
  • 8
    vue3中的四种插槽的介绍-保证让你看看的明明白白！
  • 9
    免费开题报告|基于SpringBoot+Vue的校内跑腿平台
  • 10
    毕设专用 基于Vue的大病保险管理系统 这个开源项目你值得拥有（一）
  • 1
    Vue.js 中父组件调用子组件的方法
    97
  • 2
    Vue.js 中子组件向父组件传值的方法
    56
  • 3
    了解vue3的基本特性和底层原理
    280
  • 4
    【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
    86
  • 5
    【vue】深入探讨vue中组件间多种传值方式
    56
  • 6
    vue组件化开发流程梳理，拿来即用
    61
  • 7
    Vue Router的介绍与引入
    27
  • 8
    Vue3中props的原理与使用
    53
  • 9
    vue中404解决方法
    50
  • 10
    Vue 中如何模块化使用 Vuex
    30

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    基于LNMP搭建WordPress