Vue -- v-on指令

最新推荐文章于 2023-05-21 02:57:55 发布
最新推荐文章于 2023-05-21 02:57:55 发布
阅读量106 收藏
点赞数
分类专栏： 前端 Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43712409/article/details/119739610
版权
前端 同时被 2 个专栏收录
56 篇文章 0 订阅
订阅专栏
Vue
13 篇文章 0 订阅
订阅专栏

v-on使用文档

  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 事件的后面跟上 .修饰符 可以对事件进行限制
  • .enter 可以限制触发的按键为回车
  • 事件修饰符有多种
<!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>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <!-- 按回车触发 -->
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function (p1, p2) {
                    console.log("doIt函数触发");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function () {
                    alert("回车触发");
                }
            }
        })
    </script>
</body>

</html>
小王的进阶之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-ydui离线文档
04-12
3. **指令系统**：Vue.js 自带一套指令系统，如v-if/v-else、v-for、v-bind、v-on等，它们是预定义的特殊属性，简化了DOM操作。 4. **虚拟DOM**：Vue.js 使用虚拟DOM来提高性能，减少不必要的DOM操作，提高应用的...
petite-vue-main.zip
07-16
5. **指令（Directives）** - 如v-if、v-for、v-bind和v-on等，理解它们的工作原理和使用场景。 6. **组件化** - 创建自定义组件，实现代码复用和模块化。 7. **生命周期钩子** - 了解Petite Vue中的beforeCreate、...
Vue的 v-on 指令
eyes++的博客
05-14 160
<!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>Do
v-on及其常用修饰符
qq_42764387的博客
02-18 1339
v-on v-on可以监听DOM事件，同时在触发时可以运行一些js代码，其语法糖为@ v-on可以绑定单个事件 <button v-on:click="myClick()">button</button> v-on可以绑定多个事件 <div v-on="{mouseout:outTest,mouseover:overTest}">click</div> 为了使方法仅仅处理数据逻辑，而不是处理DOM事件的细节，v-on的事件修饰符就是解决这个问题的
关于vue 中@click="delete"出现报错
heibai212的博客
05-06 4455
关于@click="delete"报错 // 购物车点击事件 <div class="top"> <span>购物车</span> <span @click="delete">编辑</span> </div> methods: { fun () {...
‘v-model‘ directives require the attribute value which is valid as LHS vue/valid-v-model
qq_58719130的博客
05-21 4104
'v-model' directives require the attribute value which is valid as LHS vue/valid-v-model
vue报错: [eslint-plugin-vue] [vue/valid-v-for] [vue/no-parsing-error]
票票的博客
07-08 3325
具体报错信息： [vue/valid-v-on] Avoid using JavaScript keyword as "v-on" value: "handleSearchTable".eslint-plugin-vue [vue/no-parsing-error] Parsing error: control-character-in-input-stream.eslint-plugin-vue [vue/no-parsing-error] Parsing error: Unexpected cha
vue-animate-onscroll：一个简单的组件，可在元素滚动到视图中时对其进行动画处理
02-03
Vue动画控制一个简单的Vue指令，可在元素滚动到视图中时对其进行动画处理。安装npm install vue-animate-onscroll# oryarn add vue-animate-onscroll建立导入到您的Vue应用程序import Vue from 'vue'import ...
详解vue中v-on事件监听指令的基本用法
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的特性，包括`v-on`事件监听指令，用于处理用户交互。本文将深入解析`v-on`的基本用法，并通过实例演示如何在Vue应用中有效地监听和响应用户事件。 一、...
vue-devtools
06-13
3. **事件监听**：追踪组件间通信，包括$on、$emit和$v-on绑定的事件。 4. **性能分析**：利用Profiler插件可以测量组件渲染和更新的性能，找出潜在的瓶颈。 5. **时间旅行**：通过快照记录和回放，可以查看应用状态...
vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法
weixin_30615767的博客
06-26 1693
在用vscode编写vue代码时，因为安装的有vetur插件，所以当代码中有v-for语法时，会提示 [vue-language-server] 'v-for' directives require 'v-bind:key' directives. 我们知道vue在升级到2.2后，当在组件中使用v-for时，key现在是必须的。 下面是vue官方文档的说明： 回头...
vue解决v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key‘ directives
Brave的博客
09-02 1万+
v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key’ directives.eslint-plugin-vue 原因：这是因为我安装的enlint插件，它会对代码的规范进行检查。我这里用到v-for，但它是需要key值的，当不根据它的代码规范来执行的时候，自然而然就报错了。 解决办法：根据需求，不需要的话去掉eslint 中的代码规范检查即可。 找到 文件->首选项->设置 里面输入：vetur v
vue项目运行报错：error ‘v-model‘ directives require no argument vue/valid-v-model
qq_39480297的博客
07-19 3623
解决vue项目运行报错：error 'v-model' directives require no argument vue/valid-v-model
Custom Components「自定义组件」翻译
王小北的技术博客
07-10 1551
这篇文章是 Google 官方文档 Custom Components 的翻译。 前言由于打算开始好好学习自定义 View 了，就打算边学边写点文章记录自己的学习过程。不知道从哪里下手，干脆看看官方的文档吧，于是就想着翻译出来了。不过我是个英文菜鸡，翻译什么的更不要提了。翻译的很差劲，不少地方实在编不出来的，只好寻求了 Google 翻译 的帮助，说实话，比我自己翻译的强多了。
Vue自定义指令实现v-on及v-model
lightning_1的博客
12-02 1597
我们来模仿v-on和v-model实现简易的v-on和v-model，带你彻底理解自定义指令的使用，运行前请先引入vue2.x
解决vue v-for报错[vue/valid-v-for] Custom elements in iteration require ‘v-bind:key‘ directives.eslint-p
qq_41654729的博客
06-02 1129
报错：[vue/valid-v-for]Custom elements in iteration require ‘v-bind:key’ directives.eslint-plugin-vue 原因：这是因为我安装的enlint插件，它会对代码的规范进行检查。我这里用到v-for，但它是需要key值的，当不根据它的代码规范来执行的时候，自然而然就报错了。 解决办法：根据需求，不需要的话去掉eslint 中的代码规范检查即可。 找到 文件->首选项->设置 里面输入：vetur valida
ESLint: v-if directives require that attribute value.(vue valid-v-if)
热门推荐
ZYJL的博客
05-27 1万+
在使用vue进行前端开发时候，当 v-if 和 v-for 在同一个表签中使用时，ESLint总会给你一个“红线”，对于有强迫症的我说看着就非常不舒服，去查看了vue的相关资料发现，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用！ 解决方法 就是把 v-if 和 v-for 分别放在两个标签中 如： <div v-if="auth.listAuths">
解决 three.js 模型颜色偏差问题
qq_43712409的博客
09-27 8189
纹理 纹理中包含的颜色信息（.map, .emissiveMap, 和 .specularMap）在glTF中总是使用sRGB颜色空间，而顶点颜色和材质属性（.color, .emissive, .specular） 则使用线性颜色空间。在典型的渲染工作流程中，纹理会被渲染器转换为线性颜色空间，进行光照计算，然后最终输出会被转换回 sRGB 颜色空间并显示在屏幕上。除非你需要使用线性颜色空间进行后期处理，否则请在使用glTF的时候将WebGLRenderer进行如下配置： renderer.outputEn
vue v-bind 与 v-on
最新发布
01-18
Vue中的v-bind和v-on是两个常用的指令，用于属性绑定和事件绑定。 1. v-bind用于属性绑定，可以将Vue实例中的数据绑定到HTML元素的属性上。通过v-bind指令，可以动态地将Vue实例中的数据绑定到HTML元素的属性上，实现数据的动态更新。例如： ```html <div v-bind:class="className"></div> ``` 上述代码中，v-bind:class将Vue实例中的className属性绑定到div元素的class属性上。 2. v-on用于事件绑定，可以在HTML元素上监听指定的事件，并在触发事件时执行相应的方法。通过v-on指令，可以将Vue实例中的方法绑定到HTML元素的事件上。例如： ```html <button v-on:click="handleClick">点击按钮</button> ``` 上述代码中，v-on:click将Vue实例中的handleClick方法绑定到按钮的点击事件上。 综上所述，v-bind用于属性绑定，v-on用于事件绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值