前端---【Vue2基础更新:介绍事件绑定、传参、修饰符，计算属性】

已于 2023-07-14 20:18:22 修改
阅读量1.1k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-05-29 21:25:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61307468/article/details/130900332
版权

目录

1. 事件处理

1.1 事件绑定

1.2 事件传参

1.3 事件修饰符

1.4 键盘事件

1.4.1js键盘事件

 1.4.2vue键盘事件

2.计算属性案例

1. 事件处理

1.1 事件绑定

事件绑定是 Vue 中实现视图和业务逻辑交互的一种方式。将 DOM 元素上的原生事件绑定到 Vue 实例中的方法。当原生事件触发时,Vue 自动调用对应的实例方法。

  1. 使用v-on:xxx 或 @xxx 绑定事件，xxx是事件名，同原生DOM事件名。

    <button v-on:click="showTel">点我查看学校电话1</button>
<button @click="showTel">点我查看学校电话2</button>

        第一中是不间写的形式，第二种是简写的形式 

         2.事件的回调函数，要配置在methods中（data中写数据、methods中写方法）。

   3.Vue在触发事件回调时，会传入一个默认的参数 ——事件对象(event)

   4.methdos中的函数最终也会出现在vm上（但不存在数据代理）。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>事件绑定</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="demo">
        <h2>你笑起来真好看</h2>
        <button v-on:click="show1">点我查看歌曲</button>
        <hr>
        <H2>歌曲你的楼兰</H2>
        <button @click="show2">我的楼兰</button>
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#demo",
        data: {
            konwlege: "vue"
        },
        methods: {
            show1(event) {

                console.log("this");
            },
            show2: function () {
                console.log("你总不小心把倩影挂在月亮上面");
            }
        }
    })

</script>

</html>

  

1.2 事件传参

  1. 不传递参数：@click="test1" ，test1方法会收到一个event（事件对象）。

  2. 传一个参数：@click="test2(6)" ，test2方法只会收到一个6。

  3. 传多个参数：@click="test3(6,7,8)" ，test3方法会收到：6、7、8。

  4. 传参+事件对象：@click="test4(6,$event)"，test4方法会收到：事件对象、6。

事件传参代码举例：

第一步引入Vue文件

第二步 编写容器

第三部 New vue

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>1-1事件传参</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="demo">
        <button v-on:click="handleClick($event)">Submit</button>

    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
        el: "#demo",
        data: {
            sheep: "美羊羊啊",
            tel: "18000250000",
        },
        methods: {
            handleClick(event) {  // event 是原生 DOM 事件对象
                console.log(event.target)
            }
        }
    })
</script>

</html>

 

  5.传递的参数也可以是data中的数据，例如@click="test5(school)"。

1.3 事件修饰符

  1. prevent：可以阻止默认行为。

  2. stop：可以阻止冒泡。

  3. once：事件只触发一次。

  4. 事件修饰符可以串联：

    <div @click="test" class="wraper">
    <a href="xxx" @click.prevent.stop="test">按钮</a>
</div>

 事件修饰符代码示例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>3-事件修饰符</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="demo">
        <h2>你炸了{{yanyan}}</h2>
        <form action="https://www.baidu.com">
            <Button @click.prevent="showInfo">点我显示提示信息</Button>

    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
        el: "#demo",
        data: {
            yanyan: "沸羊羊"
        },
        methods: {
            showInfo(event) {
                // 阻止冒泡
                event.stopPropagation();
                alert("是美羊羊炸了");
            }
        }
    })

</script>

</html>

1.4 键盘事件

这里主要讲的是Vue里面的键盘事件，学习的过程容易学了后面，忘记了前面，这里先回顾一下JavaScript里面的键盘事件

1.4.1js键盘事件

可以使用以下方式在 JS 中绑定键盘事件:

