<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <script src="vue.js"></script>

    </head>

    <body>

        <div>

        <h1>--内联模板--</h1>

        <div id="example1">

            <my-component inline-template>

              <div>

                <p>These are compiled as the component's own template.</p>

                <p>Not parent's transclusion content.</p>

              </div>

            </my-component>

        </div>

        <script>

        Vue.component('my-component', {})

        // Vue 根实例

        var example1 = new Vue({

            el: '#example1'

        })

        </script>

        </div>

        <div>

        <h1>--X-Template--</h1>

        <div id="example2">

            <hello-world></hello-world>

        </div>

        <script type="text/x-template" id="hello-world-template">

          <p>Hello hello hello</p>

        </script>

        <script>

        Vue.component('hello-world', {template: '#hello-world-template'})

        // Vue 根实例

        var example2 = new Vue({

            el: '#example2'

        })

        </script>

        </div>

    </body>

</html>

运行效果图：

内联模板、X-Template的更多相关文章

  1. Vue 内联模板(inline-template)

    内联模板不会把子组件的内容分发渲染到父组件中 而是需要在父组件中实现其内容的渲染 父组件 <template> <div> <template-inline inline ...

  2. Vue 组件6内联模板

    如果子组件有inline-template特性,组件将把它的内容当做模板,而不是把它当做分发内容,这样模板更灵活. <my-component inline-template> <d ...

  3. vue 组件高级用法（递归组件，内联模板，动态组件，异步组件）

  4. 不可或缺 Windows Native (16) - C++: 函数重载, 缺省参数, 内联函数, 函数模板

    [源码下载] 不可或缺 Windows Native (16) - C++: 函数重载, 缺省参数, 内联函数, 函数模板 作者:webabcd 介绍不可或缺 Windows Native 之 C++ ...

  5. C++ primer（八）--内联函数 引用变量 引用传递函数参数 函数重载/模板/模板具体化

    一.内联函数     常规函数和内联函数的区别在于C++编译器如何将他们组合到程序中.编译过程的最终产品是可执行程序--由一组机器语言指令组成.运行程序时,操作系统将这些指令载入到计算机内存中,因此每 ...

  6. C++内联函数、函数模板之于头文件

    一.基本说明 C++标准中提到,一个编译单元是指一个.cpp文件以及它所include的所有.h文件,.h文件里的代码将会被扩展到包含它的.cpp文件里,然后编译器编译该.cpp文件为一个.obj文件 ...

  7. [C++ Primer Plus] 第8章、函数探幽（一）程序清单——内联、引用、格式化输入输出、模板、decltype

    程序清单8.1(inline内联函数) #include<iostream> using namespace std; inline double square(double x) {// ...

  8. 堆（stack） 之 c 和 c++模板实现（空类默认成员函数 初谈引用 内联函数）

    //stack 的基本操作 #include <iostream> using namespace std; const int maxn = 3; typedef struct Stac ...

  9. c++hook内联汇编模板

    1 #include "Windows.h" 2 #include "tlhelp32.h" 3 #include "String.h" 4 ...

随机推荐

  1. 【C/C++】string的长度

    一般用 s.length() s.size() 两种 size也可以用于vector string和vector的区别 string输入直接cin vector一般类似压栈pushback 输入一般是 ...

  2. Go modules基础精进，六大核心概念全解析（上）

    点击一键订阅<云荐大咖>专栏,获取官方推荐精品内容,学技术不迷路! Go 语言做开发时,路径是如何定义的?Go Mudules又为此带来了哪些改变?本文将会全面介绍Go modules六大 ...

  3. 干掉visio，这个画图神器太香了

    前言 看过我以往文章的小伙伴可能会发现,我的大部分文章都有很多配图.我的文章风格是图文相结合,更便于大家理解. 最近有很多小伙伴发私信问我:文章中的图是用什么工具画的.他们觉得我画的图风格挺小清新的, ...

  4. windows下更换MySql数据库数据文件夹位置

    详细解决地址 ,感谢博主  :https://blog.csdn.net/u010953266/article/details/56499361 概述 由于更换硬盘,系统重新安装了一遍,原来的mysq ...

  5. gitlab官方api使用

    目录 一.简介 二.技术要点 三.案例 一.简介 Gitlab作为一个开源.强大的分布式版本控制系统,已经成为互联网公司.软件开发公司的主流版本管理工具.使用过Gitlab的都知道,想要提交一段代码, ...

  6. Jenkins实例 自由风格项目

    目录 一.General 二.源码管理 三..构建触发器 四.构建环境 五.构建 六.构建后操作 一.General General是构建任务的一些基本配置.名称,描述之类的. 项目名称:是刚才创建构 ...

  7. pycharm的破解和基本使用

    pycharm的破解 pycharm的账号注册 在完成安装后打开pycharm软件,需要选择购买或是使用.点击试用,选择进入官网注册账号. 进入官网后选择邮箱登录,输入自己的邮箱,点击sign up ...

  8. 利用 clip-path 实现动态区域裁剪

    背景 今天逛 CodePen,看到了这样一个非常有意思的效果: CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学 ...

  9. [BUUCTF]PWN——0ctf_2017_babyheap

    0ctf_2017_babyheap 附件 步骤: 例行检查,64位程序,保护全开 本地试运行一下,看看大概的情况,经典的堆题的菜单 main函数 add() edit() delete() show ...

  10. [BUUCTF]REVERSE——[SUCTF2019]SignIn

    [SUCTF2019]SignIn 附件 步骤: 无壳,64位ida载入 程序调用了 __gmpz_init_set_str 函数,这是一个 GNU 高精度算法库,在RSA加密中见过几次,加上6553 ...