LitElement(二)模板编写基本语法
原文:https://lit-element.polymer-project.org/guide/templates
1、定义一个渲染模板
1.1 基本规则
要用LitElement 组件定义一个模板,必须为你的模板类写一个render方法:
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
render() {
return html`<p>template content</p>`;
}
}
这里 html`...` 中 html 是引用的父类函数,用模板字符串包裹原始的HTML标签
组件的 render 方法可以返回 lit-html 可以渲染的任何内容。通常,它返回单个 TemplateResult 对象(与 html 标记函数返回的类型相同)。
完整的例子
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement { // Implement `render` to define a template for your element.
render(){
/**
* Return a lit-html `TemplateResult`.
*
* To create a `TemplateResult`, tag a JavaScript template literal
* with the `html` helper function.
*/
return html`
<div>
<p>A paragraph</p>
</div>
`;
}
}
customElements.define('my-element', MyElement);
1.2 动态更改模板内容
我们可以通过捕获加载消息作为属性,并根据事件设置属性来改变模板:update-properties.js
import { LitElement, html } from 'lit-element'; /**
* Use this pattern instead.
*/
class UpdateProperties extends LitElement {
static get properties(){
return {
message: String
};
}
constructor() {
super();
this.message = 'Loading';
this.addEventListener('stuff-loaded', (e) => { this.message = e.detail } );
this.loadStuff();
}
render() {
return html`
<p>${this.message}</p>
`;
}
loadStuff() {
setInterval(() => {
let loaded = new CustomEvent('stuff-loaded', {
detail: 'Loading complete.'
});
this.dispatchEvent(loaded);
}, 3000);
}
} customElements.define('update-properties', UpdateProperties);
该例子中为模板元素绑定了一个加载事件,事件函数模拟3秒后改变元素属性值,从而动态改变模板。这是动态改变模板的方法。
注意:每一个模板类都必须引用 import { html, LitElement } from 'lit-element'; 就算套用了其他模板也是一样
2、在模板中使用属性、循环和条件判断
2.1 属性
static get properties() {
return { myProp: String };
}
...
render() {
return html`<p>${this.myProp}</p>`;
}
通过静态的 get properties() 函数指定属性的类型, 构造函数 constructor() 初始化属性的初始值
2.2 循环
html`<ul>
${this.myArray.map(i => html`<li>${i}</li>`)}
</ul>`;
ES6数组的map方法,为每一个数组元素执行括号中的操作
2.3 三目运算符
html`
${this.myBool?
html`<p>Render some HTML if myBool is true</p>`:
html`<p>Render some other HTML if myBool is false</p>`}
`;
完整的例子
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
myString: { type: String },
myArray: { type: Array },
myBool: { type: Boolean }
};
}
constructor() {
super();
this.myString = 'Hello World';
this.myArray = ['an','array','of','test','data'];
this.myBool = true;
}
render() {
return html`
<p>${this.myString}</p>
<ul>
${this.myArray.map(i => html`<li>${i}</li>`)}
</ul>
${this.myBool?
html`<p>Render some HTML if myBool is true</p>`:
html`<p>Render some other HTML if myBool is false</p>`}
`;
}
} customElements.define('my-element', MyElement);
一个包含了 get properties(), constructor(), render() 方法的模板
3、给模板元素绑定属性值
您可以插入JavaScript表达式作为HTML文本内容,基本属性,布尔属性,元素属性和事件处理器的占位符。
- Text content:
<p>${...}</p>
- Attribute:
<p id="${...}"></p>
- Boolean attribute:
?disabled="${...}"
- Property:
.value="${...}"
- Event handler:
@event="${...}"
3.1 绑定到正文
html`<div>${this.prop1}</div>`
3.2 绑定到基本属性
html`<div id="${this.prop2}"></div>`
3.3 绑定到布尔类型属性
html`<input type="text" ?disabled="${this.prop3}">`
3.4 绑定到元素属性
html`<input type="checkbox" .value="${this.prop4}"/>`
3.5 绑定到事件处理程序
html`<button @click="${this.clickHandler}">pie?</button>`
完整的例子
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
static get properties() {
return {
prop1: String,
prop2: String,
prop3: Boolean,
prop4: String
};
}
constructor() {
super();
this.prop1 = 'text binding';
this.prop2 = 'mydiv';
this.prop3 = true;
this.prop4 = 'pie';
}
render() {
return html`
<!-- text binding -->
<div>${this.prop1}</div> <!-- attribute binding -->
<div id="${this.prop2}">attribute binding</div> <!-- boolean attribute binding -->
<div>
boolean attribute binding
<input type="text" ?disabled="${this.prop3}"/>
</div> <!-- property binding -->
<div>
property binding
<input type="text" .value="${this.prop4}"/>
</div> <!-- event handler binding -->
<div>event handler binding
<button @click="${this.clickHandler}">click</button>
</div>
`;
}
clickHandler(e) {
console.log(e.target);
}
} customElements.define('my-element', MyElement);
4、使用slot占位符给模板元素渲染子节点
4.1 slot标签
要实现如下形式的渲染,必须通过slot占位符标签实现
<my-element>
<p>A child</p>
</my-element>
默认情况下,如果元素具有阴影树,则其子元素根本不会渲染。
要渲染子节点,您的模板需要包含一个或多个<slot>元素,这些元素充当子节点的占位符。
例如定义如下形式的模板
render(){
return html`
<div>
<slot></slot>
</div>
`;
}
就可以在 <slot> 标签的位置渲染子节点
<my-element>
<p>Render me</p>
</my-element>
这些子项不会在DOM树中移动,但会像它们是<slot>的子项一样呈现。
任意多个子节点可以填充到一个slot:
<my-element>
<p>Render me</p>
<p>Me too</p>
<p>Me three</p>
</my-element>
4.2 使用命名的slot
要将子节点分配给特定的 slot ,请确保该子节点的 slot 属性与该 slot 的 name 属性匹配:
render(){
return html`
<div>
<slot name="one"></slot>
</div>
`;
}
<my-element>
<p slot="one">Include me in slot "one".</p>
</my-element>
命名 slot 仅接受具有匹配 slot 属性的子节点。
例如:
import { LitElement, html } from 'lit-element'; class MyElement extends LitElement {
render(){
return html`
<div>
<slot name="one"></slot>
<slot name="two"></slot>
</div>
`;
}
}
customElements.define('my-element', MyElement);
one对one,two对two,没有名字的不会被渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script> <script type="module" src="./my-element.js"></script>
<title>lit-element code sample</title>
</head>
<body>
<!-- Assign child to a specific slot --> <my-element>
<p slot="two">Include me in slot "two".</p>
</my-element> <!--
Named slots only accept children with a matching `slot` attribute. Children with a `slot` attribute can only go into a slot with a matching name.
--> <my-element>
<p slot="one">Include me in slot "one".</p>
<p slot="nope">This one will not render at all.</p>
<p>No default slot, so this one won't render either.</p>
</my-element>
</body>
</html>
5、多个模板组合成页面
您可以从其他LitElement模板组成新的LitElement模板。在以下示例中,我们通过导入其他元素并在模板中使用它们来组成新的<my-page>模板:
my-article.js
import { LitElement, html } from 'lit-element'; class MyArticle extends LitElement {
render() {
return html`
<article>article</article>
`;
}
}
customElements.define('my-article', MyArticle);
my-header.js
import { html, LitElement } from 'lit-element'; class MyHeader extends LitElement {
render() {
return html`
${this.headerTemplate}
`;
}
get headerTemplate() {
return html`<header>header</header>`;
}
}
customElements.define('my-header', MyHeader);
my-footer.js
import { LitElement, html } from 'lit-element'; class MyFooter extends LitElement {
render() {
return html`
<footer>footer</footer>
`;
}
}
customElements.define('my-footer', MyFooter);
用以上三个子模版元素组成页面元素my-page.js
import { LitElement, html } from 'lit-element'; import './my-header.js';
import './my-article.js';
import './my-footer.js'; class MyPage extends LitElement {
render() {
return html`
<my-header></my-header>
<my-article></my-article>
<my-footer></my-footer>
`;
}
}
customElements.define('my-page', MyPage);
然后配一个 模板元素整合文件,例如 mian.js
import './my-page.js';
在页面 my-page.html中引用这个文件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lit-element code sample</title>
<script src="main.js"></script>
</head> <body>
<my-page></my-page>
<script src="webcomponents-loader.js"></script>
</body> </html>
此时可能有 index.html, my-page.html两个页面, index.js, main.js两个脚本文件,需要同时打包输出,修改rollup,config.js文件,以数组形式输出多个js文件
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel'; export default [{
input: ['src/index.js'],
output: {
file: 'build/index.js',
format: 'es',
sourcemap: true
},
plugins: [
resolve(),
babel()
],
},{
input: ['src/main.js'],
output: {
file: 'build/main.js',
format: 'es',
sourcemap: true
},
plugins: [
resolve(),
babel()
]
}];
修改package.json中的html打包命令
"scripts": {
"copyindex": "cp src/*.html build",
"copywc": "cp -r node_modules/@webcomponents/webcomponentsjs/bundles build && cp node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js build",
"build": "rm -rf build && mkdir build && npm run copyindex && npm run copywc && rollup -c",
"start": "serve build"
},
就可以在build下生成两个html文件及其对应的js文件了,其他同理可得
6、 lit-html
lit-html作为LitElement的核心,可以使用很多它的其他功能
npm i lit-element@^2.0.0
npm i lit-html@^1.0.0
例如:
import { LitElement, html } from 'lit-element';
import { until } from 'lit-html/directives/until.js'; const content = fetch('./content.txt').then(r => r.text()); html`${until(content, html`<span>Loading...</span>`)}`
读取一个文件内容作为渲染内容
其他详见文档:https://lit-html.polymer-project.org/guide/template-reference#built-in-directives
LitElement(二)模板编写基本语法的更多相关文章
- thinkPHP 模板中的语法知识 详细介绍(十二)
原文:thinkPHP 模板中的语法知识 详细介绍(十二) 本章节:介绍模板中的语法,详细的语法介绍 一.导入CSS和JS文件 ==>记住常量的是大写 1.css link .js sc ...
- (转)dedecms网页模板编写
网页模板就是templets中的htm文件,所以编写模板就是要编写html.这篇文章不是关于标签的具体使用,而是对网页模板的一些理解.包括基本的标签语法,封面模板,列表模板和文档模板的关系. 一 关于 ...
- python MVC、MTV 框架介绍 Django 模板系统常用语法
Django 框架简介一.MVC框架和MTV框架1.MVC 全名Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分.优势: 耦合性低 重用性高 生命 ...
- c/c++ 模板与STL小例子系列<二> 模板类与友元函数
c/c++ 模板与STL小例子系列 模板类与友元函数 比如某个类是个模板类D,有个需求是需要重载D的operator<<函数,这时就需要用到友元. 实现这样的友元需要3个必要步骤 1,在模 ...
- 一、 JSP概述 二、JSP的语法结构 三、JSP内置对象
一.JSP概述###<1>概念 java服务器页面 可以编写动态页面 其内部是以HTML标签为主,可以在HTML标签嵌套java代码 jsp文件以.jsp为后缀 jsp本质上就是一个Ser ...
- iOS 11开发教程(二)编写第一个iOS 11应用
iOS 11开发教程(二)编写第一个iOS 11应用 编写第一个iOS 11应用 本节将以一个iOS 11应用程序为例,为开发者讲解如何使用Xcode 9.0去创建项目,以及iOS模拟器的一些功能.编 ...
- JVM(二):Java中的语法糖
JVM(二):Java中的语法糖 上文讲到在语义分析中会对Java中的语法糖进行解糖操作,因此本文就主要讲述一下Java中有哪些语法糖,每个语法糖在解糖过后的原始代码,以及这些语法糖背后的逻辑. 语法 ...
- Django(二)模板
一.模板概念 1.Django通过模板动态生成html 2.模板的加载位置 模板一般建立在templates文件夹中,全局路径的设置在settings.py中 DIRS:决定了整个项目的模板路径的 ...
- hexo文章编写部分语法总结以及hexo使用
一.hexo的使用 1.1 新建一篇文章 1 $ hexo new [layout] <title> 1.2. 生成静态文件 1 $ hexo generate 可简写为 1 $ hexo ...
随机推荐
- 覆盖的面积 HDU - 1255 线段树+扫描线+离散化 求特定交叉面积
#include<cstdio> #include<map> #include<algorithm> using namespace std; ; struct N ...
- Python数值运算
算术运算 a=10 b=2 + 加-两个对象相加 a+b输出结果12 - 减-得到负数或是一个数减去另一个数 a - b输出结果8 * 乘-两个数相乘或是返回一个被重复若干次的字符串 a * b输出结 ...
- IIS搭建负载均衡WebFarm+Arr
本文所述仅针对IIS7.0或更高版本 一.IIS简介 IIS( Internet Information Services),微软官方Windows平台上面web容器服务.支持http协议和ftp协议 ...
- js替换时,空格被替换为双引号
替换代码 str.replace(/\"/g, "'") 将双引号替换为单引号,如果字符串中,存在space(空格)时,使用以上语句将会导致空格被替换为双引号,可以使用如 ...
- 小程序texarea 输入内容回显失败
原因:输入框是textarea,输入的数据是含有换行符的字符串,小程序能渲染这种数据的标签有text,和textarea.(view 标签不能识别 /n 等字符) 1.使用text失败是由于不能覆盖视 ...
- 基于STL的字典生成模块-模拟搜索引擎算法的尝试
该课题来源于UVA中Searching the Web的题目:https://vjudge.net/problem/UVA-1597 按照题目的说法,我对按照特定格式输入的文章中的词语合成字典,以满足 ...
- Mysql常见注入
Mysql显错注入 1.判断注入类型为字符型:http://219.153.49.228:43074/new_list.php?id=tingjigonggao' and 1=1 --+2.判断字段为 ...
- 【剑指Offer】39:平衡二叉树
题目描述: 输入一棵二叉树,判断该二叉树是否是平衡二叉树 题解:递归 /*最直接的做法,遍历每个结点,借助一个获取树深度的递归函数,根据该结点的左右子树高度差判断是否平衡,然后递归地对左右子树进行判断 ...
- windows-problem :电脑上网的无线图标带有黄色星号,但不影响正常上网!
电脑可以上网,但是无线图标带有黄色星号如何解决? 进入“网络和共享中心”,点击“更改适配器设置”,看看是不是有两个以上的“本地连接”,只有一个有用,其他的删除即可.
- sap gui中打断点,进入不了断点
1: 当abap development tool 打开时,会影响sap gui中的断点进入. 2: 需要sap gui和abap development tool 都关闭,重新进入sap gui打 ...