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精华代码集
Jan 24 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 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
?繁体转换的class
2006/10/09 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
浅谈Python的list中的选取范围
2018/11/12 Python
python异步存储数据详解
2019/03/19 Python
pybind11在Windows下的使用教程
2019/07/04 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python如何代码集体右移
2020/07/20 Python
Python和Bash结合在一起的方法
2020/11/13 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
纽约海:Sea New York
2018/11/04 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
商业门面租房协议书
2014/11/25 职场文书
水浒传读书笔记
2015/06/25 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python