首页 > 代码库 > vue组件大集合 component

vue组件大集合 component

  vue组件分为全局组件、局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等。

  1.   Vue.extend 创建一个组件构造器
  2.   template:‘‘  组件要显示的内
  3.   component(‘‘,);  注册组件收两个参数,第一个参数用来使用的标签,第二个参数标识要显示内容的构建器

  详情请看vue的API:  http://v1-cn.vuejs.org/guide/components.html

一、简单的组件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>孙三峰-博客园</title>
 6         <script type="text/javascript" src="js/vue.js" ></script>
 7     </head>
 8     <body>
 9         <div id="box">
10             <aaa></aaa>
11         </div>
12     </body>
13     <script type="text/javascript">
14         var AAA = Vue.extend({        //创建一个组件构造器
15             template:<strong>123</strong>    //组件要显示的内容
16         });
17         //var a = new AAA();    相当于又new了一个Vue,具有它的所有属性(一般不用这种方法)
18         Vue.component(aaa,AAA);    //注册组件
19         new Vue({
20             el:#box,
21             data:{
22                 bSign:true
23             }
24         })
25     </script>
26 </html>

二、给组件添加事件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>孙三峰-博客园</title>
 6         <script type="text/javascript" src="js/vue.js" ></script>
 7     </head>
 8     <body>
 9         <div id="box">
10             <aaa></aaa>
11         </div>
12     </body>
13     <script type="text/javascript">
14         Vue.component(aaa,{
15             data(){
16                 return {
17                     msg:我是p标签
18                 };
19             },
20             methods:{
21                 sj:function(){
22                     alert(111);
23                 }
24             },
25             template:<p @click="sj()">{{msg}}</p>    //接收的data值必须是函数的形式,函数必须返回一个对象
26         })
27         new Vue({
28             el:#box,
29             data:{
30                 
31             },
32         })
33     </script>
34 </html>

 三、vue动态组件--选项卡

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>组件选项卡--孙三峰博客园</title>
 6         <script type="text/javascript" src="js/vue.js" ></script>
 7     </head>
 8     <body id="box">
 9         <input type="button" @click="s=‘suning‘" value="选项卡1" /><!--is后面跟着组件的名称 -->
10         <input type="button" @click="s=‘saning‘" value="选项卡2" />
11         <comment :is=‘s‘></comment>
12     </body>
13     <script type="text/javascript">
14          new Vue({
15              el:#box,
16              data:{
17                  s:suning
18              },
19              components:{
20                  suning:{
21                      template:<p>选项卡1</p>
22                  },
23                  saning:{
24                      template:<p>选项卡2</p>
25                  }
26              },
27          })
28     </script>
29 </html>

 四、路由的嵌套

 1 <html>
 2     <head>
 3         <title>vue-router--孙三峰的博客</title>
 4         <script type="text/javascript" src="js/vue.js" ></script>
 5         <script type="text/javascript" src="js/vue-resource.js" ></script>
 6         <script type="text/javascript" src="js/vue-router.js" ></script>
 7     </head>
 8     <style>
 9         .v-link-active{
10             color: red;
11         }
12     </style>
13     <body>
14         <div id="box">
15             <ul>
16                 <li>
17                     <a v-link="{path:‘/home‘}">首页</a>
18                 </li>
19                 <li>
20                     <a v-link="{path:‘/news‘}">新闻</a>
21                 </li>
22             </ul>
23             <div>
24                 <router-view></router-view><!-- 展示内容-->
25             </div>
26         </div>
27         <template id="home">
28             <h3>home</h3>
29             <a v-link="{path:‘/home/login‘}">登陆</a>
30             <a v-link="{path:‘/home/reg‘}">注册</a>
31             <router-view></router-view>
32         </template>
33         <template id="news">
34             <h3>新闻</h3>
35             <div>
36                 <a v-link="{path:‘/news/detail/001‘}">新闻001</a>
37                 <a v-link="{path:‘/news/detail/002‘}">新闻002</a>                
38             </div>
39             <router-view></router-view>
40         </template>
41         <template id="detail">
42             <!--{{$route | json}}-->
43             {{$route.params | json}}    <!-- 关于$route请看五,$route的参数 -->
44         </template>
45     </body>
46     <script>
47         var App = Vue.extend();
48         var Home = Vue.extend({
49             template:#home
50         });
51         var News = Vue.extend({
52             template:#news
53         });
54         var Detail = Vue.extend({
55             template:#detail
56         });
57         var router = new VueRouter();
58         router.map({
59             home:{
60                 component:Home,
61                 subRoutes:{
62                     login:{
63                         component:{
64                             template:你点击了登陆
65                         }
66                     },
67                     reg:{
68                         component:{
69                             template:你点击了注册
70                         }
71                     }
72                 }
73             },
74             news:{
75                 component:News,
76                 subRoutes:{
77                     /detail/:id:{
78                         component:Detail
79                     }
80                     
81                 }
82             },
83         });
84         router.redirect({
85             /:/home
86         })
87         router.start(App,#box);
88     </script>
89 </html>

五、$route的参数

 

  • $route中包含路由的其他信息
  • $route.params 得到当前的参数
  • $route.path 得到当前的路径
  • $route.query 得到数据

vue组件大集合 component