微信扫一扫打赏支持

VUE课程---26、组件

VUE课程---26、组件

一、总结

一句话总结：

前端组件化开发，可以便于组件的管理和复用。组件可以定义全局组件和私有组件。

 

 

1、vue中如何定义全局组件？

直接在全局的 Vue.component 上定义
<mycom1></mycom1>

<template id="tmpl">
    <div>
        <h2>template1</h2>
        <h4>好用,不错!</h4>
    </div>
</template>

Vue.component('mycom1', {
  template: '#tmpl'
});

 

 

2、vue中如何定义私有组件？

在vue实例的components属性中定义
<login></login>

<template id="login">
    <div>
        <h2>这是login组件</h2>
    </div>
</template>

  components:{
      //组件名称，组件对应的模板对象
      login:{ // 定义实例内部私有组件的
          template: '#login'
      }
  }

 

 

3、组件如何使用？

用标签名的方式使用组件，例如<login></login>，注意驼峰命名法要写成短线写法，例如myCom要写成my-com

 

 

4、为什么组件使用的时候 驼峰命名法要写成短线写法（例如myCom要写成my-com）？

因为html的标签是不区分大小写的

 

 

 

二、组件

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>组件</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 前端组件化开发，可以便于组件的管理和复用。组件可以定义全局组件和私有组件。
11 
12 
13 2、全局组件和私有组件
14 全局组件
15 
16 
17 私有组件
18 
19 
20 3、组件使用
21 <mycom1></mycom1>
22 
23 
24 -->
25 <div id="app">
26     <p>{{msg}}</p>
27     <mycom1></mycom1>
28     <my-com2></my-com2>
29     <login></login>
30 </div>
31 
32 <template id="tmpl">
33     <div>
34         <h2>template1</h2>
35         <h4>好用,不错!</h4>
36     </div>
37 </template>
38 <template id="login">
39     <div>
40         <h2>这是login组件</h2>
41     </div>
42 </template>
43 <script src="../js/vue.js"></script>
44 <script>
45     Vue.component('mycom1', {
46         template: '#tmpl'
47     });
48     Vue.component('myCom2', {
49         template: '#tmpl'
50     });
51     let vm = new Vue({
52         el: '#app',
53         data: {
54             msg: '我有一只小毛驴，我永远也不骑'
55         },
56         components:{
57             //组件名称，组件对应的模板对象
58             login:{ // 定义实例内部私有组件的
59                 template: '#login'
60             }
61         }
62     });
63 </script>
64 </body>
65 </html>

 

 

 

 

 

 

 
posted @ 2020-04-22 14:41  范仁义  阅读(193)  评论(0)    收藏  举报