vue中template的三种写法

Posted 2022-09-12 liu-di

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

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