如何使用vue.js切換當前視圖？

Question

我仍然試圖根據用戶操作（例如，單擊菜單項）來查找易於切換視圖。我閱讀文檔，看起來像我可以做到這一點Dynamic_Components所以我寫了下一個代碼：我不明白爲什麼我什麼也沒看到。我錯過了什麼？

var GuestMenu = Vue.extend({ 
     template: ` 
       <p>Guest</p> 
      `}); 

    var UserMenu = Vue.extend({ 
     template: ` 
       <p>User</p> 
      `}); 

Vue.component('guestmenu', GuestMenu); 
Vue.component('usermenu', UserMenu); 

var App = Vue({ 
    el: 'body', 
    data: 
    { 
     currentView: 'guestmenu' 
    } 
    }) 

App.currentView: 'guestmenu' 

https://jsfiddle.net/cjyr0g8j/

Answer 1

1. 實際加載vue.js地方。
2. App.currentView ='guestmenu'。
3. Vue是一個構造函數，你需要用new來調用它。如果你忘記了，它甚至會對你大喊：[Vue warn]: Vue is a constructor and should be called with the 'new' keyword
4. 從不安裝到或。這也是一個控制檯警告！

var GuestMenu = Vue.extend({ 
 
     template: ` 
 
       <p>Guest</p> 
 
      `}); 
 

 
    var UserMenu = Vue.extend({ 
 
     template: ` 
 
       <p>User</p> 
 
      `}); 
 
      
 
Vue.component('guestmenu', GuestMenu); 
 
Vue.component('usermenu', UserMenu); 
 

 
var App = new Vue({ 
 
    el: '#app', 
 
    data: 
 
    { 
 
     currentView: 'guestmenu' 
 
    } 
 
    }) 
 

 
App.currentView = 'usermenu'

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    <component :is="currentView"> </component> 
 
</div>