跨平台框架uni-app
导出模块
default
模块定义 数据对象
<script>
export default{
}
</script>
export
是导出模块的组件对象
default
是 缺省模块名
模块可定义对象 | H5 | App端旧版 | App端V3 | 微信小程序 | 说明 |
---|---|---|---|---|---|
data | 支持 | 支持 | 支持 | 支持 | - |
props | 支持 | 支持 | 支持 | 支持 | App端旧版不可以传递函数 |
propsData | 支持 | 支持 | 支持 | 支持 | - |
computed | 支持 | 支持 | 支持 | 支持 | - |
methods | 支持 | 支持 | 支持 | 支持 | - |
watch | 支持 | 支持 | 支持 | 支持 | - |
el | 支持 | 不支持 | 不支持 | 不支持 | |
template | 支持 | 不支持 | 不支持 | 不支持 | uni-app 使用的vue 是只包含运行时的版本 |
render | 支持 | 不支持 | 不支持 | 不支持 | - |
renderError | 支持 | 不支持 | 不支持 | 不支持 | - |
directives | 支持 | 不支持 | 支持 | 不支持 | - |
filters | 支持 | 支持 | 支持 | 支持 | App端旧版不可以在class 中使用 |
components | 支持 | 支持 | 支持 | 支持 | - |
parent | 支持 | 支持 | 支持 | 支持 | 不推荐 |
mixins | 支持 | 支持 | 支持 | 支持 | - |
extends | 支持 | 支持 | 支持 | 支持 | - |
provide/inject | 支持 | 支持 | 支持 | 支持 | App端旧版部分支持 |
name | 支持 | 支持 | 支持 | 支持 | App端旧版不支持递归组件 |
delimiters | 支持 | 不支持 | 不支持 | 不支持 | - |
functional | 支持 | 不支持 | 不支持 | 不支持 | - |
model | 支持 | 不支持 | 支持 | 不支持 | - |
inheritAttrs | 支持 | 不支持 | 支持 | 不支持 | - |
comments | 支持 | 不支持 | 不支持 | 不支持 | - |
data
:用于定义属性,实例中有三个属性分别为:site
、url
、alexa
。
methods
:用于定义事件函数,可以通过 return 来返回函数值。
1. data
data
必须声明为返回一个初始数据对象的函数(注意函数内返回的数据对象不要直接引用函数外的对象);否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。
在index.vue
的 script
标签中加入data
后如下
<script>
export default{
data(){
return{
}
}
</script>
data对象属性的数据类型
属性的定义方式
定义方式 name:vule
类似于json数据的定义方式
注意:
下面示例中所有的name
都是自定义的,可以改成自己想定义的名字,像变量一样
value
值的类型不需要显示定义,框架会自动判断,类似于json
数字
data(){
number1:100
}
字符串
data(){
string1:"这是一段字符串"
}
布尔类型
data(){
isTrue:false
}
json对象类型
data(){
Object1:{
string2:"这是一段字符串",
isfalse:true,
number2:100
}
}
数组
data(){
list:{
//代表数组,存放可以是普通数据类型,也可以是json对象
}
}
1.2 methods
在uni-app中事件函数定义在me