<!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. spring-cloud-alibaba-dependencies版本问题

    org.springframework.cloud的spring-cloud-alibaba-dependencies管理的nacos最新版本是0.9.0.RELEASE,已经不再维护了,用起来有版本 ...

  2. 前端两大框架 vue 和 react 的区别

    1. 设计思想 vue: vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计: react: 采用函数式编程,推崇纯组件,数据不可变,单向数据流: 2. 编写语法 vue: 采用单文 ...

  3. css实现项目中的加载动画

    // =========================================第一个动画 <template> <!-- 这个组件用于 页面下滑到底部时 展示加载动画 -- ...

  4. jQuery - 的几种删除方法，还有他们的区别

    1.empty() 清空节点,它能清空元素中的所有后代节点,不能删除自己本身这个节点 2.remove() 该节点与该节点所包含的所有后代节点将同时被删除,提供传递一个筛选的表达式,删除指定合集中的元 ...

  5. python中numpy库ndarray多维数组的的运算：np.abs(x)、np.sqrt(x)、np.modf(x)等

    numpy库提供非常便捷的数组运算,方便数据的处理. 1.数组与标量之间可直接进行运算 In [45]: aOut[45]:array([[ 0, 1, 2, 3], [ 4, 5, 6, 7], [ ...

  6. shell脚本 screen管理

    一.简介 源码地址 日期:2018/4/12 介绍:使用screen来启动程序,这个脚本可以管理screen 效果图: 二.使用 适用:centos6+ 语言:中文 注意:请先写一个脚本来启动java ...

  7. BIT 常态化在线CTF系统 pwn题目

    偶然得到这个平台,发现是BIT的CTF平台,应该是平时的阶段性的训练题目.看了看题,其他方向的题目感觉都是入门题,但是pwn题目,发现还是比入门题难一点点的,来记录一下. pwn1 栈上任意位置的读写 ...

  8. GoLang设计模式17 - 访客模式

    说明 访客模式是一种行为型设计模式.通过访客模式可以为struct添加方法而不需要对其做任何调整. 来看一个例子,假如我们需要维护一个对如下形状执行操作的库: 方形(Square) 圆形(Circle ...

  9. java 输入输出IO流：标准输入/输出System.in；System.out；System.err；【重定向输入System.setIn(FileinputStream);输出System.setOut(printStream);】

    Java的标准输入输出分别通过System.in和System.out来代表的,在默认情况下它分别代表键盘和显示器,当程序通过System.in来获取输入时,实际上是从键盘读取输入 当程序试图通过 S ...

  10. IDEA设置默认(指定)的注释作者信息

    有时候我们想在IDEA里面创建的时候就默认设置一个指定的作者信息 填入作者信息 然后点击ok /** * * @author yvioo */ 然后我们新建文件的时候就会自动带上这个了,模板可以根据自 ...