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

 <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. 日元兑换——国内兑换需要护照和签证，国外的机场有兑换ATM

    在中国换日元:在中国的商业银行都可以换取日元,但是换汇者必须持有护照.签证等材料.换汇的汇率是按照即时汇率进行结算,如是现钞则按钞买价兑换,另外还要收取0.5%的手续费. 在日本换日元:除了在日本银行 ...

  2. BZOJ_1532_[POI2005]Kos-Dicing_二分+网络流

    BZOJ_1532_[POI2005]Kos-Dicing_二分+网络流 Description Dicing 是一个两人玩的游戏,这个游戏在Byteotia非常流行. 甚至人们专门成立了这个游戏的一 ...

  3. python requests 调用restful api

    #!/usr/bin/python# -*- coding: utf-8 -*- import jsonimport requestsfrom urlparse import urljoin BASE ...

  4. [九省联考2018]一双木棋chess——搜索+哈希

    题目:bzoj5248 https://www.lydsy.com/JudgeOnline/problem.php?id=5248 洛谷P4363 https://www.luogu.org/prob ...

  5. repo+manifests+git方式管理安卓代码

    repo+manifests+git方式管理安卓代码 1.repo的获取 repo只是google用Python脚本写的调用git的一个脚本,主要是用来下载.管理Android项目的软件仓库.(也就是 ...

  6. JAVA THINGKING （二）随笔

    1. 基本数据员的默认值 Boolean false Char '\u0000'(null) byte (byte)0 short  (short)0 int  0 long 0L float 0.0 ...

  7. Java Socket实战之二：多线程通信

    转自:http://developer.51cto.com/art/201202/317544.htm 上一篇文章说到怎样写一个最简单的Java Socket通信,但是在上一篇文章中的例子有一个问题就 ...

  8. 【187】◀▶ 编辑博客的文本格式 & 装饰

    参考:博客园页面设置 参考:共享一下我的自定义CSS博客皮肤(2012.3) 一.文字周围带框框   插入一个代码,要折叠式,如下图所示: 史蒂夫 示例 选中“示例”,将其拷贝,然后黏贴,就有如下的效 ...

  9. java笔记之IO3读操作

    * 字节输入流操作步骤: * A:创建字节输入流对象 * B:调用read()方法读取数据,并把数据显示在控制台 * C:释放资源 *  * 读取数据的方式: * A:int read():一次读取一 ...

  10. bzoj 1625: [Usaco2007 Dec]宝石手镯【背包】

    裸的01背包 #include<iostream> #include<cstdio> using namespace std; int c,n,w,v,f[20001]; in ...