背景

相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多:

1.代码集中,便于开发、管理和维护

2.可复用性高,直接将vue文件拷贝到新项目中

我暂时就想到这两点,童鞋们可以在评论里帮我补充;因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用

 <template>
<div>
<h1>{{title}}</h1>
<ChildComponents></ChildComponents>
</div>
</template>
<script>
//子组件要提前引入,才可使用
import ChildComponents from './ChildComponents.vue'
//也可引入一些公共Js脚本或类库
import Cookie from '../lib/cookie.js' //Js部分尽量采用ES6语法,webpack babel插件会转义兼容
export default {
//组件私有数据(必须是function,而且要return对象类型)
data () {
return {
title: '组件标题',
firstName: '',
lastName: '',
}
},
//父组件传递过来的数据(两种方式声明:1.数组 2.对象)
//数组方式
props: ['age'],
//对象方式
/*props: {
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}*/
//计算属性
computed: {
fullName () {
return this.firstName + this.lastName
}
},
//监听
watch: {
title (preVal, newVal) {
console.log(`改变之前的值:${preVal};改变之后的值:${newVal}`)
}
},
//函数集,自己封装,便于开发使用
methods: {
getCurrentDate () {
return new Date().toLocaleDateString()
}
},
//生命周期钩子:实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用
beforeCreated () {
console.log('component before created')
},
//生命周期钩子:组件实例完成创建之后调用
created () {
console.log('component created')
},
//生命周期钩子:组件实例渲染完成时调用
mounted () {
console.log('component mounted')
},
//要用到哪些子组件(如果组件已是最小粒度,那么可省略该属性)
components: {
ChildComponents
}
}
</script>
<style lang="scss" scoped>
/**使用scss编写样式,既可提高开发效率,也方便维护
* scoped省略后,该样式片段会应用到页面全局
* 支持import语法引入css文件
*/
@import "../base/reset.css";
div {
h1 {
color: #c23a3f;
}
} </style>

结语

以上组件模板中的配置不是最全的,但都是最常用的,如有遗漏,欢迎大家补充!!

Vue单文件组件基础模板的更多相关文章

  1. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  2. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  4. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  5. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  6. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  7. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  8. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  9. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

随机推荐

  1. 【caffe-windows】 caffe-master 之 训练自己数据集(图片转换成lmdb or leveldb)

    前期准备: 文件夹train:此文件夹中按类别分好子文件夹,各子文件夹里存放相应图片 文件夹test:同train,有多少类就有多少个子文件夹 trainlabels.txt : 存的是训练集的标签  ...

  2. 第一次在gitHub上传项目到git.oschina的方法

    首先在Git@osChina创建一个项目仓库 1.创建sshKey公钥 ssh-keygen -t rsa -C "ty635725964@qq.com" 之后连续三个空格,默认无 ...

  3. AOJ/初等排序习题集

    ALDS1_1_D-MaximumProfit. Codes: //#define LOCAL #include <cstdio> #include <algorithm> u ...

  4. [KISSY5系列]KISSY5安装使用(二)

    上篇文章,我们遗留的一个问题就是,请求数量有点多,虽然现在的浏览器的请求资源都是并发的.但是我们还是尽量减少请求量. 但是KISSY里面这个问题我们怎么解决呢,其实还是从data-config=&qu ...

  5. 使用 rsync 同步

    原文地址 http://www.howtocn.org/rsync:use_rsync 选项 说明 -a, ––archive 归档模式,表示以递归方式传输文件,并保持所有文件属性,等价于 -rlpt ...

  6. mac地址学习笔记

    MAC(Media Access Control或者Medium Access Control)地址, 意译为媒体访问控制,或称为物理地址.硬件地址,用来定义网络设备的位置. 在OSI模型中,第三层网 ...

  7. MySQL AutoCommit带来的问题

    现象描述 测试中发现,服务A在得到了服务B的注册用户成功response以后,开始调用查询用户信息接口,却发现无法查询出任何结果.检查binlog发现,在查询请求之前,数据库确实已经完成了commit ...

  8. ASP.Net MVC连接MySQL和Code First的使用

    首先要准备一下的工具作为环境 MySQL Community Server 5.7.x My Workbench 6.3 VS2017 新建一个项目,NetMySQLCodeFirst 选择MVC,再 ...

  9. hdu2594 Simpsons’ Hidden Talents

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2594 思路: 其实就是求相同的最长前缀与最长后缀 KMP算法的简单应用: 假设输入的两个字符串分别是s ...

  10. aync await 进一步探索

    aync await 进一步探索 首先来个例子 class Program { static int index = 1; static void Log(string str) { Console. ...