今天，我们来讲一个比较有趣的一个功能吧
先来看一段代码示例：

 <html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <my-component></my-component>

        <script type="text/x-template" id="my-component">

            <div>

                <p>This is the content of component</p>

                <p>Hello Vue!</p>

            </div>

        </script>

    </div>

        <script>

            Vue.component('my-component',{

                    template:'#my-component'

            });

            var app=new Vue({

                el:"#app"

            });

        </script>

    </body>

    </html>
 <html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <my-component></my-component>

        <script type="text/x-template" id="my-component">

            <div>

                <p>This is the content of component</p>

                <p>Hello Vue!</p>

            </div>

        </script>

    </div>

        <script>

            Vue.component('my-component',{

                    template:'#my-component'

            });

            var app=new Vue({

                el:"#app"

            });

        </script>

    </body>

    </html>

不知大家有没有注意到，第一个“< script>”中type是x-template。
这是一种比较有用的功能。如果在声明一个组件时，在template中定义模板，如果要换行的话，要加上一个“\”，如果是比较简单的模板还好，如果比较多的话，就会感觉眼花缭乱的，因此我们有一个看起来舒服的方式：x-template

只要写出< script type="text/x-template" id="x-template" >< /script> 在其中间就可以愉快的写HTML代码了。不用考虑换行等问题。这里注意，要加一个id名称，并将其赋给template.然后在声明的组件中加一个：

Vue.component('my-complate',{

            template:'#x-template'

})

不过，Vue的初衷并不是滥用它，因为它将模板与组件的其他定义分离了。因此，我们可以用它来开发一些中小型产品，这是比较方便的。
但据我观察，只能显示处于一个块中的，

<html>

<head>

    <meta charset="utf-8">

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <my-component></my-component>

        <script type="text/x-template" id="my-component">

                <div>

                <p>This is the content of component</p>

                <p>Hello Vue!</p>

            </div>

        </script>

    </div>

        <script>

            Vue.component('my-component',{

                    template:'#my-component'

            });

            var app=new Vue({

                el:"#app"

            });

        </script>

    </body>

    </html>

以上会显示两行的内容。

以下只会显示第一个< div >标签内容

原因是因为template定义的模板，一定要用一个根元素包裹起来，每个组件必须只有一个根元素，比如上例中，如果去掉< div>标签，那么就相当于有两个根元素。

.

Vue之x-template(1)的更多相关文章

  1. vue error:The template root requires exactly one element.

    error:[vue/valid-template-root] The template root requires exactly one element. 原因: 因为vue的模版中只有能一个根节 ...

  2. [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    转载自:https://segmentfault.com/a/1190000006435886 解决办法:添加package.config.js配置文件中,添加本文章的红色部分代码 import vu ...

  3. Vue学习笔记 template methods,filters,ChromeDriver,安装sass

    ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80 ...

  4. Kendo-Grid for Vue API and Template

    写此博客的原因:在做项目时前端用的vue,后端用的jfinal.在前端veu中调用了kendo grid插件,但是在官方文档中对kendo grid for vue 的api和template都不太详 ...

  5. [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

    原文链接https://blog.csdn.net/xiaomajia029/article/details/88320233 问题描述: 原因分析:在项目配置的时候,默认 npm 包导出的是运行时构 ...

  6. You are using the runtime-only build of Vue where the template compiler is not available. Either pre

    在升级脚手架到vue-cli3.0版本的时候出现了这个报错: [Vue warn]: You are using the runtime-only build of Vue where the tem ...

  7. You are using the runtime-only build of Vue where the template compiler is not available.

    使用vue-cli搭建的项目,启动报错 You are using the runtime-only build of Vue where the template compiler is not a ...

  8. You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    异常 You are using the runtime-only build of Vue where the template compiler is not available. Either ...

  9. 聊聊Vue.js的template编译

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  10. Vue中的template标签的使用和在template标签上使用v-for

    我们知道  .vue 文件的基本结构是: <template> ........ </template> <script> export default { nam ...

随机推荐

  1. POJ - 2516 Minimum Cost（最小费用最大流）

    1.K种物品,M个供应商,N个收购商.每种物品从一个供应商运送到一个收购商有一个单位运费.每个收购商都需要K种物品中的若干.求满足所有收购商需求的前提下的最小运费. 2.K种物品拆开来,分别对每种物品 ...

  2. pom.xml内容没有错，但一直报错红叉 解决办法

    转自:http://www.cnblogs.com/sxdcgaq8080/p/5590254.html [maven] pom.xml内容没有错,但一直报错红叉 解决办法 1.首先看一下下面的这两个 ...

  3. ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（二）数据库初始化、基本登录页面以及授权逻辑的建立

    前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...

  4. bzoj 3979: [WF2012]infiltration【瞎搞+随机化】

    参考:https://www.cnblogs.com/ccz181078/p/5622200.html 非常服气.jpg 就是random_shuffle几次然后顺着找,ans取min... #inc ...

  5. Java Genericity

    四.  Java Genericity 1.  Genericity 泛型 泛型 <T> 1. 泛型就是参数化类型 2. 作用:安全,方便 3. 适用于对多种数据类型执行相同功能的代码,主 ...

  6. PHP简单实现单点登录功能示例

    1.准备两个虚拟域名 127.0.0.1  www.openpoor.com127.0.0.1  www.myspace.com 2.在openpoor的根目录下创建以下文件 index.PHP 1 ...

  7. 从零开始通过idea插件将一个spring boot项目部署到docker容器里运行

    实操:将一个spring boot项目部署到docker容器里运行 实验需要的环境: 腾讯云+Ubuntu 16.04 x64+idea+插件docker integration+daocloud 第 ...

  8. 给Ambari集群里安装可视化分析利器工具Hue步骤（图文详解）

    扩展博客 以下,是我在手动的CDH版本平台下,安装Hue. CDH版本大数据集群下搭建Hue(hadoop-2.6.0-cdh5.5.4.gz + hue-3.9.0-cdh5.5.4.tar.gz) ...

  9. 数据结构 - 动态单链表的实行（C语言）

    动态单链表的实现 1 单链表存储结构代码描述 若链表没有头结点,则头指针是指向第一个结点的指针. 若链表有头结点,则头指针是指向头结点的指针. 空链表的示意图: 带有头结点的单链表: 不带头结点的单链 ...

  10. 200 Number of Islands 岛屿的个数

    给定 '1'(陆地)和 '0'(水)的二维网格图,计算岛屿的数量.一个岛被水包围,并且通过水平或垂直连接相邻的陆地而形成.你可以假设网格的四个边均被水包围.示例 1:11110110101100000 ...