element.addEventListener('keyup', (event) => {
  // 键盘事件逻辑
})

 前端中CSS+JS键盘事件代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>键盘事件1-1</title>
    <style>
        input {
            width: 200px;
            height: 30px;
            border: 1px solid #999;
        }

        /* 获得焦点时 */
        input:focus {
            background: #eee;
            outline: none;
        }

        /* 鼠标悬停时 */
        input:hover {
            border-color: blue;
        }

        /*元素被激活时鼠标点击或按键按下时 */
        input:active {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <input type="text">
    <script>
        // JS 中绑定键盘事件:
        const input = document.querySelector('input')
        //在 CSS 中,可以使用以下选择器监听键盘事件:
        input.addEventListener('keyup', (event) => {
            if (event.key === 'Enter' || event.keyCode === 13) {
                console.log('回车键被按下')
            } else if (event.ctrlKey && event.key === 's') {
                console.log('Ctrl + s 被按下')
            }
        })

        input.addEventListener('click', () => {
            console.log('输入框被点击')
        })
    </script>

</body>

</html>

运行截图中显示，点击输入框的时候，颜色会根据CSS设置的样式变，在控制台中可以看出键盘事件的触发。

 1.4.2vue键盘事件

现在这里开始讲vue中的键盘事件

  • Vue中的按键别名：

    1. 回车 => enter

    2. 删除 => delete （退格 、 删除 按键）

    3. 退出 => esc

    4. 空格 => space

    5. 换行 => tab （必须配合keydown去使用）

    6. 上 => up

    7. 下 => down

    8. 左 => left

    9. 右 => right

  • 也可以使用event.keyCode去指定具体的按键，例如：@keyup.13 绑定回车。

  • 有四个系统修饰键，用法比较特殊（了解即可），分别是：ctrl、alt、shift、meta，规则如下：

    1. 若配合keydown使用：正常触发事件。

    2. 若配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

      

​
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>4-键盘事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
    input {
        width: 300px;
    }
</style>

<body>
    <!-- 准备好一个容器-->
    <div id="demo">
        <h2>你炸了{{yanyan}}</h2>
        <!--键盘事件-->
        <input @keyup.enter="show" type="text" placeholder="按下回车提示用户输入内容"><br>
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
        el: '#demo',
        data: {
            yanyan: "沸羊羊",

        },
        methods: {
            show(event) {
                console.log(event.target.value);
            }
        }
    })
</script>

</html>

​

2.计算属性案例

这里用到的知识点分析：

1. 使用插值语法 {{hello}} 将 data 中的 hello 值渲染在 h2 标题中。

2. 使用 v-model 双向绑定 input 和 data 中的 firstName 和 lastName。 input 的值变化会更新 data,data 的变化也会更新 input。

3. 定义 fullName 计算属性,在 h2 标题和多个 span 中使用 {{fullName}} 渲染。fullName 计算属性会返回 firstName 和 lastName 的拼接值,并在依赖的 data 变化时重新计算渲染。

4. 定义 methods 中的 add 方法,用于点按钮时使 sum 增加 1。按钮的 @click 绑定了该方法。

5. 在 computed 属性中定义 fullName,它包含一个 get 方法来返回拼接后的全名,这样可以避免每次拼接字符串产生新值,提高性能。

6. 在实例化 Vue 时,使用 el 指定挂载元素,data 指定数据,methods 指定方法,computed 指定计算属性。

代码示范：

​
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>06-计算属性get函数</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="demo">
        <h2>今天也在码前端{{hello}}</h2>
        <!--  v-model 双向数据绑定 -->
        姓: <input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{fullName}}</span> <br>
        全名：<span>{{fullName}}</span> <br>
        全名：<span>{{fullName}}</span> <br>
        全名：<span>{{fullName}}</span> <br>
        全名：<span>{{fullName}}</span> <br>
        全名：<span>{{fullName}}</span> <br>
        <hr>
        <h2>当前求和为：{{sum}}</h2>
        <button @click='add'>点我sum+1</button>
        <!--写一个计算属性-->


    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#demo',
        data: {
            hello: '霖',
            firstName: '杨',
            lastName: '幂',
            sum: 0,
        },
        methods: {
            a() {

            },
            add() {
                this.sum += 1
            }
        },
        computed: {
            fullName: {
                // get函数何时调用？—— 有人使用fullName时
                // get函数中的this是谁？ —— vm
                get() {
                    console.log('get')
                    return this.firstName.slice(0, 1).toUpperCase() + this.firstName.slice(1) + '-' + this.lastName
                },
            }
        }
    })


</script>

</html>

​

代码运行截图

