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

vue组件大集合 component

2024-10-09 16:54:02   213人阅读

　　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


联系
我们