建设网站广州市,wordpress不显示主题,重庆广告公司十大排名,wordpress套模板文章目录 前文提要事件处理的解析过程样例代码如下#xff1a;效果展示图片#xff1a;v-on:click响应函数v-on:click简写形式响应函数添加响应函数传参占位符$event注意事项 前文提要
本人仅做个人学习记录#xff0c;如有错误#xff0c;请多包… 文章目录 前文提要事件处理的解析过程样例代码如下效果展示图片v-on:click响应函数v-on:click简写形式响应函数添加响应函数传参占位符$event注意事项 前文提要
本人仅做个人学习记录如有错误请多包涵 事件处理的解析过程
我们能够为标签添加事件对应的响应从而处理事件。 下面是为按钮提供鼠标点击时候的响应事件的处理函数。
样例代码如下
bodydiv idboxh2哈哈{{name}}/h2button v-on:clickshowInfo点我提示信息/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {name: 这里是name的值,},methods: {showInfo() {console.log(你好)}}})/script
/body效果展示图片 v-on:click“响应函数”
首先是通过下列代码
button v-on:clickshowInfo点我提示信息/button在标签中加入v-on:click指令添加事件的处理然后为其添加响应函数字符串中的就是响应函数的名字。
v-on:click简写形式
v-on:click可以简写为click
响应函数添加
需要在Vue实例中增加一个配置属性methods如同下面代码一样。 mothods属性中不用加上function因为这里写的都是函数所以不必加上function可以写多个函数不是只能写一个但是需要注意不要写成箭头函数箭头函数中没有thisthis指向的就是全局的window。
const vm new Vue({el: #box,data: {name: 这里是name的值,},methods: {showInfo() {console.log(你好)}}
})这里写的是showInfo()其等价于showInfo(event)。 其余代码不改只修改showInfo中的代码改为
showInfo() {console.log(event)
}呈现效果如下
默认会传一个当前事件的对象通过event.target可以访问触发事件的元素 将上述代码中的部分改为这样即可
console.log(event.target)呈现效果如下 还可以通过event.target.value访问带有value属性的元素的value值。
响应函数传参
如果需要响应函数传参直接在函数的括号中直接修改即可例如把button中的代码改为
button v-on:clickshowInfo(6)点我提示信息/buttonmethods中的函数改为 showInfo(a) {console.log(a)
}呈现效果如下 这样做可以传递参数但是会丢失之前默认传参中的event这里就不做展示了。 可以修改上面的代码来让event不丢失那就是使用占位符$event
占位符$event
button v-on:clickshowInfo($event,6)点我提示信息/buttonmethods中的函数改为 showInfo(e,a) {console.log(e,~~~,a)
}从这里能看见’~~~前面输出了事件后面跟着一个6event也没有丢失6也正常传递了。 使用$event会更加灵活能够传递更多的采纳数
注意事项
methods后面是配置对象理论上data后面也是配置对象函数也可以写道data中去但是不建议这么做。 之前的数据代理中提到data中的数据都会经过数据代理再在Vue实例中创建一个新的属性函数不需要做数据代理也就没必要写在data中。 如果在data中写了函数做了数据代理只会占用更多的资源。 methods不会做数据代理。 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
