Stencil
神奇的小卷毛
种一棵树最好的时间是十年前,而后是现在。
展开
-
Stencil笔记(3)- 装饰器
Stencil可以轻松构建丰富的交互式组件。现在有以下几个装饰器:componentpropwatchstatemethodelement1、Component装饰器:每个组件都要用这个装饰器来装饰。装饰器里最基本的要有一个tag元数据,当然,styleUrl也几乎是必须的。另外还有styleUrls,这个元数据可引用多个样式表。import { Component } from '@stenci...原创 2018-04-15 10:25:12 · 669 阅读 · 0 评论 -
Stencil笔记(4)- 组件钩子
import { Component } from '@stencil/core'; @Component({ tag: 'my-component' }) export class MyComponent { /** * 组件正在加载,尚未渲染呈现时触发调用。 * * 这是在渲染前进行最后更新的地方。 * * 只会被调用一次 */ compon...原创 2018-04-15 10:49:14 · 654 阅读 · 0 评论 -
Stencil笔记(5)- Events
即发布订阅模式要自定义事件,可以使用Events装饰器。import { Event, EventEmitter } from '@stencil/core'; export class TodoList { @Event() todoCompleted: EventEmitter; todoCompletedHandler(todo: Todo) { this.todoCo...原创 2018-04-15 20:45:04 · 453 阅读 · 0 评论 -
Stencil练习之模仿Capacitor首页
Capacitor首页只写了一个这个首页,已上传到github使用:git clone https://github.com/iheqi/stencil-test.git cd stencil-test git remote rm originand run:npm install npm start原创 2018-04-17 20:53:21 · 274 阅读 · 0 评论 -
Stencil笔记(1) - 组件
Stencil: 一个Web Components编译器Stencil具有诸如以下特征Virtual DOM异步渲染(受React Fiber启发)响应式数据绑定TypescriptJSX通过添加带有.tsx扩展名的新文件(例如my-first-component.tsx),并放置在src / components目录中来创建Stencil组件。.tsx扩展名是必需的,因为Stencil组件是使用...原创 2018-04-06 22:08:07 · 539 阅读 · 0 评论 -
Stencil笔记(2) - JSX的使用
Stencil组件使用jsx(一种流行的声明性模板语法)来呈现。每个组件都有一个render函数,这个函数返回在运行时要呈现给dom的组件树。基本用法class MyComponent { render() { return ( <div> <h1>Hello World</h1> <p>Thi...原创 2018-04-06 22:55:25 · 634 阅读 · 0 评论