vue中template的三種寫法

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

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

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

第二種（使用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元素彌補了此方式的缺點'
            }
        })

第三種（使用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 '
            }
        })