Vue之参数传递、 v-on的简化写法、事件处理函数的简化写法

最新推荐文章于 2023-08-19 11:59:24 发布
最新推荐文章于 2023-08-19 11:59:24 发布
阅读量517 收藏
点赞数 1
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46988935/article/details/118940975
版权

文章目录

回顾

vue中绑定事件的基本语法之总结：

  • 在vue中绑定事件是通过v-on指令来完成的，语法为----v-on：事件名
  • 在v-on：事件名的赋值语句中是当前事件触发调用的函数名
  • 在v-on中事件的函数统一定义在vue实例的methods属性中
  • 在vue定义的事件中this指的就是当前vue实例，日后可以通过this获取实例中的相关数据或调用methods中相关方法

一、vue事件参数传递

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <h1>{{msg}}</h1>
            <h1>{{count}}</h1>
            <button v-on:click="incrementAge1">点击每次年龄+1</button>
            <!--      注意传参           -->
            <button v-on:click="changeAge10(10)">点击每次年龄+10</button>
            <!--     当参数多时，参数可以设置为对象       -->
            <button v-on:click="test({count:1,msg:'hello'})">点击每次年龄+1,同时msg+"hello！"</button>

        </div>

    </body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "悬悬小",
            count:0
        },
        methods: {
            incrementAge1:function () {
               this.count++;
           },
            changeAge10: function (count) {
               // console.log(this.count);
                this.count+=count;
            },
            test: function (param) {
                // console.log(this.msg);
                //注意取参的方式
                this.count+=param.count;
                this.msg +=param.msg;
            }

        }
    });
</script>
<!--需求：
定义三个按钮
1.点击每次年龄加1
2.点击每次年龄加10
3.点击每次年龄加1，同时msg+“你好！”
-->

二、vue事件的简化语法

  • 通过 @事件名 = 事件处理函数名 简化v-on事件绑定
  • 通过 函数名（）{} 简化函数的书写
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <h1>{{msg}}</h1>
            <h1>{{count}}</h1>
            <!--          v-on指令的简化写法   @事件名=事件处理函数名  -->
            <button @click="incrementAge1">点击每次年龄+1</button>
            <button @click="incrementAge2(2)">点击每次年龄+2</button>


        </div>

    </body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "悬悬小",
            count: 0
        },
        methods: {
            incrementAge1:function () {
                this.count++;

            },
            //简化函数的写法 函数名（）{}
            incrementAge2(count){
                this.count +=count;
            }


        }
    });
</script>

总结

以上就是vue中事件绑定语法的全部知识。

