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

  1.  <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  5. </head>
  6. <body>
  7.     <div id="app">
  8.         <my-component></my-component>
  9.         <script type="text/x-template" id="my-component">
  10.             <div>
  11.                 <p>This is the content of component</p>
  12.                 <p>Hello Vue!</p>
  13.             </div>
  14.  
  15.         </script>
  16.     </div>
  17.         <script>
  18.             Vue.component('my-component',{
  19.                     template:'#my-component'
  20.             });
  21.             var app=new Vue({
  22.                 el:"#app"
  23.             });
  24.         </script>
  25.     </body>
  26.     </html>
  1.  <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  5. </head>
  6. <body>
  7.     <div id="app">
  8.         <my-component></my-component>
  9.         <script type="text/x-template" id="my-component">
  10.             <div>
  11.                 <p>This is the content of component</p>
  12.                 <p>Hello Vue!</p>
  13.             </div>
  14.  
  15.         </script>
  16.     </div>
  17.         <script>
  18.             Vue.component('my-component',{
  19.                     template:'#my-component'
  20.             });
  21.             var app=new Vue({
  22.                 el:"#app"
  23.             });
  24.         </script>
  25.     </body>
  26.     </html>

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

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

  1. Vue.component('my-complate',{
  2.             template:'#x-template'
  3. })

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

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  5. </head>
  6. <body>
  7.     <div id="app">
  8.         <my-component></my-component>
  9.         <script type="text/x-template" id="my-component">
  10.  
  11.                 <div>
  12.                 <p>This is the content of component</p>
  13.                 <p>Hello Vue!</p>
  14.             </div>
  15.  
  16.         </script>
  17.     </div>
  18.         <script>
  19.             Vue.component('my-component',{
  20.                     template:'#my-component'
  21.             });
  22.             var app=new Vue({
  23.                 el:"#app"
  24.             });
  25.         </script>
  26.     </body>
  27.     </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. easy_install uncompyle6 egg

    localhost:~ # easy_install uncompyle6-3.0.1-py3.6.eggProcessing uncompyle6-3.0.1-py3.6.eggCopying un ...

  2. 并不对劲的bzoj1861: [Zjoi2006]Book 书架

    传送门-> 这题的正确做法是splay维护这摞书. 但是并不对劲的人选择了暴力(皮这一下很开心). #include<algorithm> #include<cmath> ...

  3. zip压缩文件测试

    http://tech.it168.com/a2009/0604/583/000000583382_5.shtml ];                MessageBox.Show(string.F ...

  4. 【转】jenkins上配置robotframeworkride自动化脚本任务

    jenkins上配置robotframeworkride自动化脚本任务 编写好的自动化脚本,集成在jenkins上进行自动运行于监控,这里采用分布式构建,在一台slave上进行任务构建与自动化脚本的运 ...

  5. robotframework 随机选中下拉框中的值

    示例脚本: click element id=provinceName #点击地区 省 wait until element is enabled xpath=.//*[@id='provinceNa ...

  6. Java-Runoob-高级教程-实例-字符串：08. Java 实例 - 字符串分割(StringTokenizer)

    ylbtech-Java-Runoob-高级教程-实例-字符串:08. Java 实例 - 字符串分割(StringTokenizer) 1.返回顶部 1. Java 实例 - 字符串分隔(Strin ...

  7. express中cookie的使用和cookie-parser的解读

    https://segmentfault.com/a/1190000004139342?_ea=504710 最近在研究express,学着使用cookie,开始不会用,就百度了一下,没有百度到特别完 ...

  8. Android中string.xml中的的标签xliff:g（转载）

    转自:http://blog.csdn.net/xuewater/article/details/25687987 在资源文件中写字符串时,如果这个字符串时动态的,又不确定的值在里面,我们就可以用xl ...

  9. patch用法 （转载）

    转载:http://shenze60.blog.163.com/blog/static/315747722009724113026896/ 首先介绍一下diff和patch.在这里不会把man在线文档 ...

  10. 51nod 1227 平均最小公倍数【欧拉函数+杜教筛】

    以后这种题能用phi的就不要用mu-mu往往会带着个ln然后被卡常致死 把题目要求转换为前缀和相减的形式,写出来大概是要求这样一个式子: \[ \sum_{i=1}^{n}\sum_{j=1}^{i} ...