<!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#】【MySQL】C#连接MySQL数据库（一）代码

    C#连接MySQL数据库 准备工作 1.环境安装 安装MySQL For Visual Studio<<点击进入官网下载 第一个要下载安装,第二个下载后将MySQL.data添加到Visu ...

  2. EntityFramework Core （一）记一次 .net core 使用 ef 6

    使用传统的sql去操作数据库虽然思路更加清晰,对每一步数据库读写操作都能监控到,但是对大数据存储,或存储规则复杂的程序就需要编写大量的SQL语句且不易维护..orm大大方便了复杂的数据库读写操作, 让 ...

  3. Explain的详细使用

    官方文档 https://dev.mysql.com/doc/refman/5.7/en/explain-output.html explain俩种类型 explain extended 会在 exp ...

  4. bjdctf_2020_babyrop2

    这道题是一道基本题,正因为它经典,所以需要重点记录一下. 这道题考察格式化字符串泄露canary,然后rop获得libc版本,之后拿到shell.拿到程序之后我们先检查一下保护... 开启了堆栈不可执 ...

  5. HMS Core版本发布公告

    新增动作捕捉能力.通过简单拍摄即可获得人体3D骨骼关键点数据,广泛应用于虚拟形象.体育运动和医学分析等场景: 3D物体建模能力iOS版本上线. 查看详情>> 新增道路吸附能力.可根据坐标点 ...

  6. 记一次Linux bash 命令行卡顿排查之警惕LD_PRELOAD环境变量

    现象: 通过屏幕或者ssh登录Linux操作系统(本例:Ubuntu)后,执行ls 需要数秒才返回 strace -c ls 查看实际命令调用耗时并不长 对比和正常执行的主机命令执行时,加载的库文件差 ...

  7. ymal文档格式 处理

    Python也可以很容易的处理ymal文档格式,只不过需要安装一个模块. 参考文档:http://pyyaml.org/wiki/PyYAMLDocumentation

  8. Elasticsearch 和 solr 的区别

    背景:它们都是基于Luence搜索服务器基础之上开发的一款优秀高性能的企业级搜索服务器.也都是基于分词技术构建的倒排索引的方式进行查询 开发语言:java 诞生时间: solr  :2004年 es ...

  9. layDate设置开始日期选择框和结束日期选择框 之间的相互验证方法

    var startDate = laydate.render({ elem: '#_select_start_date', //结束日期框的ID type: 'date', done: functio ...

  10. [LeetCode]485. Max Consecutive Ones 找到最大的连续的1的个数

    题目描述 输入只有0和1的数组(长度为正整数,且<10000),找到最大的连续1的个数 比如[1,1,0,1,1,1],输出3 思路 遍历数组,统计当前连续个数curCount和最大连续值max ...