1、模版在字符串中
<div id="app"> <todoitem></todoitem> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('todoitem',{ template:'<div>Component</div>' }); new Vue({ el:'#app' }); </script>
2、script标签
<div id="app"> <todoitem></todoitem> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/x-template" id="myTemplate2"> <div> Component2 </div> </script> <script> Vue.component('todoitem',{ template:'#myTemplate2' }); new Vue({ el:'#app' }); </script>
3.template标签
<div id="app"> <todoitem></todoitem> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <template id="myTemplate3"> <div> Component3 </div> </template> <script> Vue.component('todoitem',{ template:'#myTemplate3' }); new Vue({ el:'#app' }); </script>
4.单文件组件
这种方法常用在vue单页应用中。详情看官网:https://cn.vuejs.org/v2/guide/single-file-components.html 创建.vue后缀的文件,组件Hello.vue,放到components文件夹中 <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'hello', data () { return { msg: '欢迎!' } } } </script> app.vue <!-- 展示模板 --> <template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> // 导入组件 import Hello from './components/Hello' export default { name: 'app', components: { Hello } } </script> <!-- 样式代码 --> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> </body>