! DOCTYPE html html head title hello world vue / title meta charset ="utf-8" / / head body div id ="app" v-cloak !-- 缺省挂载 currentView 变量指定的组件 -- component :is ="currentView" / component button @click ="handleChangeView
<!DOCTYPE html> <html> <head> <title> hello world vue </title> <meta charset="utf-8" /> </head> <body> <div id="app" v-cloak> <!-- 缺省挂载 currentView 变量指定的组件 --> <component :is="currentView"></component> <button @click="handleChangeView(‘A‘)">A</button> <button @click="handleChangeView(‘B‘)">B</button> <button @click="handleChangeView(‘C‘)">C</button> <button @click="handleChangeViewHome()">Home</button> </div> </body> </html> <script src="jquery-3.1.1.js"></script> <script src="vue.js"></script> <script> $(document).ready(function() { }); </script> <script> Vue.component(‘Home‘, { template: ‘<div> 外部组件 </div>‘, props: {}, data: function() { return {} }, methods: {} }); var app = new Vue({ el: ‘#app‘, data: { currentView: ‘comA‘ }, computed: {}, methods: { handleChangeView: function(x) { this.currentView = ‘com‘ + x; }, handleChangeViewHome: function() { this.currentView = ‘Home‘; } }, components: { comA: { template: ‘<div>组件A</div>‘ }, comB: { template: ‘<div>组件B</div>‘ }, comC: { template: ‘<div>组件C</div>‘ } }, mounted: function() {} }); </script>