作者：Eno_Yao

转发链接：
https://segmentfault.com/a/1190000022623676

电脑完蛋了，好不容易抢回来的文档

列表页传参Staff.vue：

<template>
    <div class="staff">
        <main class="container">
            <aside class="sidebar">
                <nav>
                    <ul>
                        <li v-for="staff in staffList" :key="staff.id">
                            <!-- <router-link :to="`/staff/info?id=${staff.id}&name=${staff.name}&age=${staff.age}`" active-class="activeLink">{{ staff.name }}</router-link> -->
                            <router-link :to="{
                                path: '/staff/info',
                                query: {
                                    id: staff.id,
                                    name: staff.name,
                                    age: staff.age
                                }
                            }" active-class="activeLink">
                                {{ staff.name }}
                            </router-link>
                        </li>
                    </ul>
                </nav>
            </aside>
            <section class="content">
                <router-view />
            </section>
        </main>
    </div>
</template>
<script lang='ts' setup name='Staff'>
import { reactive } from 'vue';
// 数据准备
const staffList = reactive([
    { id: "1", name: "张三", age: 22 },
    { id: "2", name: "李四", age: 23 },
    { id: "3", name: "王五", age: 24 }
])
</script>
<style scoped>
.staff {
    background-color: darkslategrey;
}

.container {
    display: flex;
    margin-top: 10px;
}

.sidebar {
    width: 50px;
    color: white;
    box-sizing: border-box;
}

.sidebar nav ul {
    list-style-type: square;
    padding: 0;
}

.sidebar nav ul li {
    margin: 15px 0;
    color: gold;
}

.content {
    flex: 1;
    width: 600px;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: #ecf0f1;
}

.activeLink {
    color: white;
}
</style>

我们将优化之前的 Flask 聊天机器人，添加记忆功能，并总结 30 天学习成果，最后提出下一步建议。

优化聊天机器人 - 添加记忆功能

前文：

微信小程序开发极简入门（一）

预览图：

原理

合理使用 Grid 的属性：

1. display:设置为grid指明当前容器为Grid布局
2. grid-template-columns: 定义每一列的列宽（百分比或绝对单位）

首先 小学生在这里 祝大家 元旦快乐！！！！！

懒加载使用场景

在一些图片量比较大的场景（电商首页，小程序首页等），如果我们打开页面时就加载所有的图片，那势必会导致页面的卡顿以及白屏，给用户不好的体验，导致用户流失。

但是我们仔细想一下，用户真的需要我们显示所有图片一起展示吗？其实并不是，用户看到的只是浏览器可视区域的内容。所以从这个情况我们可以做一些优化，只显示用户可视区域内的图片，当用户触发滚动的瞬间再去请求显示给用户。

前言

对于一个前端开发者而言，性能优化是一个老生常谈的问题了，然而优化的方面有很多，比如加载优化、图片优化、渲染优化、打包优化、 js优化、css优化等等。

CSS优化对于浏览器性能的提升不是特别明显，也往往是最被容易忽略的一个优化方向，下面我们来仔细聊聊CSS有关的性能优化，希望对你们平时的工作和面试有所帮助。

上篇文章我们完成了基础项目搭建，童鞋们都跟着教程完成了吗？没完成的童鞋们可以阅读上篇文章，先搭建好基础项目；这篇文章我们来完成页面基础布局的开发。

先给大家看下本篇文章我们实现的界面，如下图所示：

首先，在components文件夹创建10个文件夹，分别是：2048，llk，maze，mine，pintu，snake，sudoku，tetris，wzq，xxk；然后，再创建一个index.js文件；然后，在刚才创建的10个文件夹中分别创建一个Index.vue文件，该文件的内容类似这样如下代码，其中2048是所属文件夹名字，目前该代码仅用于占位，以后将被我们真正可玩的游戏取代。