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, 禁止转载 ️,侵权必究️!
vue 单文件组件最佳实践的更多相关文章
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
- 【原】vue单文件组件互相通讯
在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...
随机推荐
- Spring Security 实战干货:AuthenticationManager的初始化细节
1. 前言 今天有个同学告诉我,在Security Learning项目的day11分支中出现了一个问题,验证码登录和其它登录不兼容了,出现了No Provider异常.还有这事?我赶紧跑了一遍还真是 ...
- Linux学习安装
Linux学习安装 服务器指的是网络中能对其他机器提供某些服务的计算机系统,相对普通PC, 服务器指的是高性能计算机,稳定性.安全性要求更高 linux安装学习 1.虚拟机 一台硬件的机器 安装vmw ...
- Linux 从4.12内核版本开始移除了 tcp_tw_recycle 配置。 tcp_max_tw_buckets TIME-WAIT 稳定值
被抛弃的tcp_recycle_小米云技术-CSDN博客_sysctl: cannot stat /proc/sys/net/ipv4/tcp_tw_recy https://blog.csdn.ne ...
- LOJ10092半连通子图
Description 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v的有向路径或者从v到u ...
- csv的读写操作
cvs简介: CSV 全称 Comma-Separated Values,中文叫逗号分隔值或字符分隔值,它以纯文本形式存储表格数据(数字和文本),其本质就是一个字符序列,可以由任意数目的记录组成,记录 ...
- Phoenix的shell操作
Phoenix的shell操作 一.Phoenix的Shell操作 1.进入(hbase01是主机名,2181是zookeeper的端口) 2.退出(注意结尾不加分号) 3.查询所有表(注意结尾不加分 ...
- springboot基础配置-->Properties配置
Spring Boot项目中的application.properties配置文件一共可以出现在如下4个位置: 项目根目录下的config文件夹中. 项目根目录下. classpath下的config ...
- 终于有人把Elasticsearch原理讲透了!学习的第一篇总览全局
诗词大会引出的话题 随着央视诗词大会的热播,小史开始对诗词感兴趣,最喜欢的就是飞花令的环节. 但是由于小史很久没有背过诗词了,飞一个字很难说出一句,很多之前很熟悉的诗句也想不起来. 倒排索引 吕老师: ...
- 20000套免费ppt模板获取攻略
前言 又到年末了,发现需要用到简历,PPT这些的地方又多了.PPT这东西吧,颜值真的很重要,毕竟老板拉融资都是用ppt拉来的.只要ppt够精美,外加上你的故事讲得好,A轮指定不是问题呀.往小处说,就是 ...
- Word 脚本 (自用)
打开开发工具 右击功能区->自定义功能区 勾选开发工具->确定 导入代码 开发工具选项卡->Visual Basic 右击Normal->插入->模块 粘贴代码-> ...