Vue单文件组件基础模板-阿里云开发者社区

开发者社区> 开发与运维> 正文

Vue单文件组件基础模板

简介:

背景

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

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

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

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

 

复制代码

 1 <template> 2   <div> 3     <h1>`title`</h1> 4     <ChildComponents></ChildComponents> 5   </div> 6 </template> 7 <script> 8 //子组件要提前引入,才可使用 9 import ChildComponents from './ChildComponents.vue'10 //也可引入一些公共Js脚本或类库11 import Cookie from '../lib/cookie.js'12 13 //Js部分尽量采用ES6语法,webpack babel插件会转义兼容14 export default {15   //组件私有数据(必须是function,而且要return对象类型)16   data () {17     return {18       title: '组件标题',19       firstName: '',20       lastName: '',21     }22   },23   //父组件传递过来的数据(两种方式声明:1.数组 2.对象)24   //数组方式25   props: ['age'],26   //对象方式27   /*props: {28     age: {29       type: Number,30       default: 0,31       required: true,32       validator: function (value) {33         return value >= 034       }35     }36   }*/37   //计算属性38   computed: {39     fullName () {40       return this.firstName + this.lastName41     }42   },43   //监听44   watch: {45     title (preVal, newVal) {46         console.log(`改变之前的值:${preVal};改变之后的值:${newVal}`)47     }48   },49   //函数集,自己封装,便于开发使用50   methods: {51     getCurrentDate () {52       return new Date().toLocaleDateString()53     }54   },55   //生命周期钩子:实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用56   beforeCreated () {57     console.log('component before created')58   },59   //生命周期钩子:组件实例完成创建之后调用60   created () {61     console.log('component created')62   },63   //生命周期钩子:组件实例渲染完成时调用64   mounted () {65     console.log('component mounted')66   },67   //要用到哪些子组件(如果组件已是最小粒度,那么可省略该属性)68   components: {69     ChildComponents70   }71 }72 </script>73 <style lang="scss" scoped>74 /**使用scss编写样式,既可提高开发效率,也方便维护75 *  scoped省略后,该样式片段会应用到页面全局76 *  支持import语法引入css文件77 */78 @import "../base/reset.css";79 div {80   h1 {81     color: #c23a3f;82   }83 }84 85 </style>

复制代码

本文转自  zddnd  51CTO博客,原文链接:http://blog.51cto.com/13013666/1940100

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章