Web 前端招新题目

CSS

请在此部分任选一题完成

1 使用 CSS 实现一个移动 app 的三段式布局

common.docs_name - LarkCCM_Docs_Menu_Image

1.
顶栏与底栏固定​

2.
中间的内容能完整地呈现，不会被顶栏或底栏遮挡​

3.
页面不能左右滑动，只有中间内容可以上下滑动​

2 使用 CSS 实现一个分栏布局

该部分内容可以使用 Vue.js 完成

1.
左侧侧栏和右侧内容分别可以上下滑动​

2.
点击左侧侧栏中的菜单选项可以切换右侧不同的页面，目前处于的页面对应的菜单选项有被选中的特殊样式​

3.
左侧侧栏可以收起/展开，在切换页面的过程中也能保持其收起或展开的状态​

4.
界面宽度较小时，侧栏能自动收起​

JavaScript

请回答该部分的所有问题

在单个 HTML 文件中实现一个点击按钮就获取并展示随机猫图的应用。（参考：https://thecatapi.com）

a.
也可以是随机龙图（误）​

Vue.js

请完成基础知识的回答

如难以完成 Demo 项目的代码编写，可以介绍介绍制作思路

基础知识

以下问题基于 Vue 3 组合式 API

1.
SFC 中，如果在 style 标签中注明了 scoped，那么这些 CSS 的作用范围是？如何透传某些属性？​

2.
为什么 reactive() 对原始类型无效？应当换用哪个 API？​

3.
为什么建议给 v-for 的标签增加一个 :key 属性？​

4.
以下代码有什么问题？可以如何修改？​

代码块

<script setup>​
import MyComponent from '@/components/MyComponent.vue'​
​
const el = document.getElementById('x')​
​
el.innerHTML = "<MyComponent @click='alert('I'm clicked.')'></MyComponent>"​
​
</script>​
​
<template>​
    <div id="x"></div>​
</template>​

Web 前端招新题目​

Web 前端招新题目