学习笔记(15):Vue2.x从入门到实战-Template 制作模版

立即学习:https://edu.csdn.net/course/play/6823/135325?utm_source=blogtoedu

Template制作模板

template三种写法：

1、直接在构造器中写的模板

var app=new Vue({
        el:'#app',
        data:{
            msg:'hello world',
            num:'red'
        },
         template:`
            <h2 :style="{color:num}">我是写在构造器里面的Template</h2>
         `
    })

2、写在template标签里的模板

<template id="demo">
    <h2 :style="{color:num}">我是写在template标签里的模板</h2>
</template>

var app=new Vue({
        el:'#app',
        data:{
            msg:'hello world',
            num:'red'
        },
        template:'#demo'
    })

3、写在script标签里的标签

<script type="x-template" id="demo1">
    <h2 :style="{color:num}">我是写在script标签里的模板</h2>
</script>

<script>
    var app=new Vue({
        el:'#app',
        data:{
            msg:'hello world',
            num:'red'
        },
        template:'#demo1'
    })
</script>

新手一枚，若有不足，请指正！