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

Vue2（初识vue）（三）

2023-08-24 133
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
关键词：
VUE.js vue2
vue2 vue VUE.js
天秤座的码农
目录
相关文章
34789737
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
346 2
哇塞女孩
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
320 137
谢妹纸
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
829 0
我们是幸福一家人
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
366 82
rvblio6ca4cug
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
464 1
34789737
|
5月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
286 0
34789737
|
6月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
498 17
34789737
|
6月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
306 1
34789737
|
6月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
587 0
34789737
|
6月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
295 0