04-Vue-template的两种写法

template的两种写法

<!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></title>
    <!-- vue.min.js -->
    <script src="./js/vue.min.js"></script>
</head>
<body>

    <!-- dom -->
    <div id="app">
    <my-component1></my-component1>
    </div>

    <!-- 模板写法1 -->
    <template id="tmpl1">
        <h1>我是模板写法1</h1>
    </template>

    <!-- 模板写法2 -->
    <script type="text/html" id="tmpl2">
        <h1>我是模板写法2</h1>
    </script>
    
    <script>
    
        // 创建vue实例
        new Vue({
            el: '#app',
            data: {},
            components: {    // 注册局部组件
                'my-component1': {
                    template: `#tmpl2`
                }
            }
        })
        
    </script>

</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 10,919评论 0 32
  • 模板标签除了几个常用的,还真心没有仔细了解一下,看到2.0发布后,翻译学习一下。 本文尽量忠实原著,毕竟大神的东西...
    海明_fd17阅读 6,146评论 0 5
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,006评论 0 25
  • 1、template 1.1 template的基本用法 通常,对于一些简单的、需要展示在页面中的内容,且在项目中...
    中野梓阅读 7,813评论 1 2
  • 成功学很热,鸡汤很美味,但同样,有反驳的,是非真假难辨,但有一点可以确定,实践证明行之有效才能有发言权。没有实践的...
    33174dada65f阅读 1,397评论 0 0