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 >= 0
34       }
35     }
36   }*/
37   //计算属性
38   computed: {
39     fullName () {
40       return this.firstName + this.lastName
41     }
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     ChildComponents
70   }
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>

 

结语

以上组件模板中的配置不是最全的,但都是最常用的,如有遗漏,欢迎大家补充!!

posted @ 2017-06-07 15:01  郭某某01  阅读(...)  评论(... 编辑 收藏