<!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. 一文读懂RESTful架构

    转载自https://zhuanlan.zhihu.com/p/381554129 RESTful架构究竟是什么 别着急,想要了解RESTful,我们先来了解一位大佬Roy Thomas Fieldi ...

  2. MySQL 用户权限相关命令

    ##1.创建用户: create user test identified by '123456';##identified后面跟密码 ##2.查询所有用户: select user from mys ...

  3. java 9+版本中，接口的内容总结

    java 9+版本中,接口的内容可以有: 1.成员变量其实是常量,格式: [public]  [static]  [final] 数据类型 常量名称=数据值: 注意: 常量必须进行赋值,而且一旦赋值不 ...

  4. vue插槽理解

    1.插槽作用:父向子传递一段Html代码块 2.分类: (1)默认插槽:规则:父给子传,用父,不传,用子. (2)具名插槽:适用于一个页面有多个插槽时,需要做区分,使用name属性.给插槽取个名字 ( ...

  5. Linux编译安装、压缩打包、定时任务管理

    编译安装 压缩打包 定时任务管理 一.编译安装 使用源代码,编译打包软件 1.特点 1.可以定制软件 2.按需构建软件 2.编译安装 1.下载源代码包 wget https://nginx.org/d ...

  6. Java网络多线程编程：对象流错误导致Connection reset

    Java网络多线程编程--对象流错误导致Connection reset 在老韩的网络多线程编程实战项目中,发生了如下报错: 服务器端和客户端均发生了报错,在确定相应对象流代码完全没有问题之后,回归定 ...

  7. 200行代码理解Asp.Net Core

    转自https://www.cnblogs.com/xiandnc/p/11480735.html

  8. Lucene 基础类型

    Lucene 索引文件中,用一下基本类型来保存信息:1. Byte:是最基本的类型,长 8 位(bit).2. UInt32:由 4 个 Byte 组成.3. UInt64:由 8 个 Byte 组成 ...

  9. 【LeetCode】Swap Nodes in Pairs 解题报告

    Swap Nodes in Pairs [LeetCode] https://leetcode.com/problems/swap-nodes-in-pairs/ Total Accepted: 95 ...

  10. 【LeetCode】94. Binary Tree Inorder Traversal 解题报告(Python&C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 递归 迭代 日期 题目地址:https://leetcode.c ...