vue组件大集合 component
Posted 孙三峰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件大集合 component相关的知识，希望对你有一定的参考价值。
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 得到数据
以上是关于vue组件大集合 component的主要内容，如果未能解决你的问题，请参考以下文章