Stencil笔记(3)- 装饰器

原创 2018年04月15日 10:25:12

Stencil可以轻松构建丰富的交互式组件。

现在有以下几个装饰器:

1、Component装饰器:

每个组件都要用这个装饰器来装饰。
装饰器里最基本的要有一个tag元数据,当然,styleUrl也几乎是必须的。另外还有styleUrls,这个元数据可引用多个样式表。

import { Component } from '@stencil/core';
@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.scss'
})
export class TodoList {
  ...
}

此外还有可选的host元数据,它的作用是设置组件的属性或者class

import { Component } from '@stencil/core';

@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.scss',
  host: {
    theme: 'todo',
    role: 'list'
  }
})

当使用组件时,它会自动添加class属性和role的值
<todo-list class='todo' role='list'></todo-list>
2、Prop Decorator(属性装饰器)

感觉和ng的@Input一样,用于自定义属性。
如:

import { Prop } from '@stencil/core';
...
export class TodoList {
  @Prop() color: string;
  @Prop() favoriteNumber: number;
  @Prop() isSelected: boolean;
  @Prop() myHttpService: MyHttpService;
}

在JSX中:

<todo-list color="blue" favoriteNumber="24" isSelected="true"></todo-list>

这些自定义属性值还可以通过js来获得:

const todoListElement = document.querySelector('todo-list');
console.log(todoListElement.myHttpService); // MyHttpService
console.log(todoListElement.color); // blue
prop值的可变性

要知道,@Prop默认情况下在组件逻辑内部不可变的。一旦设置了值,组件就不能在内部更新它。

但是,可以显示地设置@Prop从组件内部进行改变,方法是将其声明为可变的,如下例所示:

import { Prop } from '@stencil/core';
...
export class NameElement {
  @Prop({ mutable: true }) name: string = 'Stencil';

  componentDidLoad() {
    this.name = 'Stencil 0.7.0';
  }
}
Prop可以设置默认的值,以及开启验证

如下所示,name的值默认为Stencil。
要对其验证其输入,可使用@watch装饰器。

import { Prop, Watch } from '@stencil/core';
...
export class TodoList {
  @Prop() name: string = 'Stencil';

// 当值改变时,验证其是否为空,以及是否长度小于2
  @Watch('name')
  validateName(newValue: string, oldValue: string) {
    const isBlank = typeof newValue == null;
    const atLeast2chars = typeof newValue === 'string' && newValue.length >= 2;
    if (isBlank) { throw new Error('name: required') };
    if ( !atLeast2chars ) { throw new Error('name: atLeast2chars') };
  }
}

...

3、Watch 装饰器

当用户改变prop时,会触发watch的监听,并调用函数。像上面用到的那样。

4、管理组件状态的State装饰器

@State()装饰可用于为组件管理的内部数据。这意味着用户不能从组件外部修改属性。对@State()属性的任何更改都会导致再次调用组件reader函数。

import { State } from '@stencil/core';

...
export class TodoList {
  @State() completedTodos: Todo[];

  // 在这个方法里改变了State装饰的属性,那么将触发reader函数的调用
  completeTodo(todo: Todo) {
    // This will cause our render function to be called again
    this.completedTodos = [...this.completedTodos, todo];
  }

  render() {
    //
  }
}
5、方法装饰器

@Method()装饰用于定义组件的公共接口。用@Method()装饰器装饰的函数可以直接从元素中调用。

import { Method } from '@stencil/core';
...
export class TodoList {

  @Method()
  showPrompt() {
    // show a prompt
  }
}

获取到组件后便可调用其方法,很有用的样子。

const todoListElement = document.querySelector('todo-list');
todoListElement.showPrompt();
6、元素装饰器

这个不太懂,获取到HTMLElement实例?

import { Element } from '@stencil/core';

...
export class TodoList {

  @Element() todoListEl: HTMLElement;

  addClass(){
    this.todoListEl.classList.add('active');
  }
}
嵌套组件

与ng或Ionic不同的是,嵌套组件时不用显示地导入子组件,因为子组件也是原生HTML标签。直接在父组件直接使用即可。

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>
    );
  }
}

颜色英文代码全集

redgreenbluemagentayellowchocolateblackaquamarinelimefuchsiabrassazurebrownbronzedeeppinkalicebluegr...
  • denal
  • denal
  • 2003-03-09 11:10:00
  • 668

Python3.5——装饰器及应用详解(上)

1、装饰器: (1)本质:装饰器的本质是函数,其基本语法都是用关键字def去定义的。 (2)功能:装饰其他函数,即:为其他函数添加附加功能。 (3)原则:不能修改被装饰的函数的源代码,不能修改被装饰的...
  • loveliuzz
  • loveliuzz
  • 2017-09-05 21:15:48
  • 463

cocos2dx 3.12 iOS build assert error cocos2d-x C++

cocos2dx 3.12 iOS build assert error cocos2d-xC++ ...
  • xbw12138
  • xbw12138
  • 2016-09-07 12:09:42
  • 2062

Python3 装饰器

Python3 装饰器 装饰器: 本质是函数, 用于装饰其他函数, 附加一些本身所没有的功能...
  • Rozol
  • Rozol
  • 2017-05-04 21:58:21
  • 2266

Stencil buffer

模版缓冲(stencil buffer)或印模缓冲,是在OpenGL三维绘图等计算机图像硬件中常见的除颜色缓冲、像素缓冲、深度缓冲之外另一种数据缓冲。词源模版(stencil)是指一种印刷技术,通常以...
  • qp120291570
  • qp120291570
  • 2015-06-24 20:40:46
  • 2689

官网的shader stencilBuffer篇(续)

上一篇写到一个自负不能被挡的球,最后被挡了。 这一篇做一些联想,先对那个档他的球的shader做一个修改,shader采用那个半黄半红的code Shader "HolePrepare" { ...
  • u013833399
  • u013833399
  • 2015-08-10 09:33:31
  • 1462

关于unity shader的StencilBuffer

关于unity shader的StencilBuffer 这几天学了unity shader,不得不说unity shader小小的选择项竟然蕴含了这么多东西,最近看到shaderlab 的sten...
  • u013833399
  • u013833399
  • 2015-08-07 15:44:30
  • 6838

Stenciling技术实现镜子效果 图形学1

本人花时间整理的渲染镜子的技术,有需要的朋友可以参照一下。 出处。http://blog.csdn.net/kenden23 简介: 模板缓冲(The stencil buffer)(或者翻译为蒙蔽层...
  • kenden23
  • kenden23
  • 2013-10-19 14:53:44
  • 1919

shader中的z、stencil、alpha测试

alpha、z、stencil test分析
  • wt_2k
  • wt_2k
  • 2015-06-30 14:25:21
  • 1605

UnityShader实例09:Stencil Buffer&Stencil Test

Stencil Buffer&Stencil Test 在开始前先吐槽下unity的官方文档,说实话关于stencil ,官方文档真的是可以不要了,除了记流水账般解释了下各个参数的作用,作为例子...
  • u011047171
  • u011047171
  • 2015-07-17 15:44:16
  • 11006
收藏助手
不良信息举报
您举报文章:Stencil笔记(3)- 装饰器
举报原因:
原因补充:

(最多只允许输入30个字)