1、直接在构造器中写template选项。
注意:template选项标签的符号是上撇号,比较特殊。
<script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'helloworld!' }, template: ` <h2 style="color:red">我是一个选项模板</h2> ` }) </script>2、标签直接写模板,还要在构造器中的data中进行id绑定
<div id="app"> {{message}} <template id="n2"> <h2 style="color:red">我是一个标签模板</h2> </template> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'helloworld!', template: '#n2' }, }) </script>3、script标签模板
这种方式适合外部引用,在外部写一个模板,然后在构造器中声明
<script type="x-template" id="n3"> <h2 style="color:red">我是一个script标签模板</h2> </script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'helloworld!', template: '#n2' }, template: '#n3' }) </script>