今天也在码前端–霖
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue2计算属性如何传参
carcarrot的博客
07-19 2320
Vue2官网并没解释计算属性应该怎么传值，但是呢，通过闭包的方式实际上是可以给计算属性传参的
vue2计算属性传参数
weixin_49245914的博客
04-28 746
计算属性中传递参数
VUE3 学习笔记（4）：VUE 事件处理、传参、事件修饰
众纳百川的博客
05-28 655
常见的Web事件页面事件Onload --加载Onunload --取消Onscroll --滚动Onresize --大小改变表单事件Onsubmit --提交onchange --变更Onselect --选择Onreset --重置焦点事件Onfocus --得到焦点Onblur --失去焦点鼠标事件Onclick --点击Ondbclick --双击onmouseup --松开Onmousemove --移动Onmouseover --停留。
vue学习笔记——计算属性传参
qq_49080170的博客
09-12 888
vue学习笔记——计算属性传参
vue中的事件绑定
ead_gbe的博客
06-27 5408
按钮1</button><button class="btn" v-on:click = "showInfo2(66)">按钮2
Vue2中的绑定事件和事件修饰符
weixin_64770583的博客
07-13 1411
绑定事件和事件修饰符
vue-async-computed：Vue.js的异步计算属性
02-06
使用此插件，您可以在Vue中具有异步计算的计算属性。 如果不使用此插件，则无法执行以下操作： new Vue ( { data : { userId : 1 } , computed : { username ( ) { // Using vue-resource return Vue . ...
探索 v-on 之奥秘一：事件及各类修饰符的深度剖析与案例展示
最新发布
06-20
总结起来，Vue 的 `v-on` 指令和事件修饰符为前端开发者提供了灵活的事件处理能力，使我们能够更好地控制用户交互，构建出更加动态和响应式的用户界面。了解并熟练掌握这些知识点，对于提升 Vue 开发技能至关重要。...
前端Vue日常工作中-Vue事件修饰符
01-01
前端Vue日常工作中--Vue事件修饰符
vue中el-input绑定键盘按键(按键修饰符)
10-15
主要介绍了vue中el-input绑定键盘按键(按键修饰符)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现在v-html的html字符串中绑定事件
10-16
今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中组件传参的几种方法
zhangkunsir的博客
05-03 9516
以上是Vue中组件传参的三种常用方法，分别是Props、$emit和Provide/Inject。通过这些方法，我们可以在组件之间传递数据，实现组件之间的通信。
Vue2（一）初始vue、模板语法、数据绑定、数据代理、事件处理、计算和监视属性
DogEgg_001的博客
07-09 226
基本原理：通过Object.defineObject()把data对象中的所有属性添加到vm中，为每一个添加到vm中的属性指定一个getter和setter，在getter和setter中去操作（读、写）data中对应的属性。弊端：每次修改姓或名后，fullname()方法会被重新调用，且若多次调用函数，会大大增加系统的压力，不利于Vue轻便减负的特点。监视a属性，也可以监视到a属性内的多层属性；在watch属性中写入需要监视的属性a，handler函数用于在修改时自动调用，可包含两个参数，新值和旧值。
Vue事件绑定
过客如期的博客
05-26 7301
一，原生事件绑定 1.在原生js中，我们有三种方式为一个属性绑定事件，分别为： 在HTML标签上添加事件属性 在js中使用html节点的事件属性绑定事件处理程序，例如node.onclick=function(){} 在js中使用addEventListener("click",function(){},false) 想了解更多，可参考js原生事件绑定 二，Vue事件绑定 v-on: 1.在vue.........
【Vue2】Vue2中的事件和方法全解
Jessieeeeeee的博客
01-17 3641
Vue2中的事件和方法全解
vue-计算属性computed如何传参
qq_41910413的博客
03-09 3991
vue-计算属性computed如何传参
【Vue2】事件修饰符
weixin_44431073的博客
05-19 781
vue中一共有六个事件修饰符 1、prevent 写法示例：@click.prevent="xxx' 说明：阻止默认事件的触发 案例： <a href="https://www.baidu.com/" @click="showInfo"></a> 先执行showInfo方法，然后跳转到百度。如果只是想执行showInfo方法， 而不跳转，那么可以用prevent修饰。 <a href="https://www.baidu.com/" @click.preve...
拜托别再用computed传参了，来看看computed原理吧
小王的技术库
05-10 6150
前提 最近本小白接手了个五年老前端做的项目，技术栈是vue2 对于这种临时接盘的项目我内心是非常排斥的， 当然得先学习学习一下五年老前端的代码 结果一看，我还是皱起了眉头 我看到它的computed是这样写的（下面是模拟代码） computed:{ hasXXX(){ return function(b){ return this.a + b } } } // <div>{{hasXXX('111')}}</div> 这是一种compute
vue2传值方式总结 （十一种方法）
qq_70703397的博客
08-10 7968
通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 ，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟root，可以获取根组件实例。（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的。（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法 ​。
Vue2 基础教学文档-旨意为简单易懂
03-08
2. 模板语法：Vue提供了丰富的模板语法，如v-if和v-show用于条件渲染，v-for用于循环遍历，v-bind和v-on用于属性绑定和事件监听等。 3. 视图组件：Vue的核心在于组件化，允许开发者将复杂的UI拆分成独立的、可复用的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值