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形式文件命名 每个组件之间 ...
随机推荐
- Eclipse在线安装FatJar插件失败解决方案
在线安装fatjar(URL:http://kurucz-grafika.de/fatjar) 快要安装完的时候报错如下: 找了很久解决方法,终于有了下文:很是粗乎意料呃,下载一个eclipse2.0 ...
- How does Go kit compare to Micro?
Go kit - Frequently asked questions https://gokit.io/faq/ How does Go kit compare to Micro? Like Go ...
- 防sql注入之参数绑定 SQL Injection Attacks and Defense 预处理语句与存储过程
http://php.net/manual/zh/pdo.prepared-statements.php 预处理语句与存储过程 很多更成熟的数据库都支持预处理语句的概念.什么是预处理语句?可以把它看作 ...
- WebServices 与 Web API 的区别
WebServices : WebServices 是可以通过 Internet 访问并通过 XML 编码规范其通信的任何服务. 客户通过发送请求(大部分是 XML消息)来召唤 WebServices ...
- Java——单例模式、多线程
单例模式 单例模式练习 单例模式的分类 懒汉式 懒汉式相关练习 饿汉式 饿汉式相关练习 线程安全 使用双重检测机制实现线程安全的懒汉式 使用静态内部类实现线程安全的单例模式 多线程 多线程的三种方式 ...
- (Linux环境Kafka集群安装配置及常用命令
Linux环境Kafka集群安装配置及常用命令 Kafka 消息队列内部实现原理 Kafka架构 一.下载Kafka安装包 二.Kafka安装包的解压 三.设置环境变量 四.配置kafka文件 4.1 ...
- 34.vsftpd服务程序--虚拟用户模式
1.创建用于进行FTP 认证的用户数据库文件,其中奇数行为账户名,偶数行为密码. [root@localhost ~]# cd /etc/vsftpd/ [root@localhost vsftpd] ...
- 7. Linux命令行的通配符、转义字符
1.命令行的通配符 举例:1)列出所有在/dev 目录中以sda 开头的文件 [root@Centos test]# ll /dev/sda* brw-rw----. 1 root disk 8, 0 ...
- MySQL常用SQL语句1
-- 创建表 CREATE TABLE USER ( -- id默认每个表都该拥有(非空 不重复) -- (id是每一行的唯一标识) -- 其他字段可能会重复,我们无法依赖其他的字段去确定某一行记录 ...
- Codeforces Round #640 (Div. 4)
比赛链接:https://codeforces.com/contest/1352 A - Sum of Round Numbers 题意 将一个十进制数的每一个非零位分离出来. 代码 #include ...