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

 <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. svn问题：在eclipse里面使用SVN，怎么实现版本回滚呢？

    共有4个答案 我要回答» JustForFly 回答于 2012-04-27 10:20 举报   想回到SVN服务器端的最新版本就使用 team->还原.. 想回到SVN服务器端的其它版本使用 ...

  2. 烹调方案 （DP）

    传送门 一道非常好的DP.看这个可能会觉得与01背包很像,不过这个的问题在于现做的菜肴会影响到后面的菜肴的价值. 我们在进行01背包DP时,一件物品的价值是不随着其被枚举的位置改变而改变的,但是这道题 ...

  3. 【188】HTML + CSS + JS 学习网站

    RGB 取色器      HTML 参考手册      CSS 参考手册      HTML 在线测试工具 上面源码(博客园 - HTML): <style><!-- p.bg_gr ...

  4. 【黑金教程笔记之001】veriloghdl 扫盲文—笔记&勘误

    001_veriloghdl 扫盲文—笔记&勘误 2014/10/31 原文作者:akuei2 联系方式:blog.ednchina.con/akuei2 勘误001: Page 3 0.1 ...

  5. bzoj 1997: [Hnoi2010]Planar【瞎搞+黑白染色】

    脑补一下给出的图:一个环,然后有若干连接环点的边,我们就是要求这些边不重叠 考虑一下不重叠的情况,两个有交边一定要一个在环内一个在环外,所以把相交的边连边,然后跑黑白染色看是否能不矛盾即可(可能算个2 ...

  6. [POI2008]BLO-Blockade 【无向图tarjan/鸽点】By cellur925

    题目传送门 lyd无向图tarjan的例题. 一句话题意(不得不佩服lyd老师的高度概括能力):在一张无向连通图上,求出每个点被破坏(去掉与这个点相关的所有边,不去掉这个点)后,无向图中使i,j不连通 ...

  7. 状压dp之二之三 炮兵阵地/玉米田 By cellur925

    一.简单的状压dp 玉米田 题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ ...

  8. 正睿多校联盟训练Week6

    并没有参加 Problem A.阿瓦分蛋糕输入文件: cake.in输出文件: cake.out时间限制: 1 second空间限制: 512 megabytes阿瓦为了庆祝自己自己成长为了一只可爱的 ...

  9. windows环境安装和使用curl与ES交互

    一.下载安装 去官网下载对应版本的包,解压后打开CMD切换到对应目录(我的目录,E:\file\I386)下运行CURL.exe文件, 如果把该CURL.exe文件复制到C:\Windows\Syst ...

  10. iOS 应用打包 设备兼容性问题（Build Active Architecture Only）

    在把应用打包安装到iPod Touch上面时,设备提示不兼容,所以就有几种猜想: 1.CPU架构问题,因为我手里这个iPod Touch的CPU是A5,是32位的: 2.TARGETS里面相关的设置对 ...