<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <a href="" @click.prevent="whos='mycom1'">mycom1组件</a> <a href="" @click.prevent="whos='mycom2'">mycom2组件</a> <!-- vue自带标签,来展示对应名称的组件 component 是个占位符 :is 属性用来指定要展示的组件名称 --> <component :is="whos"></component> </div> <template id="temp1"> <h3>mycom1主件111111111111111</h3> </template> <template id="temp2"> <h3>mycom2主件2222222222222222</h3> </template> <script type="text/javascript"> // 主件可以有data数据,但是data必须是一个方法,方法内部还得返回一个对象 Vue.component("mycom1",{ template:'#temp1', }) Vue.component("mycom2",{ template:'#temp2', }) var vm=new Vue({ el:'#app', data:{ whos:"mycom1", }, methods:{ } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .v-enter,.v-leave-to{ opacity: 0; transform: translateY(120PX); } .v-enter-active,.v-leave-active{ transition: all 0.6s ease; } </style> </head> <body> <div id="app"> <a href="" @click.prevent="whos='mycom1'">mycom1组件</a> <a href="" @click.prevent="whos='mycom2'">mycom2组件</a> <transition mode="out-in"> <component :is="whos"></component> </transition> </div> <template id="temp1"> <h3>mycom1主件111111111111111</h3> </template> <template id="temp2"> <h3>mycom2主件2222222222222222</h3> </template> <script type="text/javascript"> // 主件可以有data数据,但是data必须是一个方法,方法内部还得返回一个对象 Vue.component("mycom1",{ template:'#temp1', }) Vue.component("mycom2",{ template:'#temp2', }) var vm=new Vue({ el:'#app', data:{ whos:"mycom1", }, methods:{ } }) </script> </body> </html>