Vue系列之 => vue组件创建

创建方式一

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13 
14 <body>
15     <div id="app">
16         <!-- 如果要使用组件，直接把组件的名称以HTML标签的形式，引入到页面中即可 -->
17         <!-- 注册组件使用的驼峰命名，在引用的时候要用 - 分开并转换成小写 -->
18         <my-com1></my-com1>
19     </div>
20     <script>
21         // 1.1 使用Vue.extend来创建全局的Vue组件。
22         var com1 = Vue.extend({
23             template : '<h1>这是组件化的</h1>'
24         })
25         //1.2 使用Vue.component('组件的名称,创建出来的组件模板对象)
26         Vue.component('myCom1',com1)
27 
28         //另一种写法
29         // Vue.component('myCom1',Vue.extend({
30         //     template : '<h1>这是组件化的</h1>'
31         // }))
32         
33         var vm = new Vue({
34             el: '#app',
35             data: {},
36             methods: {
37 
38             },
39         })
40     </script>
41 </body>
42 
43 </html>

创建方式二

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13 
14 <body>
15     <div id="app">
16         <!-- 使用标签形式引入组件 -->
17         <mycom2></mycom2>
18     </div>
19     <script>
20         Vue.component('mycom2',{
21             // 任何方式创建的组件必须只能有一个根元素
22             // 错误 ：-> template : '<h1>这是组件化的</h1><span>123</span>'
23             template : '<div><h1>这是组件化的</h1><span>123</span></div>'
24         })
25 
26         var vm = new Vue({
27             el: '#app',
28             data: {},
29             methods: {
30 
31             },
32         })
33     </script>
34 </body>
35 
36 </html>

创建方式三

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13 
14 <body>
15     <div id="app">
16        <!-- 以标签的形式 引用组件 -->
17        <mycom3></mycom3>
18     </div>
19 
20     <!-- 在被VUE控制的app外层，使用template元素定义组件的模板结构 -->
21     <template id="tmp">
22         <div>
23             <h1>这是通过template元素在外部定义的组件结构，这个方式有代码的智能提示和高亮</h1>
24             <h4>这是一个h4标签</h4>
25         </div>
26     </template>
27 
28     <script>
29        Vue.component('mycom3',{
30            template : '#tmp'
31        })
32         var vm = new Vue({
33             el: '#app',
34             data: {},
35             methods: {
36 
37             },
38         })
39     </script>
40 </body>
41 
42 </html>

之前三种方式都是全局创建的

私有化组件创建方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13 
14 <body>
15     <div id="app1">
16         <login></login>
17     </div>
18 
19     <div id="app">
20        <!-- 以标签的形式 引用组件 -->
21        <mycom3></mycom3>
22     </div>
23 
24     <!-- 在被VUE控制的app外层，使用template元素定义组件的模板结构 -->
25     <template id="tmp">
26         <div>
27             <h1>这是通过template元素在外部定义的组件结构，这个方式有代码的智能提示和高亮</h1>
28             <h4>这是一个h4标签</h4>
29         </div>
30     </template>
31     <template id="tmp1">
32         <div>
33             <h1>这是私有组件template渲染的</h1>
34         </div>
35     </template>
36     <script>
37        Vue.component('mycom3',{
38            template : '#tmp'
39        })
40         var vm = new Vue({
41             el: '#app',
42             data: {},
43             methods: {
44 
45             },
46         })
47 
48         var vm2 = new Vue({
49             el : '#app1',
50             data : {},
51             methods : {},
52             filters : {}, //过滤器
53             directives : {}, //指令
54             components : { //私有组件
55                 // login 组件名
56                 login : {
57                     template : '#tmp1'
58                 }
59             },
60 
61             // 钩子函数
62             beforeCreate() {},
63             created(){},
64             beforeMount(){},
65             mounted(){},
66             beforeUpdate(){},
67             updated(){},
68             beforeDestroy(){},
69             destroyed(){},
70         })
71     </script>
72 </body>
73 
74 </html>

Vue系列之 => vue组件创建

猜你喜欢