Vue绑定事件

本文介绍了Vue中的事件绑定语法,包括v-on和@的使用,以及事件监听的完整示例。同时,详细讲解了Vue的双向数据绑定机制,强调其在UI控件中的应用,并通过v-model展示在表单元素上的使用。最后,简要说明了Vue组件的概念,作为可复用的实例,以及如何简单定义一个组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

语法:

 v-on:事件名 = “方法名”
  简写: @事件名 = “方法名”
  事件名: click|keydown|keyup|mouseover|mouseout|自定义事件名

v-on事件监听

完整示例:

注意:v-bind可以简写为 : v-on: 可以简写@

四、Vue:表单双绑、组件

1.什么是双向数据绑定

  Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

  值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。

2.在表单中使用双向数据绑定

  你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

  注意:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

 示例1:

完成效果

如图:

组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf th:fragment 等框架有着异曲同工之妙。
  通常一个应用会以一棵嵌套的组件树的形式来组织:

例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

简单定义一个组件

注意:在实际开发中,我们并不会用以下方式开发组件,而是采用 vue-cli 创建 .vue 模板文件的方式开发,以下方法只是为了让大家理解什么是组件。

说明:

  • Vue.component():注册组件
  • beixi:自定义组件的名字
  • template:组件的模板

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值