vue.js 组件引用之初级

1. 构造组件，及组件引用：1.1 构造一个组件，1.2 注册一个组件，1.3 实例化Vue()即引用Vue()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="./vue/vue.js"></script>
 8     <title>Document</title>
 9 </head>
10 <body>
11     <div id="box">
12         <ccc></ccc>
13     </div>
14     <ccc></ccc>
15     <script>
16         // 构造组件，使用extend()字样进行
17         var c = Vue.extend({
18             template: '<h3>这是一个H3标题标签</h3>'
19         });
20         // 注册组件，注册一个名称为ccc ,内容为c的组件
21         Vue.component('ccc', c);
22         new Vue({
23             el: "#box",
24         });
25     </script>
26 </body>
27 </html>

运行结果：

2. 引用几次，就调用几次

 1 <body>
 2     <div id="box1">
 3         <ccc></ccc>
 4     </div>
 5     <div id="box2">
 6         <ccc></ccc>
 7     </div>
 8     <ccc></ccc>
 9     <script>
10         // 构造组件
11         var c = Vue.extend({
12             template: "<h3>这是一个测试字符串</h3>"
13         });
14         // 注册组件
15         Vue.component("ccc", c);
16         // 引用Vue
17         new Vue({
18             el: "#box1",
19         });
20         new Vue({
21             el: "#box2",
22         });
23     </script>
24 </body>

运行结果：

3. 局部注册，只有局部才能引用

 1 <body>
 2     <div id="box1">
 3         <ccc></ccc>
 4     </div>
 5     <div id="box2">
 6         <ccc></ccc>
 7     </div>
 8     <ccc></ccc>
 9     <script>
10         // 构造组件
11         var c = Vue.extend({
12             template: "<h3>这是一个测试字符串</h3>"
13         });
14         // 引用Vue + 局部注册
15         new Vue({
16             el: "#box1",
17             components: {
18                 'ccc': c,
19             },
20         });
21         // 虽然有引用，但是没有注册，所以也不会进行替换
22         new Vue({
23             el: "#box2",
24         });
25     </script>
26 </body>

运行结果：

4. 父组件与子组件，即在父组件下注册子组件，同样可以实现替换

5.注册全局组件

 1 <body>
 2     <div id="box1">
 3         <ccc></ccc>
 4     </div>
 5     <div id="box2">
 6         <ccc></ccc>
 7     </div>
 8     <ccc></ccc>
 9     <script>
10         Vue.component('ccc', {
11             template: "这是一个测试组件，这是ccc",
12         });
13 
14         new Vue({
15             el: "#box1"
16         });
17     </script>
18 </body>

运行结果：

6. 简化组件的注册

 1 <body>
 2     <div id="box1">
 3         <aaa></aaa>
 4         <bbb></bbb>
 5     </div>
 6 
 7     <ccc></ccc>
 8     <script>
 9         var a = Vue.extend({
10             template: "<h3>这是组件a 的内容</h3>",
11         });
12         var b = Vue.extend({
13             template: "<h3>这是组件b 的内容</h3>",
14         });
15         new Vue({
16             el: "#box1",
17             components: {
18                 'aaa': a,
19                 'bbb': b,
20             }
21         });
22     </script>
23 </body>

运行结果：

7. 使用script 标签分离模板：

 1 <body>
 2     <div id="box1">
 3         <aaa></aaa>
 4         <bbb></bbb>
 5     </div>
 6     <script type="x-template" id="a">
 7         <h3>我是组件a</h3>
 8         <p>我是段落a</p>
 9     </script>
10     <script type="x-template" id="b">
11         <h3>我是组件b</h3>
12         <p>我是段落b</p>
13     </script>
14     <script>
15         new Vue({
16             el: "#box1",
17             components: {
18                 'aaa': {
19                     template: '#a',
20                 },
21                 'bbb': {
22                     template: '#b'
23                 }
24             }
25         });
26     </script>
27 </body>

运行结果：

posted on 2018-03-08 19:17 huanying2015 阅读(160) 评论(0) 编辑收藏举报