上一篇的最后留下了一个 v-on 的思考, 也就是本章的主题: 事件处理
为什么需要事件处理
在前端开发中, 经常要面对各种表单, 按钮. 而这里面就住着一个事件: 点击 (click).
前端童鞋们肯定不陌生它, 因为经常会出现. 比如说:
表单提交
各式各样的按钮
列表多级菜单折叠
v-on 支持监听原生的 DOM 事件, 也就是 vue 中也支持以前纯 JS 写法中各式各样的时间, 只是在 vue 中换了一种写法.
使用事件处理的好处便在于我们可以通过事件来控制数据.
MVVM 中强调的一点便是数据驱动, 那么在 vue 中如果利用数据去驱动视图呢, 上一篇讲了双向绑定. 绑定上去了, 如果没办法对数据进行操作, 那就变成了单向渲染了. 对于这个问题, 解决的方案便是: 事件处理, 利用事件去控制数据变化, 再由数据的变化驱动着视图.
事件处理是什么
这一个问题在上面已经给出答案了:
从字面上理解, 它就是 DOM 事件, 只不过在 vue 中使用方式不同.
深层次理解, 它是控制数据变化的控制器, 是连接视图与数据的桥梁.
如何使用
通过按钮标签来看一下事件处理的写法:
<button v-on: 需要响应的事件名 ="处理事件的函数名"></button>
这里需要注意一点:
处理事件的函数名必须写在 methods 中, 要让当前组件实例可访问.
还是继续昨天的例子, 这里让我们解决最后一个问题:
利用按钮的点击事件来改变 isDark 的值.
首先页面上加上按钮:
- <template>
- <div>
- <h1 v-bind:class="isDark ?'dark':'light'">{{ formatTime(time) }}</h1>
- <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>
- <br/><button v-on:click="change"> 改变背景 </button>
- </div>
- </template>
这里我们指定响应 click 事件的函数名是 change, 接着我们去定义我们的函数:
- methods: {
- change: function() {
- this.isDark = !this.isDark
- }
- }
代码很简洁, 因为这是个布尔值, 我们直接取反就好了.
来看看效果:
现在是白色的, 让我们点一下看看:
点完之后变黑了, 再点击一次又变回白色了~ 很完美的达到了我们的要求.
还可以通过其他的事件来完成一些特效, 比如:
输入框在失去焦距时的自动验证
鼠标移动到元素上时弹出提示文字
等等.
事件修饰符
如果我们只想让这个按钮生效一次怎么办?
点了一次之后, 就不再让它继续变了.
vue 在这方便提供了事件修饰符, 目的就是为了避免开发者们手动去处理原生事件的一些逻辑.
语法如下:
<button v-on: 事件名. 事件修饰符 ="处理函数"></button>
所有的修饰符在下表列出:
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
修饰符可以同时使用多个:
<button v-on: 事件名. 事件修饰符 1. 事件修饰符 2. 事件修饰符 3="处理函数"></button>
上述修饰符待后面我们具体用到时再细细讲解, 其中的一些修饰符拿出来甚至足够一篇长博文的内容了.
这里我们使用到的修饰符是:
.once
代码:
- <template>
- <div>
- <h1 v-bind:class="isDark ?'dark':'light'">{{ formatTime(time) }}</h1>
- <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>
- <!-- 在 click 后面添加 once 修饰符 -->
- <br/><button v-on:click.once="change"> 改变背景 </button>
- </div>
- </template>
先看看点击前的效果:
现在是黑色的, 点击之后:
毫无疑问这里肯定是白色的, 重点是接下来的一次点击!:
没有变化, 依旧是白色, 再点一次, 还是白色..once 修饰符很好的解决了我们的需求.
写在文末
至此, 对于 vue 中的一些基础语法, 事件我们已经有了初步的了解和使用了.
接下来将要一起学习路由与组件这两大 Boss 了, 有了它们, vue 开发会变得更加有趣和多变.
来源: https://www.cnblogs.com/By-ruoyu/p/11129120.html