vue中template的三種寫法

第一種（使用模板字符串）早期字符串拼接年代

 <div id="app"></div>

 new Vue({
            el: "#app",
            template: '<div>\
                            <h1>{{message}}</h1>\
                        <div>',
            data: {
                message: '字符串拼接'
            }
        })

####第二種（使用script元素）HTML5標准之前的寫法 ```

<script type="text/x-template" id="tem">
    <div>
        <h1>{{message}}</h1>
    </div>
</script>

new Vue({
el: "#app",
template: '#tem',
data: {
message: 'HTML5標准之前的寫法，存在一定弊端（可自行google）
之后HTML5發布的template元素彌補了此方式的缺點'
}
})

<br>

####第三種（使用template元素）HTML5標准之后的寫法【第二種的升級版】

<template id="tem">
    <div>
        <h1>{{message}}</h1>
    </div>
</template>

new Vue({
el: "#app",
template: '#tem',
data: {
message: 'HTML5中的template標簽 ,注意：
template是HTML5中的標簽，
不是自定義標簽，
也不是Vue中的組件
MDN-docs：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template '
}
})