Lighten.js is a lighten web library, focus on boost one page application develop exprience.
Download lighten.js
and import script file above the end of head
.
<html>
<head>
<!-- import lighten.js here -->
<script src='./lighten.js'></script>
</head>
<body>
<!-- your script here-->
<script src='./index.js'></script>
</body>
</html>
Use new
operator to create Lighten Instance and setup your data.
let lighten = new Lighten({
data: data
})
Use l-target-app
attr to definite your render root.
<div l-target-app>
<h1> {{ title }} </h1>
</div>
Use double curly quote to get instance data.
<h1> {{ title }} </h1>
// your script file
let data = {
title: 'Hello, Lighten!'
}
let lighten = new Lighten({
data: data
})
And It will be render like this.
<h1> Hello, Lighten! </h1>
You can add directive to your html element to enhance it feature.
l-alert
l-show
This directive will alert its value when mouse clicking.
<button l-alert=''>alert</button>
This directive will trigger show/hidden via its value .
<button l-show=''>alert</button>
If you want to binding instance data to directive, add :
front to directive and it will try get instance data.
<div :l-show="isLightboxOpening"> {{ title }} </div>
let lighten = new Lighten({
data: {
title: 'Hello, Lighten!'
isLightboxOpening: false
}
})
It will be render like this.
<div style='display:none;'> Hello, Lighten! </div>
Version change detail are documented in the release page.
Copyright (c) 2020-present, Shawn Lin