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 得到數據