VUE学习之路（二）----全局API之Template 制作模版

最新推荐文章于 2023-08-20 10:19:39 发布

lxhguard

最新推荐文章于 2023-08-20 10:19:39 发布

阅读量543

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/ferrysoul/article/details/81432163

版权

VUE 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Template</title>
    <script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
    <h1>Template三种写法</h1>
    <hr>
    <div id="app">
        {{ message }}
    </div>

    <template id="dd2">
            <h2 style="color:red">我是Template标签模板</h2>
    </template>


    <!-- 下面是是第三种写法： 好处：可以进行外部引用-->
    <script type="x-template" id="dd3" src="">
            <h2 style="color:red">我是Script标签模板</h2>
    </script> 
    

    

    <script type="text/javascript">
        var app = new Vue({
            el : '#app',
            data : {
                message:'hello world'
            },
            //第一种写法：适用于很小的模板
            // template:`
            //     <h2 style="color:red">我是选项模板</h2>
            // `        
            
            //第二种写法：需要在html中增加template标签
            // template:"#dd2"

            //第三种写法在这里加上：
            template:"#dd3"



           
        })
       
    </script>
</body>
</html>

lxhguard

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习之路（二）----全局API之Template 制作模版

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