stenciljs 学习四 组件装饰器
stenciljs 可以方便的构建交互式组件
支持以下装饰器
- component
- prop
- watch
- state
- method
- element
component 说明
component 包含tag styleUrl 参数
tag 定义组件的名称,注意需要使用-连接, styleUrl 指定组件的样式
参考格式:
import { Component } from '@stencil/core';
@Component({
tag: 'todo-list',
styleUrl: 'todo-list.css'
})
export class TodoList {
...
}
prop 说明
定义组件的自定义属性,可以方便的进行组件间数据的传递
支持的数据类型有number string boolean Object array,可以
使用this 进行数据访问,在html 设置需要使用dash-case 方式
在jsx 中使用camelCase 方式,默认prop 是不可变的,使用添加
mutable: true 进行修改,同时我们可以设置默认值
参考:
import { Prop } from '@stencil/core';
...
export class TodoList {
@Prop() color: string;
@Prop() favoriteNumber: number;
@Prop() isSelected: boolean;
@Prop() myHttpService: MyHttpService;
}
this 调用
logColor() {
console.log(this.color)
}
html 设置属性
<todo-list color="blue" favorite-number="24" is-selected="true"></todo-list>
jsx 设置属性
<todo-list color="blue" favoriteNumber="24" isSelected="true"></todo-list>
设置默认值
@Prop({ mutable: true }) name: string = 'Stencil';
watch 说明
我们可以使用watch 进行prop 值验证处理,包含新、旧数据
参考:
import { Prop, Watch } from '@stencil/core';
...
export class LoadingIndicator {
@Prop() activated: boolean;
@Watch('activated')
watchHandler(newValue: boolean, oldValue: boolean) {
console.log('The new value of activated is: ', newValue);
}
}
state 说明
state 可以进行组件内部状态的管理,state 的更新会造成render 再次调用组件
函数
import { State } from '@stencil/core';
...
export class TodoList {
@State() completedTodos: Todo[];
completeTodo(todo: Todo) {
// This will cause our render function to be called again
this.completedTodos = [...this.completedTodos, todo];
}
render() {
//
}
}
method 说明
可以方便的导出函数,方便外部调用
参考:
import { Method } from '@stencil/core';
...
export class TodoList {
@Method()
showPrompt() {
// show a prompt
}
}
调用:
const todoListElement = document.querySelector('todo-list');
todoListElement.showPrompt();
Element 说明
可以在class中访问当前组件,返回一个HTMLElement,可以使用DOM方式以及
事件
import { Element } from '@stencil/core';
...
export class TodoList {
@Element() todoListEl: HTMLElement;
addClass(){
this.todoListEl.classList.add('active');
}
}
嵌入&&嵌套组件
参考:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-embedded-component'
})
export class MyEmbeddedComponent {
@Prop() color: string = 'blue';
render() {
return (
<div>My favorite color is {this.color}</div>
);
}
}
import { Component } from '@stencil/core';
@Component({
tag: 'my-parent-component'
})
export class MyParentComponent {
render() {
return (
<div>
<my-embedded-component color="red"></my-embedded-component>
</div>
);
}
}
参考资料
https://stenciljs.com/docs/decorators
stenciljs 学习四 组件装饰器的更多相关文章
- TypeScript学习笔记(四)装饰器
目录 一.装饰器的作用 二.类装饰器 1. 普通装饰器 为类扩展属性和方法 使用装饰器修改属性和重写方法 2. 装饰器工厂 三.属性装饰器 四.方法装饰器 使用方法装饰器对方法进行扩展 五.方法参数装 ...
- python学习笔记之装饰器、递归、算法(第四天)
参考老师的博客: 金角:http://www.cnblogs.com/alex3714/articles/5161349.html 银角:http://www.cnblogs.com/wupeiqi/ ...
- stenciljs 学习六 组件开发样式指南
组件不是动作,最好使用名词而不是动词, 文件结构 每个文件一个组件. 每个目录一个组件.虽然将类似的组件分组到同一目录中可能是有意义的,但我们发现当每个组件都有自己的目录时,更容易记录组件. 实现(. ...
- Python小白学习之函数装饰器
装饰器 2018-10-25 13:49:37 装饰器从字面意思就是用来装饰的,在函数可以理解为:在函数中,我们不想影响原来的函数功能,又想给函数添加新的功能,这时候我们就用到了装饰器. 一般函数操作 ...
- Python学习笔记012——装饰器
1 装饰器 1.1装饰器定义 在代码运行期间动态增加功能的方式,称之为“装饰器”(Decorator). 1.2 装饰器分类 装饰器:函数装饰器,类装饰器,函数的装饰器,类的装饰器 装饰器:函数装饰函 ...
- python学习笔记(五):装饰器、生成器、内置函数、json
一.装饰器 装饰器,这个器就是函数的意思,连起来,就是装饰函数,装饰器本身也是一个函数,它的作用是用来给其他函数添加新功能,比如说,我以前写了很多代码,系统已经上线了,但是性能比较不好,现在想把程序里 ...
- Python学习笔记:装饰器
Python 装饰器的基本概念和应用 代码编写要遵循开放封闭原则,虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被扩展,即: 封闭:已 ...
- python学习之类的装饰器进阶版
装饰器可以修饰函数,同样,也可以修饰类 装饰器 def deco(func): print('======>被修饰的')return func 装饰器装饰函数的方式,语法糖 @decode ...
- Python(四)装饰器、迭代器&生成器、re正则表达式、字符串格式化
本章内容: 装饰器 迭代器 & 生成器 re 正则表达式 字符串格式化 装饰器 装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理等.装饰器是解 ...
随机推荐
- 1月28日周日,更新ruby到2.5.0版,rvm更新。
在学习Array的方法的时候,发现文档concat方法可以进行多个数组的添加,而我的不行,猜测是ruby版本没有更新. 查询2.31ruby版本的concat方法,果然和2.5版本的不一样. 于是准备 ...
- python-day39--mysql基本操作
1.修改密码: mysqladmin -uroot password 123 2.忘记密码如何修改密码: 1.干掉data目录---> 重新初始化 (不推荐,所有授权信息全部丢失!!!) 2 ...
- ccf行车路线
#include<bits/stdc++.h> using namespace std; const long long INF = 1e18; int n,m; struct node{ ...
- 快速SQL调优/优化(SQL TUNING)——1分钟搞定超慢SQL
前几天,一个用户的研发人员找到我了,说他们有个SQL语句非常慢,我说多慢?他们说:半个小时也没出结果.于是问他们要了SQL语句和执行计划,SQL语句就不能再这里贴出来了,下面是调整前的执行计划(略去某 ...
- zabbix自动化监控基础
zabbix安装配置文档 2 一 zabbix-server 安装配置(基础配置) 2 二 zabbix agent安装配置 5 2.1 主动模式和被动模式 6 2.2 安装配置zabbix_agen ...
- ADO.NET Entity Framework -Code Fisrt 开篇(一)
ADO.NET Entity Framework -Code Fisrt 开篇(一) 2012-12-25 15:13 by 易code, 911 阅读, 0 评论, 收藏, 编辑 ADO.NET E ...
- Vue面试题整理
1:什么是MVVM MVVM是是Model-View-ViewModel的缩写,Model代表数据模型,定义数据操作的业务逻辑,View代表视图层,负责将数据模型渲染到页面上,ViewModel通过双 ...
- MySQL 存储过程中执行DDL
一.定期增加表分区 1.增加表分区例 CREATE DEFINER=`root`@`127.0.0.1` PROCEDURE `p_create_Partition`(IN databaseName ...
- stringBuild置空方法
参看连接:http://blog.csdn.net/roserose0002/article/details/6972391
- 《Python》 生成器和列表推导式
一.初识生成器: 生成器就是自己用Python代码写的迭代器,生成器的本质就是迭代器. 1.Python中提供的生成器: 1.生成器函数: 使用yield语句而不是return语句返回结果.yield ...