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