十五、Template 制作模版

矫情吗；* 2022-05-03 07:56 258阅读 0赞

#                               Template 制作模版 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <title>template使用</title>
    </head>
    <body>
        <h1>template使用</h1>
    
        <hr>
        <div id="app"></div>
    
        
        使用标签< template id="demo2">的方式挂载：<author id="author"></author>
        <template id="demo2">
            <h2 style="color:red">我是template标签模板</h2>
        </template>
    
        <br>
        使用id的方式< div id="author">挂载： <div id="x-template"></div>
        <script type="x-template" id="demo3">
            <h2 style="color:red">我是script标签模板</h2>
        </script>
    
    
    
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                    message:'hello Vue!'
                },//直接为id=app这个节点挂载这个模板
                template:`
                        <h1 style="color:red">我是选项模板</h1>
                      `
            })
    
            //template标签模板
            var author=new Vue({
                el:'#author',
                data:{
                    message:'hello Vue!'
                },
                template:'#demo2'
            })
    
            //script标签模板
            var template=new Vue({
                el:'#x-template',
                data:{
                    message:'hello Vue!'
                },
                template:'#demo3'
            })
        </script>
    </body>
    </html>