悬悬小
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue写法-使用js高阶函数实现多条件搜索功能
06-27
之前出过一个react写法的前端搜索（[react写法——使用js高阶函数实现多条件搜索功能] 今天我们再研究一下vue中怎么实现。 react和vue有什么区别？ 这个区别要细说可太多了，但是最终都能归为语法不同，封装方式不同...
vue3-vite-ts:学习vue3的新属性的同时，尝试ts的写法
03-08
3. **模板类型**：Vue3的模板现在可以利用TypeScript的模板字面量类型，使得我们可以对模板中的动态属性和事件处理函数进行类型约束。 4. **Composition API的类型支持**：由于Composition API的函数式特性，...
Vue-指令之v-on（简写@-04）
热门推荐
404路西法的博客
04-20 1万+
v-on: 事件绑定 给元素进行事件绑定，需要通过v-on:指令实现. 事件类型： 鼠标事件：onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown等等 键盘事件：onkeyup onkeydown onkeypress 等等 （一）语法： <标签 v-on:click="事件处理函数名...
vue之vuex的简单使用简化写法
飞一样的编程
11-27 589
store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //状态对象 const state={ counter:0 } //包含多个更新state函数的对象 const mutations={ ADD(state){ state.counter++ },JJ(state){ state.counter-- } } //包含多个事件回调函数的对象,actions调用mutations cons
Vue.js 中的 v-bind 和 v-on 简写
it_xushixiong的博客
06-08 3303
在本文中，我们介绍了 Vue.js 中v-bind和v-on的简写形式，以及如何使用它们。v-bind的简写形式是使用冒号来代替，甚至可以直接使用属性名来绑定属性。v-on的简写形式是使用符号来代替，甚至可以直接使用方法名来绑定事件。这些简写形式可以让代码更加简洁易读，提高开发效率。除了上述的简写形式，Vue.js 还有许多其他的指令和特性，例如v-ifv-for、计算属性、侦听器等等。深入学习 Vue.js 可以让你更好地理解前端开发，提高开发效率。
Vue：v-bind/v-on的缩写
drl_blogs的博客
04-26 455
v-on和v-bind 简写 v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> v-on缩写 <!-- 完整语法 --> <a v-on:click="doSomethin...
vue 监听对象某个属性 精简写法
天渺(喵)工作室
06-08 446
直接上代码 ... 'demo.sex':{ handler: function(newValue, oldValue) { ... }, }, ... 这种写法newValue, oldValue 值是正确的 推荐这种写法
Vue组件之间传值（简化版）
计算机硕士的博客
05-11 679
一、父组件传值子组件 1、给子组件添加一个自定义属性，其绑定了父组件的一个变量（不加冒号属性是静态的，加冒号的是动态的） <!-- 父组件 --> <template> <!-- 子组件 --> <child :自定义属性名="父组件的变量"></child> <template> 2、在子组件中通过props属性取出父组件的值 export default { name: "child", props
Vue v-bind动态绑定class实例方法
10-15
在Vue中，`v-bind`指令是用于动态地绑定属性到元素。在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`...
Vue函数式组件-你值得拥有
10-17
Vue函数式组件是一种轻量级的组件实现方式，它与传统的Vue组件相比有着显著的不同。在Vue中，组件通常是一个带有状态、生命周期方法和实例的类。然而，函数式组件则是一个纯函数，它不维护任何内部状态，也不执行...
详解Vue单元测试case写法
08-27
Vue单元测试case写法详解 Vue单元测试case写法是Vue开发中非常重要的一部分。通过单元测试，可以确保Vue组件的正确性和可靠性。本文将详细介绍Vue单元测试case写法的主要步骤和方法。 一、测试框架选择 Vue单元...
vue v-on两种写法
老段的CSDN的博客
05-20 358
<!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>v-o
vue 函数节流
彼岸舞的博客
10-29 464
背景: 　　今天客户在测试的时候,我发现了一个问题,那就是,客户喜欢连续点击一个按钮,这时就会出现很多问题,最大的问题就是前段的ajax并发问题,因为客户的连续点击,同时发送多个请求,如果前面的请求响应比后面的请求响应的时间晚,前面的数据就会覆盖后面的数据,这也是一个常见的问题吧 解决方案: 使用大家众所周知的解决办法,函数节流 函数的节流,应该是个学JS的应该就知道,当初的阿里的月饼门事件.....
Vue中v-text、v-html、v-on的基本语法（二）
y2020520的博客
06-18 1616
本文讲述的是Vue的最基本的语法。v-text、v-html、v-on以及v-on事件的简化语法。只是记录自己学习。【编程不良人】2021最新Vue全家桶系列教程el : "#app" , //指定vue实例作用范围 data : {// 用来vue实例定义一系列数据 msg : "hello vue" , count : 0 , user : {
Vue-案件修饰符
qq_41421033的博客
09-26 142
<html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <form action=""> <div> 用户名： <input type="text" v-on:keyup.delete='clea
绑定事件(v-on)
起名好难呀！
11-21 465
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>绑定事件学习 v-on</title> </head> <body> <div id="app"> <button v-on
Vue-on调用传参--努力搬砖赚钱hh
最新发布
m0_62600503的博客
08-19 68
【代码】Vue-on调用传参--努力搬砖赚钱hh。
vue学习----v-on
qq_42836176的博客
03-22 261
v-on 使用 v-on 介绍 事件监听可以使用 v-on 指令。 通常情况下，我们需要使用一个方法来调用 JavaScript 方法。 v-on 可以接收一个定义的方法来调用。 入门代码 <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> &...
Day19_09_Vue教程之v-on
一一哥
08-06 277
Vue教程之v-on 一.监听事件 v-on 二. HTML <div id="vue"> <button v-on:click="sayHi">点我</button> </div> 注：在这里我们使用了v-on绑定了click事件，并指定了名为sayHi的方法 三.JavaScript 方法必须定义在 Vue 实...
vue3 子传父 v-model 用setup语法糖的写法些
07-15
在 Vue 3 中，你可以使用 `setup` 语法糖来实现子组件向父组件传递数据和更新父组件的 `v-model`。下面是一个示例： ```vue <template> <div> <!-- 子组件 --> <ChildComponent v-model="childValue" /> <p>子组件的值: {{ childValue }}</p> </div> </template> <script> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, setup() { const childValue = ref(''); return { childValue }; } }; </script> ``` 在这个例子中，`ChildComponent` 是子组件，它接收一个 `v-model` 绑定的值 `childValue`。在父组件中，我们使用 `setup` 函数来定义一个名为 `childValue` 的响应式变量，并将其传递给子组件。子组件可以通过修改 `childValue` 来更新父组件的值。 在子组件中，你可以通过 `props` 接收 `childValue` 并将其绑定到一个内部变量上。然后，你可以在子组件中使用 `$emit` 来向父组件发送更新事件。 ```vue <template> <div> <input type="text" :value="value" @input="updateValue($event.target.value)" /> </div> </template> <script> export default { props: ['value'], methods: { updateValue(newValue) { this.$emit('update:value', newValue); } } }; </script> ``` 在子组件中，我们将 `value` 属性绑定到输入框的值，并通过 `@input` 事件监听输入框的变化。当输入框的值发生变化时，我们调用 `updateValue` 方法，并使用 `$emit` 发送一个名为 `update:value` 的事件，将新的值传递给父组件。 这样，在父组件中，我们就可以通过监听子组件发出的 `update:value` 事件来更新父组件的值，并且这个更新会通过 `v-model` 双向绑定到子组件上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值