vue中的模板使用template来实现
1、选项模板
<div id="app"></div><script type="text/javascript"> // 实例化 new Vue({ el: '#app', data: { message: 'hello' }, template:`<h1 style="color:red">我是选项模板</h1>` });</script>
2、<template>标签模板
<div id="app"> <template id="demo2"> <h2 style="color:red">我是template标签模板</h2> </template></div><script type="text/javascript"> // 实例化 new Vue({ el: '#app', data: { message: 'hello' }, template:'#demo2' });</script>
3、<script>标签模板
<div id="app"></div><script type="x-template" id="demo3"> <h2 style="color:red">我是script标签模板</h2></script><script type="text/javascript"> // 实例化 new Vue({ el: '#app', data: { message: 'hello' }, template:'#demo3' });</script>
完整示例代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue入门之组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"> <!-- template标签模板 --> <template id="demo2"> <h2 style="color:red">我是template标签模板</h2> </template></div><!-- script标签模板 --><script type="x-template" id="demo3"> <h2 style="color:red">我是script标签模板</h2></script><script type="text/javascript"> // 实例化 new Vue({ el: '#app', data: { message: 'hello' }, // 选项模板 //template:`<h1 style="color:red">我是选项模板</h1>` //template:'#demo2' template:'#demo3' });</script></body></html>