页面上的每个部分都可以看做组件, 组件由三部分构成:
1. 结构 template, 每个 template 里只能有一个子元素, 子元素中再包括其他子元素
2. 样式 style
3. 逻辑 script 通过 export default{} 把组件导出去, 通过对象方式
组件的作用主要体现在复用性强上, 比如做一个项目, 有五个页面, 每个页面的头部和底部都是一样的, 那么就可以把头部和底部看做两个组件, 单独拿出来做, 然后在每个页面上都引入这两个组件, 这样就只需要写一遍头部和底部就好, 写好的可以在多个页面是用, 这就是复用性了.
组件创建方式有两种: 1. 全剧组建 vue.component()(在 new Vue 之前), 所有 App 皆可用. 2. 局部组建 components:{} 只有当前 App 可用.
组件参数有两个, 第一个参数是组件的名称, 第二个参数是组件的配置项: new Vue 里有什么参数, 那么组件配置项中就有什么参数, 包括生命周期, 但是组件多一个属性: template, 这个 template 相当于一个模板, 是组件的结构, 并且在组建内, data 是一个函数.
使用组件时, 把组件名称当作标签名使用即可, 相当于自己创建了标签, 想想就开心, 组件名必须大写开头 (不成名的规范).
组件最好配合脚手架使用
安装脚手架的命令: 3.0 版本 cnpm install @vue/cli -g
2.9.3 版本 cnpm install vue-cli -g
创建项目
3.0 版本 vue create "项目名称"
2.9.3 版本 vue init webpack "项目名称".
今天就先分享到这里啦, 敲代码去咯, 明天分享组件传值, 拜拜~
来源: http://www.bubuko.com/infodetail-2996638.html