uni-app是什么?
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
Uni-app的优势
跨平台更多,真正做到一套代码多端发行,支持原生代码混写和原生sdk集成。
运行体验更好。组件、api与微信小程序一致,兼容weex原生渲染。
通用技术栈,学习成本更低。Vue的语法,微信小程序的api,对于前端开发人员来说更容易上手。
开放生态,组件更丰富。支持通过npm安装第三方包;支持微信小程序自定义组件及sdk;兼容mpvue组件及项目;app端支持与原生混合编码;
事件定义和传参
在uni中定义事件的方式和vue中是一致的,可以通过v-on的方式定义事件,也可以通过@进行事件的定义,传参方式也与vue一致。
定义事件
给按钮绑定点击事件
<button type="default" @click="handleEvent">点击事件</button>
在script中声明点击事件
export default {
data() {
return {
title: 'Hello tledu'
}
},
onLoad() {
},
methods: {
handleEvent(e) {
console.log("点击了按钮")
console.log(e)
}
}
}
我们可以很惊喜的发现,这里与我们熟悉的vue中的事件定义是完全一致的,这里的形参e就是事件元数据。
获取event数据
在这里我们就会遇到这样的一个问题,我们进行事件传参之后就无法获取到事件元数据了,如果我们需要获取到事件元数据,需要使用$event,将事件元数据传递过来。
<button type="default" @click="handleEvent('天亮教育',$event)">点击事件</button>
handleEvent(name,e) {
console.log("点击了按钮")
console.log(name)
// 事件元数据
console.log(e)
}