# layui单页面应用
**Repository Path**: roczyl/layui-single-page-application
## Basic Information
- **Project Name**: layui单页面应用
- **Description**: layui单页面应用，响应式数据，生命周期 onMount挂载、beforeUpdate渲染前、afterUpdate渲染后、onDestroy销毁
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 4
- **Created**: 2024-07-16
- **Last Updated**: 2024-07-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# layui单页面应用
#### 介绍
layui单页面应用拓展
官方文档：https://layui.dev/
#### 模板：http://kllxs_admin.gitee.io/layui-single-page-application
#### 目录结构
```
.
├── page\
| ├── home\
| | ├── home.css
| | ├── home.html
| | ├── home.js
```
#### 安装教程
```js
// 配置
layui.config({
base: "model/", // 模块路径
}).use(["app"], function () {
var app = layui.app
//渲染
app.render({
index: "home",// 默认渲染首页
page: "page/",// 默认渲染page目录
view: "main-view",//渲染main-view标签
})
})
```
#### 使用说明
1. 基础配置
```html
单页面应用
```
2. 响应式数据绑定,必须是obj格式,必须全部写在app.proxy里面不然无法响应和使用
```js
var app = layui.app
var data = app.proxy({
name: "你好",
num: 1
})
console.log(data.name)
```
3. 生命周期 onMount挂载、beforeUpdate渲染前、afterUpdate渲染后、onDestroy销毁
```js
var app = layui.app
app.onMount = function () {
console.log("挂载")
}
app.beforeUpdate = function () {
console.log("渲染前")
}
app.afterUpdate = function () {
console.log("渲染后")
}
app.onDestroy = function () {
console.log("卸载")
}
```
4. 模板写法,使用数据必须app.proxy里面的 变量
> 比如 app.proxy({a:"b"}) {a} 即可
html页面
```html
Hello world
{name}
{#if answer === 42}
what was the question?
{/if}
{#if porridge.temperature > 100}
too hot!
{:else if 80 > porridge.temperature}
too cold!
{:else}
just right!
{/if}
{#each d as v,k}
{k} - {v}
{/each}
{@html html}
```
js页
```js
var app = layui.app
var data = app.proxy({
name: "你好",
answer: 42,
porridge:{
temperature:50
},
d:[1, 2, 3, 4, 5],
html:"html
"
})
```
4. 标签绑定
html页
```html
```
js页
```js
var app = layui.app
// 必须写在渲染后 不然不生效
app.afterUpdate = function (bind) {
console.log("渲染后")
// 获取mybtn的点击事件
bind.find(".mybtn").click(function(){
alert("点击了")
})
}
```
5. 清理数据缓存
js页
```js
var app = layui.app
app.onDestroy = function () {
console.log("卸载")
// 当页面卸载了，再回到这个页面将是初始数据
// 清理
app.clearCache()
}
```