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

 <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. iOS7 push/pop转场动画

    前言 iOS 7之后,苹果提供了自定义转场动画的API,我们可以自己去定义任意动画效果.本篇为笔者学习push.pop自定义转场效果的笔记,如何有任何不正确或者有指导意见的,请在评论中留下您的宝贵意见 ...

  2. 字符串输出输入函数,const修饰符,内存分区,动态内存管理,指针和函数,结构体

    1.字符串输出输入函数 读入字符串的方法: 1) scanf 特点:不能接收空格 2) gets 特点:可以接受含有空格的字符串 ,不安全 3) fgets(); 特点:可以帮我们自动根据数组的长度截 ...

  3. Linux 下的静态（函数）库、动态（函数）库

    0. 基本 在命名上,静态库的名字一般是 libxxx.a,动态库的名字一般是 libxxx.so,有时 libxxx.so.major.minor,xxx 是该 lib 的名字,major 是主版本 ...

  4. hdu 2476 (string painter) ( 字符串刷子 区间DP)

    String painter Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  5. yield示例分析

    yield示例分析 public class TestYield { private static final Object lock = new Object(); public static vo ...

  6. MongoDB安全事件的防范与反思

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 近段时间来,全球范围内数以万计的MongoDB实例被攻击,作为旨在为用户提供最优MongoDB云服务的网易蜂 ...

  7. bzoj 4815: [Cqoi2017]小Q的表格【欧拉函数+分块】

    参考:http://blog.csdn.net/qq_33229466/article/details/70174227 看这个等式的形式就像高精gcd嘛-所以随便算一下就发现每次修改(a,b)影响到 ...

  8. 洛谷 P4009 汽车加油行驶问题 【最小费用最大流】

    分层图,建k层,设(i,j,0)为点(i,j)的满油状态,全图的流量都是1,因为重复走到一个点没有意义.如果当前点是加油站,那么它向它上左的点连费用为a的边,向下右连费用为a+b的边: 否则,这个点的 ...

  9. Luogu P2858 [USACO06FEB]奶牛零食Treats for the Cows 【区间dp】By cellur925

    题目传送门 做完A Game以后找道区间dp练练手...结果这题没写出来(哭). 和A Game一样的性质,从两边取,但是竟然还有天数,鉴于之前做dp经常在状态中少保存一些东西,所以这次精心设计了状态 ...

  10. [CQOI 2006]线段树之简单题

    Description 有一个n个元素的数组,每个元素初始均为0.有m条指令,要么让其中一段连续序列数字反转--0变1,1变0(操作1),要么询问某个元素的值(操作2).例如当n=20时,10条指令如 ...