vue-router、利用第三方插件、利用組件等等.我用的是組件，為什么不用路由，有3個原因：
1、因為我認為使用路由，再切換tab的時候，路勁地址是變化的，比如：/#/home、/#/app等等，這樣做==Native hybrid==的同學就會發愁了，尤其是返回按鈕，需要設置歷史數據，我個人覺得太麻煩！
2、根據需求出發。
3、技術太low。
綜上所述，上面已經介紹完我為什么要使用組件了
index.html文件
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>component</title> <style type="text/CSS">*{padding:0;margin:0}#app{width:500px;height:300px;margin:0 auto;background-color:#ddd}.top{height:50px;line-height:50px;width:100%;background-color:#999}.top ul li{display:inline-block;margin:0 10px}.top ul li a{text-decoration:none;color:white}</style> </head> <body> <div id="app"> <div class="top"> <ul> <li @click='tabToggle("tab01");'>Tab001</li> <li @click='tabToggle("tab02");'>Tab002</li> </ul> </div> <div> <component :is='currentView' keep-alive></component> </div> </div> </body> <script type="text/javascript" src='vue.min.js'> </script> <script> var tab01 = Vue.extend({ template: '<p>This is tab01</p>' }) var tab02 = Vue.extend({ template: '<p>This is tab02</p>' }) var app = new Vue({ el: '#app', data: { currentView: 'tab01' }, components: { tab01: tab01, tab02: tab02 }, methods: { tabToggle: function(tabText) { this.currentView = tabText } } }) </script></html>ok,完事兒了！
當然，我不可能只是簡簡單單的一個頁面，一個小demo，如果要應用到項目中，又是另一回事兒。
例如：在 .vue文件中
反反復復，這是什么造成的，對于新手來說，一個不經意間，就造成了，
原因在于data，vue規定，data是一個函數，我這里寫成了對象：
==應修改為：==
查半天資料沒查出個所以然來，那個糾結啊，群里各種找大神啊
太鬧心，以為是 自己寫的組件的問題，各種改，改半天，沒任何效果，后來抱著試試的心態，在頁面上加了個變量，發現，壓根就不起效果，
this.變量名 = "Hello"頁面沒有任何反應，以為是vue版本太高了，不支持，算了，不閑扯了，誰做誰知道！
問題的原因在于：加了一個不存在的方法
得，把它刪除掉就可以了，其他就不介紹了，完成了。OK了！
新聞熱點
疑難解答
