1.1通过template标签定义模板
//显示用户列表的模板(网页)
<template id=template01>
<div>
<h1>这是一个列表</h1>
<p>
这是一个表格
</p>
</div>
</template>
1.2将模板注册到Vue的Component中
//将列表注册到vue
Vue.component('hello',{
template:'template01',
});
1.3在div中使用模板
<div id="app">
<hello></hello>
</div>
1.4完成代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="assets/vue-router.min-2.7.0.js"></script> <script src="assets/vue.min-v2.5.16.js"></script> </head> <body> <template id="template01"> <div> <h1>这是一个列表</h1> <p> 这是一个个表格 </p> </div> </template> <div id="app"> <hello></hello> </div> <script> Vue.component('hello',{ template:'#template01', }); new Vue({ el:'#app', }); </script> </body>