vue组件 - JavaShuo

todolist案例

布局问题

前端的UI组件库

组件

组件化

组件化是当今最为流行的一种可复用性增长的方法，随着当今前端开发的复杂度更加，这个组件化变得愈来愈流行

组件的基础

组件是一个具有html css img js …等的一个聚合体javascript
组件的表现形式就相似一个标签css
组件至少得有模板，模板用template表示，至关于el，可是不能用el，由于被根实例占用了html
Vue.js经过Vue.extend() 方法来扩展组件的使用前端
Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的java
new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，咱们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件app
Vue中组件的表现形式是相似于标签的，要想像标签同样使用，就必须得符合 h5 的规则，也就是必需要进行组件的注册组件化
组件的注册有两种形式布局
- 全局注册
  1. 格式： Vue.component(组件的名称，组件的配置项)
  2. 组件的命名规则
  3. 举例：
    - Father Hello
    - my-button
- 局部注册
  1. 格式：
  2. 写在组件内注册
  3. 举例：
```
- new Vue({
      componens: {
        组件名: 组件配置项
      }
    })
```
组件必须先注册在使用spa
组件中的模板须要使用一个叫作template的配置项表示code

组件的配置项能够简写，不须要使用 Vue.extend(options),能够直接将options写在组件的注册中

<div id="app"> <Haha></Haha><!--组件的表现形式就是一个标签 --> </div>

//简写形式 全局注册 Vue.component(组件的名称，组件的配置项) 通常用简写 Vue.component('Haha',{ template:'<h3>xixixiixixixi</h3>' }) //3.组件的使用 new Vue({//是一个根实例组件，叫Root组件 el:'#app', })

template组件中有且仅有一个根元素

<div id="app"> <Hello></Hello> </div> <template id="hello"> <div> <div> <h3> hello 预祝端午节happy </h3> </div> <div> <h3> hello 预祝端午节happy </h3> </div> </div> </template>

new Vue({ el: '#app', components: { 'Hello': { template: '#hello' } } })

组件使用时有规则的：
1. 好比特殊的一些标签： ul li ol li table tr td dl dt dd select option …这类型标签，是规定了它们的直接子元素，当咱们将组件写入这类型标签的时候，就会发现有问题
2. 解决：在直接子元素身上，经过 is 属性来绑定一个组件
3. 举例：
```
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr>  <tr is = "Hello"></tr> </table> 
```

组件嵌套

全局注册：
- 要将子组件的组件名写在父组件的template中

<div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> father </h3> <hr> <Son></Son> </div> </template> <template id="son"> <h3> son </h3> </template>

Vue.component('Father',{ template: '#father' }) Vue.component('Son',{ template: '#son' }) new Vue({ el: '#app', })

局部注册

<div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> father </h3> <hr> <Son></Son> </div> </template> <template id="son"> <h3> son </h3> </template>

new Vue({ el: '#app', components: { 'Father': { template: '#father', components: { 'Son': { template: '#son' } } } } })