include、extends用法和区别
extends
extends指继承父模板的框架,将里面的部分内容换成子模版需要的东西即可。
语法:{% extends ‘public/base.html’ %}
extends后面可加相对路径,也可使用变量
如:
page1.html:
{% extends 'public/base.html' %}
{% block title %}page1{% endblock %}
{% block content %}<div id="test"><a>这里是page1的content</a><input type="button" value="点我弹窗" @click="click1"/><input v-model="message"/><p>{[message]}</p></div>{% endblock %}
{% block script %}<script src="/static/public/vue.js"></script><script src="/static/main/page1.js"></script>
{% endblock %}
base.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}base{% endblock %}</title>
</head>
<body>
{% block header %}<div id="app1"><a>模板头部内容</a><input type="button" value="点我弹窗" @click="click1"/></div>
{% endblock %}{% block content %}
{% endblock %}{% block body %}<a>模板主体内容</a>
{% endblock %}{% block footer %}<a>模板底部内容</a>
{% endblock %}
{% block script %}
{% endblock %}
{% block style %}
{% endblock %}
<a>这里的数据是固定不会被改变的</a>
</body></html>
浏览器中的page1.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>page1</title>
</head>
<body><div id="app1"><a>模板头部内容</a><input type="button" value="点我弹窗" @click="click1"/></div><div id="test"><a>这里是page1的content</a><input type="button" value="点我弹窗" @click="click1"/><input v-model="message"/><p>{[message]}</p></div><a>模板主体内容</a><a>模板底部内容</a><a>这里的数据是固定不会被改变的</a><script src="/static/public/vue.js"></script><script src="/static/main/page1.js"></script>
</body>
</html>
注意extends一定要写在最上方。
父模板base.html中定义的block块有几个子模版中就有几个,父模板中block名字自取,子模版可以重写父模板中的block,名字相同即可,但是子模版不能在block块之外写代码,父模板block之外的代码子模版只能得到不能修改。
子模版也可以在父模板的block中添加内容,如下:
{% block footer %}{{ block.super }}这里是子模版添加的内容
{% endblock %}
使用{{block.super}}告诉浏览器这一块是增加的内容,不是替换。
include
在Django的模板系统中,可以使用include这一语法:{% include ‘public/base2.html’ %}
include是指将后面引入的html文件中的所有代码都放到被引入文件的对应位置
include后面可加相对路径,也可使用变量
如:
page2.html:
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>page2</title>
</head>
<body>
{% include 'public/base2.html' %}
</body>
</html>
public/base2.html:
<div id="app1"><a>模板内容</a><input type="button" value="点我弹窗" @click="click1"/><a>message</a>
</div>
导入后浏览器中的page2.html:
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>page2</title>
</head>
<body>
<div id="app1"><a>模板内容</a><input type="button" value="点我弹窗" @click="click1"/><a>message</a>
</div>
</body>
</html>
可以看到base2.html被导入到了page2.html文件中,相当于代码复用。
总结
extends主要用于同一主题的网页,网页之间的框架大体相同,include主要用于多个html中有相同的代码。
二者是可以一起使用的,这么看extends和include用处刚好是相反的。
include、extends用法和区别相关推荐
- UML 用例图中include,extends,uses的区别
区别extends . use.include extends是对已有用例的扩展 use是使用了另一个用例 include,是指一个用例包含另一个用例 extends的关键在于,他不会修改原有的用例说 ...
- kmalloc/kfree,vmalloc/vfree函数用法和区别
kmalloc/kfree,vmalloc/vfree函数用法和区别 1.kmalloc 1>kmalloc内存分配和malloc相似,除非被阻塞否则他执行的速度非常快,而且不对获得空间清零. ...
- PHP中include和require的区别详解
PHP中include和require的区别详解 1.概要 require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每 ...
- Java多线程问题--schedule函数和scheduleAtFixedRate的用法和区别
本文内容部分引自<Java多线程编程核心技术>,感谢作者!!! 代码地址:https://github.com/xianzhixianzhixian/thread.git schedule ...
- include和require的区别
细节决定成败! 1.引用文件方式 对include()来说,在include()执行时文件每次都要进行读取和评估:而对于require()来说,文件只处理一次(实际上,文件内容替换了require() ...
- python 类变量、实例变量、参数、实例方法、类方法、静态方法 的用法和区别
#!/usr/bin/env python # -*- encoding: utf-8 -*- """ @Introduce : 类变量.实例变量.参数.实例方法.类方法 ...
- Java 泛型中? super T和? extends T的区别
原文链接 李璟(jlee381344197@gmail.com) 经常发现有List<? super T>.Set<? extends T>的声明,是什么意思 ...
- Javascript:history.go()和history.back()的用法和区别
Javascript:history.go()和history.back()的用法和区别 简单的说就是:go(-1): 返回上一页,原页面表单中的内容会丢失:back(): 返回上一页,原页表表单中 ...
- iOS之路9-#import 与#include和 @class的区别
2019独角兽企业重金招聘Python工程师标准>>> #import 与#include和 @class 的区别? @class 一般用于头文件中需要声明该类的某个实例变量的时候用 ...
最新文章
- modelsim do文件仿真
- 牛客多校10 - Decrement on the Tree(边权转点权+思维)
- 2018年工业机器人销量排位_工业机器人年销量连续七年居世界首位 专家建议开辟新市场...
- Java 查看指定文件最后的修改时间
- 我使用的Chrome插件列表
- Arcpy 去除shp文件ZM值代码及工具箱
- hbase 2.0.5的下载及安装
- python三菱fx3u通讯_【案例】三菱FX3UPLC的无线通讯讲解
- 囍游记----[转_]
- 输入法规则(V模式输入)
- Spring batch批量处理框架最佳实践
- html 设置图片左对齐,CSS设置图片的对齐
- jquery实现下拉框
- Pytorch入门实战 | 第P2周:彩色图片识别
- 【Mac软件推荐】10个你不能没有的Mac菜单栏应用程序
- java学习书籍推荐
- Easyexcel数据追加模式
- GSM模块的调试(二)
- [AFCTF2018]One Secret, Two encryption(考点:公钥解析,gcd())
- 尚硅谷谷粒商城项目P16前端项目renren-fast-vue的bug,耗时三天终于运行起来了
热门文章
- 网站服务器带宽1000m,各类网站服务器要配置多少带宽?
- 《华为机试》——MP3光标位置 及 洗牌
- Starting Tomcat v9.0 Server at localhost` has encountered a problem解决办法
- 许可错误无法连接至许可服务器系统,错误:FLEXlm 错误:-15 无法连接到许可服务器...
- 分享两个漂亮的色彩设计工具
- Java Process详解
- 百度+阿里+腾讯+笔试题目(2020届)
- CORDOVA+VUE打包APK文件无法访问数据接口
- 深度学习框架-Backbone汇总
- bootstrap-table的使用(3)--自定义搜索功能,数据库查询一个时间段内的内容并显示为例