大学计算机专业课《前端》期末复习重点（第六期）

最新推荐文章于 2024-10-04 21:00:38 发布

婷婷学编程记

最新推荐文章于 2024-10-04 21:00:38 发布

阅读量380

点赞数 10

分类专栏：期末复习专栏文章标签：前端

本文链接：https://blog.csdn.net/weixin_54102395/article/details/140821489

版权

期末复习专栏专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本期分享前端课程的复习重点，包含HTML、CSS、JavaScript、Vue等一些零散的内容，笔试主要考察学生对前端基础知识的理解与对代码的实际应用。希望可以在期末复习周能帮到大家（仅供参考）

---------------------------------------------------------------------------------------------------------------------------------

<a>标签的属性:

`href`: 指定链接的目标 URL。
`target`: 指定链接如何在浏览器中打开。
`_blank`: 在新窗口中打开链接。
`_self`: 在当前窗口中打开链接（默认值）。
`_parent`: 在父框架中打开链接。
`_top`: 在整个浏览器窗口中打开链接。

创建 Vue 项目的命令行：npm create vue@latest

数据、方法、监听属性、虚拟 DOM：

数据：在 Vue 实例中通过 `data` 属性定义。
方法：在 Vue 实例中通过 `methods` 属性定义。
监听属性：使用 `computed` 属性进行属性监听。
虚拟 DOM：Vue 使用虚拟 DOM 机制，即在内存中构建一个虚拟的 DOM 树，通过比对虚拟 DOM 和实际 DOM 的差异来进行高效的更新。

React 组件定义方式：

React 组件可以通过函数或类来定义。

函数定义组件：

function MyFunctionalComponent(props) {

}

// 使用： <MyFunctionalComponent />

类定义组件：

class MyClassComponent extends React.Component {

}

使用： <MyClassComponent />

React 读取属性的方式：

在 React 中，可以通过 `props` 对象来读取组件的属性：

{this.props.属性名}

React 主要的生命周期函数：

主要的生命周期函数包括：

- `componentDidMount`: 组件挂载后调用。

- `componentDidUpdate`: 组件更新后调用。

- `componentWillUnmount`: 组件卸载前调用。

简答题：

1. Web前端开发的基本要素： HTML、CSS、JavaScript。

2. CSS 选择器的种类和用法：包括元素选择器、类选择器、ID 选择器、属性选择器等，用于选择 HTML 元素并为其应用样式。

3. JavaScript中的事件处理程序是什么：事件处理程序是指与特定事件相关联的代码，用于定义在事件发生时执行的操作。

Vue 中指令的定义和不同指令的用法描述：

指令在 Vue 中以 `v-` 开头，用于在模板中添加特殊行为。例如：

`v-bind`: 用于动态绑定 HTML 属性。

`v-model`: 用于在表单元素上创建双向数据绑定。

`v-for`: 用于循环渲染列表。

`v-if`, `v-else-if`, `v-else`: 用于条件性地渲染元素。

Vue 组件化开发：

Vue 组件化开发是一种将页面拆分成多个独立的、可复用的组件的开发方式。每个组件负责特定的功能，可以嵌套和组合，使得整个应用结构清晰、易于维护。

React 项目的目录结构：

常见的 React 项目目录结构包括 `node_modules`、`public`、`src` 和 `package.json` 等文件和文件夹。

React 中函数组件和类组件的区别：

主要区别在于定义方式和是否具有状态（state）和生命周期方法的能力。

函数组件：通过函数定义，不具有状态和生命周期方法。
类组件：通过类定义，可以拥有状态和生命周期方法。

Vue 与 React 之间的区别：

1. 语法差异： Vue 使用模板语法，React 使用 JSX。

2. 组件定义方式： Vue 可以使用对象或函数定义组件，React 使用函数组件和类组件。

3. 状态管理： Vue 使用 Vuex 进行集中式状态管理，React 使用 Context 和 Redux。

4. 生态系统： Vue 生态系统更紧凑，React 生态系统更庞大且更灵活。

5. 响应式系统： Vue 使用响应式数据，React 使用单向数据流。

6. 指令和组件通信： Vue 使用指令和自定义事件，React 使用 props 和回调函数。

7. 社区和生态支持： React 在社区和生态方面更大、更活跃。

编程题：

程序设计

1、使用 HTML 语言和 Javascript 技术制作一个注册页面，网页中

包含姓名，籍贯(省，市信息)，联系电话等表单元素，当用户点击提

交信息按钮之后，将用户输入的信息显示在下方 div 中(要求设置

css 样式如下:整个页面添加背景颜色，每个表单元素添加 from

element 的类选择器样式，设置上边距 20px，给 div 添加一个边框，

要求是 my-div 的 id 选择器:实线 3px 灰色)

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: red;

}

