Vue单文件组件基础模板小结


Posted in Javascript onAugust 10, 2017

背景

相信大家在使用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>

结语

以上组件模板中的配置不是最全的,但都是最常用的,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
node.js从数据库获取数据
May 08 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
js实现3D图片展示效果
Mar 09 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
javascript 判断用户有没有操作页面
Oct 17 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
基于JavaScript实现淘宝商品广告效果
Aug 10 #Javascript
Vue数组更新及过滤排序功能
Aug 10 #Javascript
Webpack性能优化 DLL 用法详解
Aug 10 #Javascript
详解React Native网络请求fetch简单封装
Aug 10 #Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 #Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Python数据集切分实例
2018/12/08 Python
python做反被爬保护的方法
2019/07/01 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
python属于跨平台语言码
2020/06/09 Python
python logging模块的使用
2020/09/07 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
房展策划方案
2014/06/07 职场文书
大跃进口号
2014/06/16 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python