Vue基础指令（三） - v-on

最新推荐文章于 2022-02-24 16:27:43 发布
最新推荐文章于 2022-02-24 16:27:43 发布
阅读量161 收藏
点赞数
分类专栏： Vue 文章标签： vue指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxw20147854/article/details/82821514
版权

这篇文章介绍Vue基础指令 - v-on。
作用：绑定方法
简写：直接使用@即可

例子：
html：
浏览器显示：

结论：
（1）v-on绑定的是控件的事件
（2）用v-on绑定事件时，事件的前缀on需要省略。例如input的点击事件原生是onclick，绑定时候只能使用click

wxw20147854
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础（Vue的原生指令）
weixin_45368324的博客
04-16 496
逻辑处理 v-show 根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性） 适用于状态切换比较频繁的情况 v-if 根据表达式的值（布尔值），创建或销毁元素 适用于状态切换不频繁的情况 v-else / v-else-if 与 v-else 配合 循环与列表 v-for 根据数据循环渲染 v-for 指令所在的元素及其子元素 可以循环的数据：Array | Obj...
Vue 3.0 基础入门（指令）
Grapelet123的博客
02-06 876
一、Vue简介 数据驱动视图： 在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。 注意：数据驱动视图是单向的数据绑定。 双向数据绑定： 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源。 开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值。 MVVM MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个 HTML 页面都拆分成了如下三个部分： View 表示当前页面所渲染的
vue基础学习之v-on
seven_begain的博客
02-25 272
1.v-on:submit <body> <script type="text/javascript" src="js/vue.js" ></script> <div id="app"> <!-- 作者：offline 时间：2018-02-25
Vue指令之v-on
俊而不逊的博客
12-07 1万+
Vue指令之v-on 目录 Vue指令之v-on 1.v-on怎么使用？ 2.事件名到底写什么呢？ 3.方法名在哪里定义呢？ 4.v-on的简写 5.访问data中的数据,通过this关键字 6.总结 v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。 我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需..
vue基础学习 指令 V-on
dawfwafaew的博客
02-24 830
v-on是绑定事件（方法）的指令，v-on是单击效果的事件，
详解vue中v-on事件监听指令的基本用法
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的特性，包括`v-on`事件监听指令，用于处理用户交互。本文将深入解析`v-on`的基本用法，并通过实例演示如何在Vue应用中有效地监听和响应用户事件。 一、...
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
Vue3基础教程-指令.pdf
最新发布
06-12
### Vue3基础教程-指令详解 #### 一、引言 Vue.js 是一款非常流行的前端框架，它通过简洁的 API 设计使得开发者可以快速构建出响应式的用户界面。Vue3 作为 Vue.js 的最新版本，在原有基础上进行了诸多优化与改进...
VUE的本地应用-V- on
01-20
在Vue中，`v-on`指令是用来处理用户交互的，它允许我们将事件监听器绑定到DOM元素上。通过`v-on`，我们可以响应用户的点击、键盘输入等各种事件，并执行相应的函数。这个功能对于构建动态、交互式的用户界面至关重要...
vue基础资源教程- 学习使用one
05-09
4. **指令**: Vue提供了一系列内置指令，如`v-if`（条件渲染）、`v-for`（循环遍历）、`v-on`（事件处理）和`v-bind`（属性绑定）。这些指令帮助你在模板中实现逻辑控制。 5. **组件化**: 组件是Vue的核心特性，可...
Vue - 自定义组件
热门推荐
梦缘的博客
09-24 2万+
这篇文章介绍Vue的自定义组件。定义全局组件的第一种方式： html代码：定义全局组件的第二种方式： html代码：定义全局组件的第三种方式： html代码： 常用的方式是第三种，原因： （1）在工作中模板中肯定有很多标签，在一个字符串中写入很容易出错，故用第一二种出错率高 （2）将模板提取出来更容易复用定义局部组件的方式： html代码：组件名称的大小写问题： （1）官方强烈推荐要遵循W3C规范...
Vue - 过渡与动画transition
梦缘的博客
09-27 1万+
这篇文章介绍Vue的过渡与动画，主要是用到组件transition。 作用范围：一般搭配v-if、v-show、动态组件、组件根节点来使用。在举栗子之前，我们先说说transition的钩子函数： v-enter：定义上半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除 v-enter-to：定义上半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除 v-enter-active...
Vue基础指令（二） - v-text、v-html
梦缘的博客
09-23 1428
这篇文章介绍Vue基础指令 - v-text和v-html。 作用：替换标签内的文本 例子： html： 浏览器显示： 结论： （1）v-text、v-html两个指令都会替换标签内的所有节点 （2）v-text指令是直接替换，v-html会将数据以html格式进行替换...
Vue - 自定义指令
梦缘的博客
09-23 528
这篇文章介绍Vue自定义指令的方式，以input控件的自动聚焦为例。 定义一个全局指令的自动聚焦例子： html代码： 定义一个局部指令的自动聚焦例子： html代码： 自定义指令的钩子函数（生命周期函数）有bind、inserted、update、componentUpdated、unbind： bind：在指令绑定到元素上时调用，只执行一次。可以在这里进行初始化设置。 inserted：在被绑...
Vue - 过滤器
梦缘的博客
09-23 258
这篇文章介绍Vue过滤器的定义与使用。 定义全局过滤器的例子： html代码： 定义局部过滤器的例子： html代码： 结论： （1）在定义局部过滤器时，必须加s，使用filters （2）在function中，必须有返回值，否则在{{ }}要替换的地方会显示空 （3）在function中，第一个参数data必定为要处理的数据，第二个参数开始才是传入的参数。如function(data，参数......
Vue基础指令（五） - v-if、v-show
梦缘的博客
09-23 220
这篇文章介绍Vue基础指令v-if、v-show。 作用：控制控件的隐藏于显示。 使用方式： 结论： （1）v-if和v-show都可以控制控件的隐藏与显示 （2）v-if在为false时，会将控件删除；v-show在为false时，只会给控件添加display:none样式 （3）v-if较v-show有较高的性能消耗，频繁切换推荐使用v-show...
Vue基础指令（一） - v-bind
梦缘的博客
09-23 208
本篇文章介绍Vue框架的基础指令：v-bind。 作用：用于单向绑定数据，可以将vm里面的数据显示到对应的位置 简写：简写可以写成英文单冒号 : 例： html文件： 浏览器显示： 注： （1）v-bind绑定的是控件的属性，属性值由vm中data中的数据的值控制 （2）用户改变控件的属性值，不会改变vm中data中数据的值，例如用户改变input输入框里面的值，vm中的value仍然会是“这是i...
Vue基础指令（四） - v-model
梦缘的博客
09-23 159
这篇文章介绍Vue基础指令 - v-model。 作用：双向绑定数据 例子： html： 浏览器显示： 通过例子可以看到，当改变input组件的value值时，vm中的value的值也会随之改变，这就是v-on与v-model的区别之处。 结论： （1）v-on实现的是单向数据绑定，v-model实现的是双向数据绑定 （2）通过v-model绑定的数据，html数据改变或vm中数据改变都会引起另一...
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、付费专栏及课程。

余额充值