vue组件分为全局组件、局部组件和父子组件，其中局部组件只能在el定义的范围内使用， 全局组件可以在随意地方使用，父子组件之间的传值问题等。
- Vue.extend 创建一个组件构造器
- template:‘‘ 组件要显示的内容
- 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 得到数据
时间： 2024-10-12 04:32:36