# layui单页面应用
**Repository Path**: upg.project/layui-single-page-application
## Basic Information
- **Project Name**: layui单页面应用
- **Description**: layui单页面应用
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 4
- **Created**: 2024-04-02
- **Last Updated**: 2024-04-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# layui单页面应用
#### 介绍
layui单页面应用拓展
官方文档：https://layui.dev/
#### 安装教程
```js
// 配置
layui.config({
base: "/model/",
}).use(["app"], function () {
var { app } = layui.app
//渲染
app.render({
css: ["/layui/css/layui.css"] //全局样式
})
})
```
#### 使用说明
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. 模板写法,使用数据必须 d.xxx 和layui的模板引擎那样
html页面
```html
Hello world
{d.name}
{#if d.answer === 42}
what was the question?
{/if}
{#if d.porridge.temperature > 100}
too hot!
{:else if 80 > d.porridge.temperature}
too cold!
{:else}
just right!
{/if}
{#each d.d as v,k}
{k} - {v}
{/each}
{@html d.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 {bind,app} = layui.app
// 必须写在渲染后 不然不生效
app.afterUpdate = function () {
console.log("渲染后")
// 获取mybtn的点击事件
bind.find(".mybtn").click(function(){
alert("点击了")
})
}
```