Vue组件

最新推荐文章于 2022-08-04 22:15:28 发布

weixin_45213847

最新推荐文章于 2022-08-04 22:15:28 发布

阅读量85

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_45213847/article/details/93531099

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

Vue有两大特性

1. 指令 – 用来操作dom
1. 组件 – 组件是html css js 等的一个聚合体

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

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

  Vue.component( 'Father', Hello )

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

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

2. 全局注册嵌套
案例：

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

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

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


      切记，不要放在父组件的内容中
      
      组件不仅可以用双标签表示，也可以使用单标签表示
  */

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

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

  

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

局部注册

案例

<body>
    <div id="app">
        <Wu></Wu>
    </div>
</body>
<script>

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

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

    var Pmk = Vue.extend({
        template: '<div>周一</div>'
    })

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

    /*
    简写
    new Vue({
        el: '#app',
        components: {
            'Wu':{
                template: '<p>zho</p>'
            }
        }
    })
    */
</script>

局部嵌套

<body>
    <div id="app">
        <Father>
        </Father>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        components: {
            'Father': {
                template: '<div>Father <Son></Son></div>',
                components: {
                    'Son': {
                        template: '<div>Son</div>'
                    }
                }
            }
        }
    })
</script>

必须掌握的
1. vue是如何扩展组件的？
2. vue为什么要以标签的形式使用组件
3. 组件使用为何要注册
组件的一些特殊使用规则【 is 规则】

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

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

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

案例：

<body>
  <div id="app">
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr is = "Hello"></tr>
    </table>
  </div>
</body>
<script>
  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提供的单文件组件
   */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
  <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>
</body>
<script>


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

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