npm install sfcjsLight JIT frontend view driver javascript library.
SFC is short for single file component.
- JIT: render components in runtime, without ahead compiling
- AOT: compile SFC to pure javascript file
- SFC: write a component with .htm file, deploy to CDN directly, no pack or compiling
- Web Components: based on customElements, rendering in shadowDOM, supports isolated styles/css, supports slot for component
- Reactive Programming: modify javascript variables to rerender UI
- Simple Syntax: following HTML syntax, define , , html blocks in SFC
- No Virtual DOM: modify DOM nodes directly which is relate to variables
- Responsive Styles: use javascript variables in css, and it will react changes refer to the variables
- Asnyc Demanded Loading: only load demanded component files
- Quick link customElement: a to link a customElement quickly
``html`
`html`
`html`
component content
Step 1: import the library file from CDN
`html`
Step 2: place the customElement at some where link to your SFC file
`html`
Later you will see the component be rendered at the place where put.
Step 3: write your SFC and upload to the previous URL, here is an SFC example
`html
Notice: you should must write tail semicolon at the end of a sentence.
Notice: only one root HTML tag supported, you can use
as the root tag to contain mutiple elements.x-sfc
In sfcjs, you will use
to bootstrap a remote SFC quickly.`html
`It supports the following attributes:
- src: the SFC file path, relative or absolute path both supported
- passive: disable immediately rendering, you should must invoke
document.querySelector('x-sfc#app').mount() to setup rendering
- pending-slot: is to treat slot as pendding content before the SFC file loaded
- attributes start with : or data- will be used as props to pass into SFC
- attributes not start with : or data- are not related, which is just for current custom elementYou can use
addEventListener to listen the events which are emitted inside SFC. The parameter is a CustomEvent, you can read event.detail to get the emitted value.`html
Loading...
`Template Syntax
-
{{ ... }} is to generate string by given variables
- @ started attributes are events bindings, i.e. @click="handle(event)"
- : started attributes are props passing, which pass real value, only work for sub components
- (..) started attributes are directivedirectives
- (if):
- (class):
- (style):
- (src)、(href): . src and href will make the relative path to right absolute path. Notice, the values are string, not expression.
- (repeat): . index is optional
- (key): always works with repeat, to identify a node in a list
- (bind): two way binding, only works for