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 相关文章推荐
Textarea根据内容自适应高度
Oct 28 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
基于Vue实现图书管理功能
Oct 17 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
js+css3实现简单时钟特效
Sep 13 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
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
node跨域请求方法小结
2017/08/25 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python实现一个猜拳游戏
2020/04/05 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
社会治安综合治理管理责任书
2014/04/16 职场文书
施工安全生产承诺书
2014/05/23 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
教代会开幕词
2015/01/28 职场文书
小学生读书笔记
2015/07/01 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis