前端入门程序及注释

qiang1120131005

已于 2024-01-07 15:08:21 修改

阅读量419

点赞数 7

文章标签：前端

于 2024-01-03 22:50:43 首次发布

本文链接：https://blog.csdn.net/qiang1120131005/article/details/135373323

版权

本文介绍了HTML、CSS、JavaScript、Vue和React的基础入门，包括HTML5文档结构、CSS样式应用、JavaScript动态更新DOM以及Vue和React组件的创建和渲染。

摘要由CSDN通过智能技术生成

1.HTML入门程序

index.html代码如下：

<!-- 声明这是一个HTML5文档 -->  
<!DOCTYPE html>  
<!-- 开始HTML文档 -->  
<html>  
    <!-- 头部区域，包含标题等元信息，浏览器不显示 -->  
    <head>  
	    <!-- 设置文档字符编码为UTF-8 -->  
        <meta charset="utf-8">  
        <!-- 设置文档标题 -->  
        <title>Hello, World!</title>  
    </head>  
    <!-- 主体区域，包含网页内容 -->  
    <body>  
        <!-- 页面中的一级标题，显示"Hello, World!" -->  
        <h1>标题：Hello, World!</h1>  
		<!-- 这是一个段落标签，浏览器会显示这里的内容 -->
		<p>段落：Hello, World!</p>
    </body>  
</html>

执行方法：直接用浏览器打开
在这里插入图片描述

2.CSS入门程序

styles.css代码如下：

/* 这是一个CSS样式表 */
/* 选择器是h1，这意味着这个样式将应用于所有的h1元素 */
h1 {
    /* color属性设置文本颜色 */
    color: blue;
    /* text-align属性设置文本对齐方式 */
    text-align: center;
}

修改index.html代码如下：

<!-- 声明这是一个HTML5文档 -->  
<!DOCTYPE html>  
<!-- 开始HTML文档 -->  
<html>  
    <!-- 头部区域，包含标题等元信息，浏览器不显示 -->  
    <head>  
	    <!-- 这里链接了上面的CSS样式表 -->
        <link rel="stylesheet" type="text/css" href="styles.css">
	    <!-- 设置文档字符编码为UTF-8 -->  
        <meta charset="utf-8">  
        <!-- 设置文档标题 -->  
        <title>Hello, World!</title>  
    </head>  
    <!-- 主体区域，包含网页内容 -->  
    <body>  
        <!-- 页面中的一级标题，显示"Hello, World!" -->  
        <h1>标题：Hello, World!</h1>  
		<!-- 这是一个段落标签，浏览器会显示这里的内容 -->
		<p>段落：Hello, World!</p>
    </body>  
</html>

执行方法：将这两个文件保存在同一个文件夹中，用浏览器打开index.html
在这里插入图片描述

3.JavaScript入门程序

修改index.html代码如下：

<!-- 声明这是一个HTML5文档 -->  
<!DOCTYPE html>  
<!-- 开始HTML文档 -->  
<html>  
    <!-- 头部区域，包含标题等元信息，浏览器不显示 -->  
    <head>  
	    <!-- 这里链接了上面的CSS样式表 -->
        <link rel="stylesheet" type="text/css" href="styles.css">
	    <!-- 设置文档字符编码为UTF-8 -->  
        <meta charset="utf-8">  
        <!-- 设置文档标题 -->  
        <title>Hello, World!</title>  
    </head>  
    <!-- 主体区域，包含网页内容 -->  
    <body>  
        <!-- 页面中的一级标题，显示"Hello, World!" -->  
        <h1>标题：Hello, World!</h1>  
		<!-- 这是一个段落标签，浏览器会显示这里的内容 -->
		<p>段落：Hello, World!</p>
		
		<!-- 创建一个id为"demo"的p元素，用于显示输出的内容 -->
		<h1 id="demo"></h1>
		<script>
		    // 这是一个JavaScript程序
			// 找到id为"demo"的元素，并将其文本内容设置为"Hello, World!"
			document.getElementById("demo").innerHTML = "JavaScript输出：Hello, World!";
		</script>
    </body>  
</html>

执行方法：直接用浏览器打开
在这里插入图片描述

4.Vue入门程序

修改index.html代码如下：

<!-- 声明这是一个HTML5文档 -->  
<!DOCTYPE html>  
<!-- 开始HTML文档 -->  
<html>  
    <!-- 头部区域，包含标题等元信息，浏览器不显示 -->  
    <head>  
	    <!-- 这里链接了上面的CSS样式表 -->
        <link rel="stylesheet" type="text/css" href="styles.css">
	    <!-- 设置文档字符编码为UTF-8 -->  
        <meta charset="utf-8">  
        <!-- 设置文档标题 -->  
        <title>Hello, World!</title>  
		
		<!-- 通过 CDN 引入 Vue.js -->
		<script src="https://unpkg.zhimg.com/vue@3/dist/vue.global.js"></script>
    </head>  
    <!-- 主体区域，包含网页内容 -->  
    <body>  
        <!-- 页面中的一级标题，显示"Hello, World!" -->  
        <h1>标题：Hello, World!</h1>  
		<!-- 这是一个段落标签，浏览器会显示这里的内容 -->
		<p>段落：Hello, World!</p>
		
		<!-- 创建一个id为"demo"的p元素，用于显示输出的内容 -->
		<h1 id="demo"></h1>
		<script>
		    // 这是一个JavaScript程序
			// 找到id为"demo"的元素，并将其文本内容设置为"Hello, World!"
			document.getElementById("demo").innerHTML = "JavaScript输出：Hello, World!";
		</script>
		
		<!-- Vue 应用的根元素 -->
		<div>
		    <h1 id="app">
		        <!-- 使用双大括号语法来显示 message 属性的值 -->
				{{ message }}
			</h1>
		</div>
		<script>
		    // 从 Vue 中导入 createApp 和 ref 函数
			const { createApp, ref } = Vue
			// 创建一个 Vue 应用
			createApp({
			    // 使用 setup 函数来定义组件的响应式数据和逻辑
				setup() {
				    // 创建一个响应式引用，初始值为 'Hello vue!'
					const message = ref('Vue输出：Hello, World!')
					// 返回的对象将会被暴露给模板
					return {
					    message
					}
				}
			}).mount('#app')  // 将 Vue 应用挂载到 id 为 'app' 的 DOM 元素上
		</script>
    </body>  
</html>

执行方法：直接用浏览器打开
在这里插入图片描述
JavaScript和Vue对比如下：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript与Vue对比示例</title>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<!-- 原生JavaScript部分 -->
<div>
  <p>原生JavaScript点击次数: <span id="js-count">0</span></p>
  <button id="js-clickMe">点击我</button>
</div>

<!-- Vue部分 -->
<div id="vue-app">
  <p>Vue点击次数: {{ count }}</p>
  <button @click="count++">点击我</button>
</div>

<script>
  // 原生JavaScript代码
  var jsCount = 0;
  var jsCountElement = document.getElementById('js-count');
  var jsButton = document.getElementById('js-clickMe');
  jsButton.onclick = function() {
    jsCount++;
    jsCountElement.textContent = jsCount;
  };

  // Vue实例代码
  new Vue({
    el: '#vue-app', // 指定Vue实例挂载的元素
    data: {
      count: 0 // 定义响应式数据
    }
    // 这里不需要方法，因为Vue模板语法直接处理了点击事件和数据更新
  });
</script>

</body>
</html>

在这里插入图片描述

5.React入门程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>React 入门示例</title>
  <!-- 引入 React -->
  <script src="https://unpkg.zhimg.com/react@17/umd/react.development.js"></script>
  <!-- 引入 ReactDOM -->
  <script src="https://unpkg.zhimg.com/react-dom@17/umd/react-dom.development.js"></script>
  <!-- 引入 Babel 用于将 JSX 转换为 JavaScript -->
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <!-- 这个 div 是 React 组件的挂载点 -->
  <div id="root"></div>
  <script type="text/babel">
    // 使用 class 关键字创建一个新的 React 组件
	class App extends React.Component {
	  // render 方法定义了组件渲染的内容
	  render() {
	    // 返回 JSX，它将被转换成 HTML
		return <h1>'React输出：Hello, World!'</h1>;
	  }
	}
	
	//使用 ReactDOM 的 render 方法将 App 组件渲染到页面上的 #root 元素中
	ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>

在这里插入图片描述
JavaScript和Vue对比如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>计数器示例</title>
</head>
<body>
<!-- 原生JavaScript部分 -->
<div>
  <p>原生JavaScript点击次数: <span id="js-count">0</span></p>
  <button id="js-clickMe">点击我</button>
</div>
<script>
  // 原生JavaScript代码
  var jsCount = 0;
  var jsCountElement = document.getElementById('js-count');
  var jsButton = document.getElementById('js-clickMe');
  jsButton.onclick = function() {
    jsCount++;
    jsCountElement.textContent = jsCount;
  };
</script>

<!-- React 计数器的容器 -->
<div id="react-counter"></div>
<!-- React 实现 -->
<script type="text/babel">
// 使用 React 创建一个按钮，点击时计数加1
// 引入 React 库
const { useState } = React;
// 创建一个 React 组件
function Counter() {
  // 使用 useState 钩子来添加 React 状态
  const [count, setCount] = useState(0);
  // 返回 JSX，它描述了 UI 应该如何呈现
  return (
    <div>
	  {/* 这是一个段落标签，用于显示当前的计数 */}
      <p>React点击计数: {count}</p>
	  {/* 这是一个按钮，它有一个点击事件处理器，每次点击都会使计数增加 */}
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

// 将 React 组件渲染到页面上
ReactDOM.render(<Counter />, document.getElementById('react-counter'));
</script>

<!-- 引入 React -->
<script src="https://unpkg.zhimg.com/react@17/umd/react.development.js"></script>
<!-- 引入 ReactDOM -->
<script src="https://unpkg.zhimg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 引入 Babel 用于将 JSX 转换为 JavaScript -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</body>
</html>