vue 单文件组件最佳实践
vue 单文件组件最佳实践
生命周期 template
<template>
<section>
<h1>vue single file components template best practices</h1>
<GlobalFilter
:filterItems="filterItems"
/>
</section>
</template>
<script>
// utils
import Utils from '@/utils';
// config
import Config from '@/config';
// service
import GlobalFilter from '@/components/global-filter';
// service
import CommonService from '@/services/commonService';
const log = console.log;
export default {
name: 'VSFCTBP',
components: {
GlobalFilter,
},
props: {
obj: {
type: Object,
default: () => ({}),
required: true,
},
arr: {
type: Object,
default: () => [],
required: true,
},
bool: {
type: Boolean,
default: false,
required: true,
},
str: {
type: String,
default: '',
required: true,
},
num: {
type: Number,
default: 0,
required: true,
},
},
data () {
return {
title: 'title',
desc: 'description',
loading: false,
filterItems: {
region: 'zh-Hans',
},
startTime: '',
endTime: '',
};
},
computed: {
time () {
return this.endTime - this.startTime;
},
},
watch: {
'$route.query' (val, oldval) {
log(`new $route.query`, val, oldval);
},
'$route.params' (val) {
log(`new $route.params`, val, oldval);
},
},
beforeCreated () {
//
},
created () {
//
},
mounted () {
this.init();
},
destroyed () {
//
},
methods: {
init () {
this.fetchAPI();
},
async fetchAPI () {
this.loading = true;
const {
data,
msg,
status,
} = await fetch(`/api/v3/getUsers`)
// const res = await fetch(`/api/v3/getUsers`)
.then(res => res.json())
.then(json => {
log(`fetch ok =`, json);
return json;
})
.catch(err => {
log(`fetch error =`, err);
return err;
})
.finally((ok, err) => {
this.loading = false;
});
},
},
};
</script>
<style lang="scss">
.container {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
.item {
color: #0f0;
}
}
</style>
refs
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14389448.html
未经授权禁止转载,违者必究!