vue有两大特性

指令—用来操作dom

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

1. 组件化

   1.将一个具备完整功能的项目 的一部分进行多处使用

   2.加快项目的进度

   3.可以进行项目的复用

2. 要想实现组件化，那么我们使用的这一部分必须是完整的，我们把这个完整的整体称之为组件
3. 插件： index.html img css js
4. 如果能将html img css js等多个部分放在一起 vue将这些文件称之为单文件组件（xx.vue）

基础的组件创建

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

1. 全局注册

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

</body>
<script>
/* 
   Vue.component( 组件的名称，组件的配置项 )

  Vue.extend()        options
  Vue                 options

  这两个options基本一致

    methods
    computed
    data
    mixins

  组件必须先注册在使用（ 实例（组件） 范围内使用 ）
 
*/
  // console.log( Vue )
  // console.log( Vue.extend() )

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

  Vue.component( 'Father', Hello )

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


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

</script>

3. 局部注册

  <div id="app">
    <gabriel-yan></gabriel-yan>
  </div>

  <div id="root">
      <gabriel-yan></gabriel-yan>

  </div>

</body>
<script>

  /* 
    命名： 
      一个单词的大写： 注意不要和原生的h5标签重名，比如  header   footer   Header Footer
      小写带- ， 比如   header-title
      大驼峰：  GabrielYan   使用 ：   gabriel-yan

    局部注册： 在组件中用一个components的配置项目来表示
              只能在注册的范围内使用，其他地方是不能使用的
   */
  var Hello = Vue.extend({
    template: '<div> 这里是1903 </div>'
  })

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


  new Vue({
    el: '#root'
  })
</script>

4. 注册的简写

  <div id="app">
    <Father></Father>
    <gabriel-yan></gabriel-yan>
  </div>
</body>
<script>

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


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


</script>

需要掌握的

1. vue是如何扩展组件的？
2. vue为什么要以标签的形式使用组件
3. 组件使用为什么要注册
4. 组件的嵌套

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

  /* 
    组件的嵌套
        父组件里面放子组件 ----》 类似于dom结构的父子级结构

      将子组件以标签的形式放在父组件的模板中使用


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

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

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

  

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


</script>

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

  /* 
    is规则
      ul>li  ol>li   table>tr>td      select>option

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

    解决： 使用is规则: 通过is属性来绑定一个组件
     <tr is = "Hello"></tr>

    案例： table
  */

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

  new Vue({
    el: '#app'
  })
</script>

组件的template

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

    组件要想使用template使用，我们采用第二种

    但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示

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

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

  new Vue({
    el: '#app'
  })
</script>