1、data
Vue 会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
data () {
return {
dataForm: {
xxx: ‘’,
xxx: 数字 //这里的数字会固定XXX的选项
},
xxx: [],
xxx: false,
xxx: 数字,
xxx: {}
}
}
2、components
调用其他组件
<template>
<div class="mod-config">
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './bareapointinfo-add-or-update'
export default {
components: {
AddOrUpdate
}
}
</script>
3、methods
用来定义方法
methods: {
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/area/bareapointinfo/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'pointName': this.dataForm.key
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
this.$message.error(data.msg)
}
this.dataListLoading = false
})
}
}
4、computed
当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。可以理解为为便签设置属性时调用
<div class="truckGpsScreen" ref="truckGpsScreen" :style="{height:mainHeight + 'px'}">
</div>
computed: {
mainHeight: {
get () {
return this.$store.state.common.documentClientHeight - 50 - 40 - 32
}
}
}
5、mounted
进入页面便开始调用，从页面产生到消亡只会执行一次，可以用来加载初始化数据
mounted () {
if (screenfull.enabled) {
screenfull.on('change', this.onScreenFullChange)
}
this.initMap()
}
6、activated
keep-alive组件激活时调用（你可以理解为生命周期钩子函数），只要切回到该页面便调用一次
activated () {
this.timer = setInterval(this.getDataList, 3000)
}
7、deactivated
keep-alive组件停用时调用，只要切到别的页面便调用一次
deactivated () {
clearInterval(this.timer)
}
8、beforeCreate
创建前的数据
9、created
创建完成的数据
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/153451.html
