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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
原生js编写2048小游戏
Mar 17 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
node实现的爬虫功能示例
May 04 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
基于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
php分页示例代码
2007/03/19 PHP
PHP define函数的使用说明
2008/08/27 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
js的匿名函数使用介绍
2013/12/11 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
跟单文员岗位职责
2014/01/03 职场文书
军训 自我鉴定
2014/02/03 职场文书
生产部岗位职责范文
2014/02/07 职场文书
英语教学随笔感言
2014/02/20 职场文书
农村改厕实施方案
2014/03/22 职场文书
社区居务公开实施方案
2014/03/27 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
党员先进事迹材料
2014/12/19 职场文书
初二学生评语大全
2014/12/26 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
施工安全责任协议书
2016/03/23 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
七个非常实用的Python工具包总结
2021/06/15 Python