<!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. 【Linux】【Services】【NetFileSystem】Samba

    1. 简介 1.1. 背景:case is initiative by 某windows无良人事,需求是需要一整块4T的硬盘,由于ESXi5最大支持一块盘是2T大小,而且不可以使用windows动态卷 ...

  2. vueAPI (data,props,methods,watch,computed,template,render)

    data Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化.实例创建之后,可以通过vm.$data来访问原始数据 ...

  3. python的urllib学习

    1.基本方法 urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, capath=None, cadefault=Fals ...

  4. SpringBoot Redis 发布订阅模式 Pub/Sub

    SpringBoot Redis 发布订阅模式 Pub/Sub 注意:redis的发布订阅模式不可以将消息进行持久化,订阅者发生网络断开.宕机等可能导致错过消息. Redis命令行下使用发布订阅 pu ...

  5. 静态日志框架Extensioner.Logging

    静态日志框架,输出文本文件,基于log4net扩展,轻量,方便,无侵入! 使用方法 执行Install-Package Extensioner.Logging -Version 2.0.0导入Nuge ...

  6. 字节面试:SYN 包在什么场景下会被丢弃?

    大家好,我是小林. 之前有个读者在秋招面试的时候,被问了这么一个问题:SYN 报文什么时候情况下会被丢弃? 好家伙,现在面试都问那么细节了吗? 不过话说回来,这个问题跟工作上也是有关系的,因为我就在工 ...

  7. UVA10976 分数拆分 Fractions Again?! 题解

    Content 给定正整数 \(k\),找到所有的正整数 \(x \geqslant y\),使得 \(\frac{1}{k}=\frac{1}{x}+\frac{1}{y}\). 数据范围:\(0& ...

  8. epoll linux和协程gevent的区别

    epoll linux  底层是libevent.so模块实现的 gevent也是IO多路复用,底层是libevent.so模块实现的是更上层的封装 Twsited异步网络框架.代码量非常大.在开源p ...

  9. 请注意JS方法,方法同名,参数个数不一样是不能区分方法的,

    请注意JS方法,方法同名,参数个数不一样是不能区分方法的, 所以要区分方法,只能利用方法名不同来区分,而不能利用参数个数与参数类型来分.

  10. C++封装C语言读写文件

    自己项目需要,封装C语言读写文件. 为了兼容低版本的编译器,因为低版本的编译器(比如,Vs2010,Vs2008)他们可能不支持 modern c++. 项目 使用 cmake管理的项目. 可以在 g ...