uni-app基础知识

uni-app使用的模拟器一般使用雷电模拟器,个别情况下使用mumu模拟器

1.模板指令

1.1条件渲染

渲染前要在data中定义变量

data {msg:"你好uni-app"}

<view>{{msg}}</view>

<view>{{80000000*900000}}</view>

<view>{{msg.split('').reverse().join('')}}</view>

<view>{{msg.length>6?'你在说什么':'66666'}}</view>

<view v-html="richMsg"></view>

如果不是微信才显示

<!-- #ifndef MP-WEIXIN -->

<view v-text="richMsg"></view>

<!-- #endif -->

这个要注意下

1.2列表渲染

<view v-for="(value,key) in person" :key="key">{{key}}:{{value}}</view>

<view v-for="item in list" :key="item">{{item}}</view>

<view v-for="(item,index) in 'L love China'" :key="item+index">{{item}}</view>

<view v-for="item in 5" :key="item">{{item}}</view>

data { list:['vue','react','小程序'],person:{name:'mumu',age:18},}

1.3表单绑定

快捷键，u开头，后面写之前的vue标签。会直接出来

<input v-model="msg" />

<view>{{msg}}</view>

<switch

type="checkbox"

:checked="isCheck"

@change="isCheck=$event.detail.value"

></switch>

<button :disabled="!ischeck" type="warn">提交</button>

上方里的v-model只会在input里使用，且全局的“msg”会被影响

下面的switch的change方法为属性绑定通过e值知晓

1.4单复选框

<view>{{favSel}}</view>

<checkbox-group name="" @change="favSel=$event.detail.value">

<label>

<checkbox value="唱歌" /><text>唱歌</text>

</label>

<label>

<checkbox value="游泳" /><text>游泳</text>

</label>

<label>

<checkbox value="跳舞" /><text>跳舞</text>

</label>

</checkbox-group>

favSel：“ ”

里面change方法，点击会出现相应的e里面的value值

1.5事件绑定

<view>{{isLog}}</view>

<button @tap="say( 'vue很easy? ' )">vue很easy</button>

<button type="warn" @tap="say( ' uni很简单吗?')">uni-很简单</button>

<button @click="showMsg($event, ' 38妇女节快乐')">38妇女节快乐</button>

<button @click="showMsg" type="primary">事件响应函数不带()</button>

<button @click="showMsg()">事件响应函数带() </button>

<button v-on:click="isLog=!isLog" type="primary">行内事件</button>

<button @click="isLog=!isLog" type="warn">简写行内事件</button>

methods:{

biaobai(msg){

uni.showModal({

title:'奥术大师大多撒'

})

},

say(msg){

uni.showModal({

title:msg

})

},

showMsg(e,msg='春天在哪里呀'){

console.log(e,'事件参数')

uni.showToast({

title:msg

})

}

}

isLog：false

里面的用法和vue里用法几乎一模一样

2.修饰符

<!--

事件修饰符

.once响应一次

.prevent阻止默认事件

.stop停止事件冒泡

表单修饰符

.number转换为数字

.number转换为数字

.Lazy chang事件触发默认是input事件

按键修饰符

.up .right .bottom .Left

.space .deLete .enter .esc

-->

<button @click.once="biaobai">爱就一个字，我只说一次</button>

biaobai(msg){

uni.showModal({

title:'奥术大师大多撒'

})

},

事件

事件修饰符

.once响应一次

.prevent阻止默认事件

.stop停止事件冒泡

表单

表单修饰符

.number转换为数字

.number转换为数字

.Lazy chang事件触发默认是input事件

按键

按键修饰符

.up .right .bottom .Left

.space .deLete .enter .esc

3.选项

data

这里data用法适合vue用法一样的，包括组件也是

methods

这里methods用法适合vue用法一样的，包括组件也是

watch

这里watch用法适合vue用法一样的，包括组件也是

computed

这里methods用法适合vue用法一样的，包括组件也是

生命周期

创建前后，挂在前后，更新前后

这里前三种生命周期是和vue基本相同的用法

唯独销毁前后不同

销毁前：onBeforeUnmout

销毁后：onUnmount

4.组件

创建

在目录中创建components（注意。一个字母都不要错）

导入使用

再需要导入的页面，不再需要些导入和注册组件，直接引用即可，这是uni-app独特的地方之一

父子传参

首要要在父组件中定义

最后再在组件页面写子组件

// 这里的seconds 前面记得要带“：”

<cutdown :seconds="10" @stop="stopHd" ref="cutdown1" :auto="true"></cutdown>

props:{

seconds:{

type:Number,

default:1,//如果是引用类型，default必须是函数

},

auto:{

type:Boolean,

default:false

}

},

父传子再传子

watch:{

// 监听num值

num:{

// val新的值，oldVal是之前的值（值类型）

handler(val,oldVal){

uni.setStorageSync("num",val)

},

// 如果是引用类型要用深度监听

deep:true

}

},

子父传参

// 在子页面建立方法

tiker(){

this.ind=setInterval(()=>{

this.count--;

// 停止倒计时

if(this.count<=0){

clearInterval(this.ind)

// 向父组件发送事件

this.$emit("stop",this.count)

}

},1000)

},

父页面用这个接收，$refs

<button @click="$refs.cutdown2.reset()" type="primary" size="mini">重置</button>