<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue</title>

         <style>

         </style>

     </head>

     <body>

         <div id="app">

             <my-component></my-component>

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

                 <div>这是组件的内容</div>

             </script>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             //vue提供里另一种定义模板的方式

             //在<script>标签里面使用text/x-template类型，并且指定一个id,将这个id赋给template

             Vue.component('my-component', {

                 template: '#my-component'

             })

             var app = new Vue({

                 el:'#app'

             });    

         </script>

     </body>

 </html>

vue X-Template的更多相关文章

  1. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  2. vue 模板template

    入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  3. vue写template的4种形式

    1.template标签(非单文件组件) <template id="t1"> <h2>66666666</h2> </template& ...

  4. [Vue-rx] Stream an API using RxJS into a Vue.js Template

    You can map remote data directly into your Vue.js templates using RxJS. This lesson uses axios (and ...

  5. vue中template的作用及使用

     先来看一个需求:下图div用v-for做了列表循环,现在想要span也一起循环,应该怎么做? 有3种方法可以实现 ①:直接用v-for对span也循环一次(该方法虽然可以使用,但不要用这种方式,因为 ...

  6. vue中Template 制作模版

    一.直接写在选项里的模板 直接在构造器里的template选项后边编写.这种写法比较直观,但是如果模板html代码太多,不建议这么写. javascript代码: var app=new Vue({ ...

  7. Vue组件template模板字符串几种写法

    在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...

  8. vue用template还是JSX？

    各自特点 template 模板语法(HTML的扩展) 数据绑定使用Mustache语法(双大括号) <span>{{title}}<span> JSX JavaScript的 ...

  9. vue中template的三种写法

    第一种(使用模板字符串)早期字符串拼接年代 <div id="app"></div> new Vue({ el: "#app", tem ...

  10. VScode 中 vue文件template中不能使用tab补齐标签

    选择 文件-->首选项-->设置-->搜索  emmet,选择 编辑 setting.json, 添加下列代码: "emmet.includeLanguages" ...

随机推荐

  1. vue 改变某个页面的背景色

    beforeCreate(){ // 添加背景色 document.querySelector('body').setAttribute('style', 'background-color:#fff ...

  2. common-dbcp2数据库连接池参数说明（转）

    转自:http://bsr1983.iteye.com/blog/2092467 由于commons-dbcp所用的连接池出现版本升级,因此commons-dbcp2中的数据库池连接配置也发生了变化, ...

  3. 人生苦短_我用Python_str(字符串)_001

    # 字符串 str str_1 = 'hello,selenium,888,999' # 切片/截断 # 更换大小写 upper/lower 英文字符 print(str_1.upper()) pri ...

  4. Hadoop（一）阿里云hadoop集群配置

    集群配置 三台ECS云服务器 配置步骤 1.准备工作 1.1 创建/bigdata目录 mkdir /bigdatacd /bigdatamkdir /app 1.2修改主机名为node01.node ...

  5. Antd Vue 问题集合

    1.table列宽问题 在滚动列时,如果要指定列宽,不要指定所有列宽,至少预留一列不执行列宽. 同时:scroll="{ x: width}", width的值要是所有列的宽度之和 ...

  6. vim 更改注释颜色

    在 ~/.vimrc 添加命令: highlight Comment ctermfg=green

  7. CentOS安装 netdata 实时监视 Linux 系统性能

    作为一个 Linux 系统的管理员,为了随时了解系统资源的占用情况,有必要使用专门的系统监视工具.如果你需要对 Linux 系统.应用程序.SNMP 设备进行实时的性能监视,那么 netdata 这个 ...

  8. 如何在原生Android项目里嵌入Cordova

    背景: 这段时间在维护一个Cordova混合项目,以前稍微接触过Cordova,也写过简单的纯纯的Cordova的Demo,但是没有尝试过混合原生的Cordova. 在接到项目后比较了一下项目架构和C ...

  9. css3 盒模型与 伪元素综合应用案例

    先来简略理解下盒模型: 在 css3 之前,盒模型默认为 box-sizing : content-box,这种模式下的盒模型计算大小方式为,width + padding + border : 而 ...

  10. Spring Cloud配置中心内容加密

    从配置获取的配置默认是明文的,有些像数据源这样的配置需要加密的话,需要对配置中心进行加密处理. 下面使用对称性加密来加密配置,需要配置一个密钥,当然也可以使用RSA非对称性加密,但对称加密比较方便也够 ...