vue中template的三種寫法

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

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

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

<br> ####第二種（使用script元素）HTML5標準以前的寫法 ``` <div id="app"></div>

<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標準以後的寫法【第二種的升級版】

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

<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 ' } })