UNI-APP_vue3基础使用,uni-app vue3组合式api使用,uniapp实现vue3版本的开发
示例1
<template>
<view>
<text>Welcome to {{ msg }}</text>
<input v-model="msg" />
</view>
</template>
<script>
import {ref, watch} from 'vue'
export default {
setup() {
const msg = ref('Vue 3')
watch(msg, (newValue, oldValue) => {
console.log(`value: ${oldValue} -> ${newValue}`)
})
return {
msg
}
}
}
</script>
示例2
<template>
<view>
<view class="" @click="fun">{{state.count}}</view>
<input type="text" v-model="state.count">
</view>
</template>
<script setup lang="ts">
import {ref, reactive} from 'vue'
import {onLaunch, onShow, onHide, onLoad, onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app'
const state = reactive({
count: 5555,
})
let fun = ()=>{
state.count +=1
}
onLaunch(()=>{
console.log('App Launch ========')
})
onShow(()=>{
console.log('App Show =====');
})
onHide(()=>{
console.log('App Hide =======')
})
onLoad(()=>{
console.log('App onload =======')
})
onPullDownRefresh(() => {
console.log("ok")
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
})
onReachBottom(()=>{
console.log('res::', '上拉加载');
})
</script>
<style lang='scss' scoped>
</style>