uni-app学习笔记(2)
作者:互联网
文章目录
1、vue生命周期
<template>
<view>
<button @click="click">提交</button>
<view>
{{text}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
text: 'hello'
}
},
methods: {
click(){
this.text = '你好'
}
},
beforeCreate() {
console.log(this.text)
},
created() {
console.log(this.text)
},
beforeMount() {
console.log(1)
},
mounted() {
console.log(2)
},
beforeUpdate() {
console.log("beforeupdate 如果页面没有重新渲染,则不会执行")
},
updated() {
console.log("updated")
}
}
</script>
<style>
</style>
运行程序,可以看到程序依次执行了
beforeCreate()
、created()
、beforeMount()
、mounted()
由于页面没有重新渲染,所以没有执行beforeUpdate
,当我们点击了 button 更新了页面,然后执行了beforeUpdate
和 updated
2、计算属性、方法、监听
计算属性
<template>
<view>
{{fullText}}
<button @click="click">提交</button>
{{test}}
</view>
</template>
<script>
export default {
data() {
return {
firstText: 'hello',
lastText: 'world',
test : '测试'
}
},
methods: {
click(){
this.firstText = '你好'
}
},
computed: {
fullText() {
console.log('计算属性')
return this.firstText + " " + this.lastText
}
}
}
</script>
<style>
</style>
只有计算属性相关的值发生变化时,computed 才会执行,如果点击按钮改变的是 test
click(){
this.test = '你好'
}
computed 就不会执行
方法
接下来把字符串的拼接改成 fullText() 方法:
<template>
<view>
{{fullText()}}
<button @click="click">提交</button>
{{test}}
</view>
</template>
<script>
export default {
data() {
return {
firstText: 'hello',
lastText: 'world',
test : '测试',
}
},
methods: {
click(){
this.test = '你好'
},
fullText() {
console.log('方法')
return this.firstText + " " + this.lastText
}
},
}
</script>
<style>
</style>
展示 hello world 的是 fullText() 方法将 firstText 和 lastText 拼接的,然后点击 button 按钮改变的虽然不是 firstText 或 lastText ,但是 fullText() 还是执行了
所以如果能实现同样的功能,应该优先使用计算属性,它只有在改变 firstText 或 lastText 才执行。而 fullText() 方法只要页面重新渲染了,都会执行
watch监听
<template>
<view>
{{fullText}}
<button @click="click">提交</button>
{{test}}
</view>
</template>
<script>
export default {
data() {
return {
firstText: 'hello',
lastText: 'world',
fullText: 'hello world',
test: '测试'
}
},
methods: {
click() {
this.aa = '你好'
},
},
watch: {
firstText() {
console.log('监听')
this.fullText = this.firstText + " " + this.lastText
},
lastText() {
console.log('监听')
this.fullText = this.firstText + " " + this.lastText
}
}
}
</script>
<style>
</style>
监听了 firstText 和 lastText,只有当 firstText 或 lastText 改变时,监听才执行,如果我们点击 button 改变的是 test 的值,监听不会执行
所以总结下来,实现这个功能 方法 是最不可取的
3、父子组件传值
父组件向子组件传值
在 components 文件夹下新建一个 child.vue 组件,首先需要在 index.vue 中引用,然后使用,在 child 中传入一个 myText 参数,值就是 text
<template>
<view>
<child :myText="text"></child>
</view>
</template>
<script>
import child from '../../components/child.vue'
export default {
components: {
child
},
data() {
return {
text: '我是父组件'
}
},
methods: {
},
}
</script>
<style>
</style>
child.vue
在子组件中,用 props 接收参数 myText,然后展示在页面即可
<template>
<view>
{{myText}}
</view>
</template>
<script>
export default {
props:['myText'],
data() {
return {
};
}
}
</script>
<style>
</style>
运行程序:
子组件向父组件传值
child.vue中,我们在 button 中绑定一个 click 事件,点击执行 click 方法,用 $emit
方法,传入一个参数 myChange,值是 title
<template>
<view>
<button type=primary @click="click">传值</button>
</view>
</template>
<script>
export default {
data() {
return {
title: '我是子组件'
};
},
methods: {
click() {
this.$emit('myChange', this.title)
}
}
}
</script>
<style>
</style>
index.vue 父组件中,child 组件绑定 上个页面的 myChange 方法,执行本页面的 change 方法,可以接收上个页面的参数
<template>
<view>
<child @myChange="change"></child>
{{title}}
</view>
</template>
<script>
import child from '../../components/child.vue'
export default {
components: {
child
},
data() {
return {
title: ''
}
},
methods: {
change(res) {
this.title = res
}
},
}
</script>
<style>
</style>
运行结果:
4、组件参数校验
上边的父组件向子组件传值后,在子组件页面可以进行校验,修改 child.vue
props:{
myText:Number
},
虽然能正常显示,但是控制台有警告,我们还可以这样写:
props:{
myText:[String,Number]
},
或者
myText:{
type:Number,
default:3
}
标签:fullText,vue,lastText,app,笔记,firstText,child,组件,uni 来源: https://blog.csdn.net/u010356768/article/details/123250157