Vue的功能（组件）component

Vue有两大特性

• 指令 – 用来操作dom

• 组件 – 组件是html css js 等的一个聚合体

• 为什么要使用组件？

  1. 组件化
     1. 将一个具备完整功能的项目的一部分进行多处使用
     2. 加快项目的进度
     3. 可以进行项目的复用
  2. 要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件
  3. 插件： index.html img css js
  4. 如果能将 html css js img 等多个部分放在一起，那该有多好，vue将这个聚合体的文件称之为，单文件组件（ xx.vue ）

Vue的功能（组件）component
要点:

• Vue 是构造器函数
• Vue.extend() 是 vue用来扩展 vue功能（ 组件 ）的
• Vue决定不进行 实例化 Vue.extend(),vue借鉴了react，react中组件是以标签的形式使用的
• vue 决定组件要以标签的形式呈现
• 为了符合 html / html5的规则，所以组件的标签化使用必须注册。注册说白了就是用来解析这个标签化的组件html未能识别的标签
• 组件使用前必须进行注册

<div id="app">
<Father></Father>// 未注册的标签是不能被识别的
</div>

new Vue({
el: '#app'
})

Vue组件的使用

Vue.component(组件的名称，组件的配置项)

注意：组件必须先注册再使用（实例（组件）范围内使用）

命名：

一个单词的大写： 注意不要和原生的h5标签重名，比如 header footer
小写带- ， 比如 header-title
大驼峰： HeaderLine 使用 ： header-line

全局性组件注册：

<div id="app">
<Father></Father>
</div>
<div id="root">
<Father></Father>// 组件可以被重复使用
</div>

var Hello = Vue.extend({
template: '<div> 这里是father组件 </div>'
}) //VueComponent( option )


Vue.component( 'Father', Hello )


new Vue({
el: '#app'
})


new Vue({
el: '#root'
})

局部注册： 在组件中用一个components的配置项目来表示
只能在注册的范围内使用，其他地方是不能使用的

<div id="app">
<say-hello></say-hello>
</div>


<div id="root">
<say-hello></say-hello>// say-hello在这个组件内是不能使用的
</div>


var Hello = Vue.extend({
template: '<div> 你好 </div>'
})

new Vue({
el: '#app',
components: {
// key: value key是组件名称 value是组件配置项
'say-hello': Hello,
}
})

new Vue({
el: '#root'
})

Vue.component组件使用的简写

<div id="app">
<Father></Father>
<say-hello></say-hello>
</div>

Vue.component('Father',{
template: '<div> 这里是全局注册 </div>'
})

new Vue({
el: '#app',
components: {
'say-hello': {
template: '<div> 这里是局部注册 </div>'
}
}
})

Vue.component组件的嵌套

父组件里面放子组件 类似于dom结构的父子级结构
将子组件以标签的形式放在父组件的模板中使用

切记，不要放在父组件的内容中

全局嵌套：

<div id="app">
<!-- 下面这种写法是错误的 -->
<Father>
<Son></Son>
</Father>
<!-- 正确的应该是 -->
<Father></Father>
</div>

Vue.component('Father',{
template: '<div> Father <Son></Son></div>'
})

Vue.component('Son',{
template: '<div> son </div>'
})

new Vue({
el: '#app',
})

组件不仅可以用双标签表示，也可以使用单标签表示

局部嵌套：

<div id="app">
<Father></Father>
</div>

new Vue({
el: '#app',
components: {
'Father': {
template: '<div> father组件 <Son /></div>',
components: {
'Son': {
template: '<div> son组件 </div>'
}
}
}
}
})

组件的一些特殊使用规则—is规则

ul>li ol>li table>tr>td select>option

如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug

解决： 使用is规则: 通过is属性来绑定一个组件

案例： table

<div id="app">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr is = "Hello"></tr>
</table>
</div>

Vue.component('Hello',{
template: '<tr> <td> 4 </td> <td> 2 </td><td> 3 </td></tr>'
})

new Vue({
el: '#app'
})

组件的template

template使用：

1. 实例范围内使用
   template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的

2. 实例范围外使用
   实例范围外template标签是不会被直接解析的
   组件要想使用template使用，我们采用第二种
   但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示

解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件

<div id="app">
<h3> 实例范围内使用 </h3>
<template>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>

<h3> 使用 hello 组件</h3>

<Hello></Hello>

</div>
<h3> 实例范围外使用 </h3>
<template id="hello">
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</template>

Vue.component('Hello',{
template: '#hello'
})

new Vue({
el: '#app'
})