自学uni-app (2)uni-app的导出模块(export default)和常用方法

跨平台框架uni-app

  • 导出模块
    • 1. data
      • data对象属性的数据类型
        • 数字
        • 字符串
        • 布尔类型
        • json对象类型
        • 数组
      • 1.2 methods
    • 2. 数据对象属性的引用
      • 2.1 显式引用
      • 2.2 隐式引用
    • 映射(map)
    • 列表渲染(v-for)
    • 条件渲染(v-if)
    • 计算属性(computed)
      • 过滤数组(filter)
    • 全局共享数据
      • 通过vue的原型共享数据
      • 通过globalData 共享数据

导出模块

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 :用于定义属性,实例中有三个属性分别为:siteurlalexa
methods :用于定义事件函数,可以通过 return 来返回函数值。

1. data

data 必须声明为返回一个初始数据对象的函数(注意函数内返回的数据对象不要直接引用函数外的对象);否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。

index.vuescript标签中加入data后如下

<script>
export default{
    
		data(){
    
			return{
    
				}
			}
script>


data对象属性的数据类型

属性的定义方式
定义方式 name:vule
类似于json数据的定义方式
注意:
下面示例中所有的name都是自定义的,可以改成自己想定义的名字,像变量一样
value值的类型不需要显示定义,框架会自动判断,类似于json

数字
data(){
   
	number1:100
}

字符串
data(){
   
	string1:"这是一段字符串"
}

布尔类型
data(){
   
	isTrue:false
}

json对象类型
data

你可能感兴趣的:(前端自学,vue,js,android,html5,小程序)