.form-element {

margin-top: 20px;

}

#my-div {

border: 3px solid gray;

padding: 10px;

margin-top: 20px;

}

</style>

</head>

<body>

</div>

<div>

<option value="">请选择省份</option>

</select>

</div>

<option value="">请选择城市</option>

</select>

</div>

<input type="tel" id="phone" name="phone" class="form-element" required pattern="\d{11}"

placeholder="格式:12345678901">

</div>

</form>

document.getElementById('registrationForm').addEventListener('submit', function(event) {

event.preventDefault();

var name = document.getElementById('name').value;

var province =document.getElementById('province').value;

var city = document.getElementById('city').value;

var phone = document.getElementById('phone').value;

var displayDiv = document.getElementById('my-div');

displayDiv.innerHTML = '姓名: ' + name + '<br/>省份: ' + province + '<br/>城市: ' + city + '<br/>联系电话: ' +phone;

});

</script>

</body>

</html>

2、用 HTML 和 JQuery 技术制作一个网页，网页电子邮件类型和按

钮类型。当用户单点击提交按钮，弹窗中显示用户输入的用户名和邮

箱地址

<!DOCTYPE html>

<html>

<head>

<title>简单的表单页面</title>

$(document).ready(function(){

$("#submit-button").click(function(){

var username = $("#username").val();

var email = $("#email").val();

alert("用户名: " + username + ", 邮箱: " + email);

});

</script>

</head>

<body>

<form>

用户名:<input type="text" id="username" name="username"><br>

邮　箱:<input type="email" id="email" name="email"><br>

</form>

</body>

</html>

3、使用 HTML 语言和 JavaScript 术完成一个能够动态添加文本段落

的程序，网页中有一个动态添加文本框的按钮，点击按钮之后会动态

出现一个段落，文本信息为”你好，web 框架”,多次点击”动态添加文

本段落”按纽会多次出现段落(每个段落和上一个段落不在同一行)。

<!DOCTYPE html>

<html>

<head>

<title>动态添加文本段落</title>

<style>

.new-paragraph {

margin-bottom: 10px;

}

</style>

</head>

<body>

<button οnclick="addParagraph()">动态添加文本段落</button>

function addParagraph() {

var container = document.getElementById("container");

var newParagraph = document.createElement("p");

newParagraph.className = "new-paragraph";

newParagraph.innerHTML = "你好，web 框架";

container.appendChild(newParagraph);

}

</script>

</body>

</html>

4、使用 HTML 和 JQuery 技术制作一个网页，在网页中添加一个按

钮(button 和 div 盒子，设置 div 的宽度为 100 像素，高度为 100 像

素。为按钮添加单件，单击之后 div 的宽度和高度都变为 200 像素。

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#change-size").click(function(){

$("#myDiv").css({

"width": "200px",

"height": "200px"

});

</script>

</head>

<body>

</body>

</html>

5、创建一个 Vue3 组件，该组件包括一个响应式数据 message，

这个数据初始值是“会当凌绝顶，一览众山小”，在<scrip>标签里完成倒计时 2 秒后，message 重新赋值变为“锲而不合，金石可镂”

<template>{{ message }}</template>

import{ref} from 'vue'

const message=ref('会当凌绝顶，一览众山小')

setTimeout(() =>{

message.value='锲而不舍，金石可镂'

},2000)

</script>

6、创建一个 react 组件，该组件包合一个文本输入框和一个 h1 标

题。当用户在上面文本框中编辑文本时，下面的 h1 标题会根据变化

更新显示。

<!DOCTYPE html>

<html>

<body>

class FormInput extends React.Component {

constructor(props) {

super(props);

this.state = {value: 'Hello React!'};

this.handleChange = this.handleChange.bind(this);

}

handleChange(event) {

this.setState({value: event.target.value});

}

render() {

var value = this.state.value;

return <div>

<h1>{value}</h1>

</div>;

}

ReactDOM.render(

<FormInput />,

document.getElementById('root')

);

</script>

</body>

</html>

7、编写一个简单的 React 代码段，使用 JSX 语实现列表渲染的功

能。(要求创建一个数组，数组项分别是：react、vue、angular 等，

通过列表渣染语句把数组显示到页面)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

let books= [];

let names = ['React', 'Vue', 'Angular'];

for (let i = 0; i < names.length; i++)

books.push(<h1 key={names[i]}>{names[i]}</h1>)

ReactDOM.render(

<div>{books}</div>,

document.getElementById('root')

);

</script>

</body>

</html>

婷婷学编程记

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录