uni-app生命周期
应用生命周期
1.onLaunch 只触发一次
2.onShow 后台转前台
3.onHide 前台转后台
4.onUniNViewMessage 对数据发送数据监听
vue学习
1.语法模板
1.1方法一
<view>
{{text}}
</view>
<script>
export default {
data() {
return {
text: 'Hello word!'
}
}
}
</script>
1.2.1方法二
<view v-text = "text">
</view>
<script>
export default {
data() {
return {
text: 'Hello word!'
}
}
}
</script>
1.2.2
<view>
<view v-text = "text">
</view>
<view v-html = "text">
</view>
</view>
<script>
export default {
data() {
return {
text: '<p>Hello word!</p>'//v-html 与v-ext区别:是否解析文件
}
}
}
</script>
2.样式绑定
2.1方法一
<view class = "content" style = "font-size:30px">
text
</view>
2.2方法二
<view class = "content">
text
</view>
<style>
.content{font-size:30px}
</style>
2.3方法三(动态改变样式)
<view :class ="text" v-bind:style = "style1">
text
</view>
<script>
export default {
data() {
return {
style1: ''font-size:30px
}
}
}
</script>
3.事件绑定
3.1方法一
<view v-on:click="click">
text
</view>
<script>
export default {
data() {
return {
}
},
methods:
{
click:function()
{
console.log("click")
}
}
}
</script>
4.条件渲染
4.1方法一(显示并清除提交的输入框文字)
<view class="">
<input type="text" value="" v-model="text">
<button type="primary" @click="click">
提交
</button>
</input>
<view>
<view class="" v-for="item in list">
{{item}}
</view>
</view>
</view>
<script>
export default {
data() {
return {
text: '',
list:["hell","world"]
}
},
methods: {
click:function()
{
this.list.push(this.text)
this.text=''
}
}
}
</script>
5.vue生命周期
5.1 beforeCreate() //渲染前执行
5.2 create() //渲染完执行(理解对象实例)
5.3 beforeMount() //渲染显示前执行
5.4 mounted() //渲染执行
5.5 beforeUpdate() //刷新前执行
5.6 update() //刷新执行
5.7 destroy() //销毁
6.计算,属性和监听
6.1方法一
<view class="">
{{fullText}}
</view>
<script>
export default
{
computed:
{
fullText()
{
return this.text + " "+ this.list
}
}
}
</script
6.2补充
(1)watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:
当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自
动”发生变化,也就是自动调用相关的函数去实现数据的变动。
(2)对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不
像watch和computed那样,“自动执行”预先定义的函数
【总结】:methods里面定义的函数,是需要主动调用的,而和watch和computed相关的函数
,会自动调用,完成我们希望完成的作用
6.3 watch:{} 监听数据
7.父子组件传值
7.1新建文件夹->创建组件(保存)->导入组件
import test from '../../components/test.vue'
export default {
components:{
test
//props
//{ text:Number //对参数限制
// text:Array
// text:[String]
// text:[String,Number]
// text{
// type:Number
// default:3
// }
//}
}
}
7.2组件传值
7.2.1 子传父
组件:
export default {
props:['text'],
}
主件:
<test :text ="text"></test>
7.2.2父传子
主件:
<test @change="change" :text ="text"></test>
methods: {
change(res)
{
this.title = res
}
}
组件:
<button type="primary" @click="click">传值</button>
methods:
{
click()
{
this.$emit('change',this.title) // 发射信号
}
}