一、前端技术结构分析
网页的结构（HTML）、表现(CSS)、行为(JS)
1.HTML定义界面整体结构
2.CSS定义页面样式
3.JS实现动态效果
二、HTML
2.1安装VS Code及前端开发插件
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- Code Spell Checker检查单词错误
- HTML CSS Support
- IntelliJ IDEA Keybindings
- JavaScript (ES6) code snippets
- Mithril Emmet
- Path Intellisense
- Path Intellisense
- VueHelper
10.Auto Close Tag
- Auto Rename Tag
- Beautify
- [Deprecated] Bracket Pair Colorizer 2
- open in browser
- Vetur
2.2新浪新闻页面结构分析
- 图片标签
2.3创建文件
<!-- 声明文档类型是html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈</title> </head> <body> <!-- 01、绝对路径 <img src="D:\Java\JavaWeb\Html_2024_8_7\news_logo.png"> --> <!-- 02、相对路径 ./ 表示当前目录 ../表示上一级目录--> <!-- 宽度，高度：width height 单位：px像素 或者%百分比 一般只设置一个另一个等比例缩放，百分比占的是整个body的大小 --> <img src="./news_logo.png">新浪政务>正文 <!-- 标题 --> <h1>焦点访谈：关于开展学习运用“千万工程”经验加强金融支持乡村全面振兴专项行动的通知</h1> <hr><!-- 水平分割线 --> 原标题：中国人民银行、金融监管总局、中国证监会、财政部、农业农村部关于开展学习运用“千万工程”经验加强金融支持乡村全面振兴专项行动的通知 <hr> </body> </html>
三、CSS
3.1引入CSS
3.1.1行内样式和内嵌样式
3.1.2外联模式引入（常用）
3.2引入标签span
当存在多个标签时如何选择让固定标签中内容使用css样式？
3.3选择器引入
类选择器的命名可以重复，id选择器不可以重复
h1{ color: blueviolet; } .cls1{ color: blueviolet; } span{ color: aqua; }
3.4超链接引入
a标签引入
a{ color: black; /* 设置超链接没有下划线 */ text-decoration: none; }
3.5正文排版
3.5.1 br实现换行
<video src="./oceans.mp4" controls width="1000"> </video> <br> 2023年12月，石家庄市生态环境局执法人员对近年因出具虚假环境监测报告被依法处罚的第三方机构名单进行梳理， 发现河北从瑞环保科技有限公司（以下简称从瑞公司）在2023年分别被石家庄、邯郸、保定等地生态环境部门处罚9次。经核查，从瑞公司的虚假报告均在2022年至2023年期间出具，并且在2023年1月9日、6月16日被地方生态环境部门分别实施两次行政处罚后，又于7月6日出具虚假报告，8月16日被石家庄生态环境局再次行政处罚。
3.5.2段落标签
p{ text-indent: 35px;/* 设置首行缩进 */ line-height: 40px;/* 设置行高 */ }
3.6页面布局
3.6.1div与span
3.7表格标签
<table border="1px" width="300" cellspacing="0"> <!-- cellspacing="0"设置单元格之间的空白为0 --> <tr> <!-- 表头要用th --> <th>Id</th> <th>name</th> </tr> <tr> <td>001</td> <td>华为</td> </tr> <tr> <td>002</td> <td>小米</td> </tr> </table>
3.8表单
3.8.1get方式请求
请求结果会直接拼接到url后面
3.8.2post方式提交
<form action="" method="post"> 用户名：<input type="text" name="username"> 密码：<input type="text" name="password"> 年龄：<input type="text" name="age"> <input type="submit" name="提交"> </form>
两者区别：
- get：在url后面进行表单数据的拼接，但是url长度有限制，数据较多无法使用，
<form action="" method="post">即使method不设置，默认时get - post：在消息体（请求体）中传递，参数大小无限制
3.9表单项
四、JS
4.1引入Script
4.1.1内部脚本引入
4.1.2外部脚本引入
4.2基础语法
4.2.1输出语句
<!-- Js三种输出语句 --> <!-- 弹出警告框 --> <Script> window.alert("警告"); </Script> <!-- document --> <script> document.write("hello JS") </script> <!-- 浏览器控制台输出 --> <Script> console.log("浏览器控制台输出") </Script>
4.2.2变量
不用指定数据类型，且定义的变量是全局类型
<script> /* 定义变量 */ { var x=1; x="hello";/* 对数据类型没有要求 */ } window.alert(x);/* 即使用括号括起来，var定义的变量默认是全局数据类型，仍然可以取到 */ var x=20;/* 可以重复定义变量区别java */ </script>
局部变量声明
常量声明
<body> <!-- 局部变量声明let --> <script> { var a=100; let x=10; } alert(a); alert(x);//访问不到 </script> </body>
var length = 7; // 数字 var lastName = "Gates"; // 字符串 var cars = ["Porsche", "Volvo", "BMW"]; // 数组 var x = {firstName:"Bill", lastName:"Gates"}; // 对象
4.2.3函数
**JavaScript 函数语法** function name(参数 1, 参数 2, 参数 3) { 要执行的代码 }
JS是弱类型语言，形参不需要指定类型，方法返回值类型也不用指定
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x function myFunction(a, b) { return a * b; // 函数返回 a 和 b 的乘积 }
4.3JS对象
4.3.1常用基础对象
4.3.2Array数组对象
- 定义方式（区别Java中用的是大括号）
const cars = ["Tesla", "Volvo", "BMW"];
- 访问
数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。
<script> var arr=new Array(1,2,3,4); console.log(arr[2]);//输出到控制台 </script>
3. JS中的数组类似于java中的集合：长度和数据类型可变
<script> var arr=new Array(1,2,3,4); console.log(arr[2]);//输出到控制台 //JS中的数组类似于java中的集合：长度和数据类型可变 arr[5]="hello";//在java中会报错数组越界异常 console.log(arr[5]); </script>
foreach只遍历数组中有值的元素，for循环会遍历所有值
<script> var arr=new Array(1,2,3,4); console.log(arr[2]);//输出到控制台 //JS中的数组类似于java中的集合：长度和数据类型可变 arr[5]="hello";//在java中会报错数组越界异常 console.log(arr[5]); //forEach遍历数组 console.log("forEach循环结果："); arr.forEach(element => { console.log(element); }); //for循环 console.log("for循环结果："); for (let index = 0; index < arr.length; index++) { console.log(arr[index]); } </script>
//添加值push arr.push(10,11) //将项目添加到数组： arr.splice(2, 0, "Lemon", "Kiwi"); console.log(arr); //在位置 2，添加新项目，并删除 1 个项目： var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 1, "Lemon", "Kiwi"); console.log(fruits); //在位置 2，删除 2 个项目： var fruits2 = ["Banana", "Orange", "Apple", "Mango", "Kiwi"]; fruits2.splice(2, 2);
4.3.3String对象
4.3.4Json对象
JSON 是用于存储和传输数据的格式。
JSON 是文本，文本可以在任何地方传输，并可通过任何编程语言读取。
JavaScript 对象可以转换为 JSON，JSON 可以转换回 JavaScript 对象。
// JavaScript 对象...： var myObj = { "name":"Bill", "age":19, "city":"Seattle" }; // ...转换为 JSON： var myJSON = JSON.stringify(myObj);
4.3.5BOM对象
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
以下为最主要的BOM对象
- Window对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：
window.document.getElementById("header"); //等同于 document.getElementById("header");
其他窗口方法
window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveTo() -移动当前窗口 window.resizeTo() -重新调整当前窗口
4.3.6Dom对象
浏览器中会形成一个Dom树
JS主要实现网页行为的，主要就是通过Dom和事件监听机制实现网页动态行为
比如可以通过点击某按钮，对html中的元素内容和样式进行修改
Html-DOM使用，HtmlDOM将标签定义为了一个个的对象，以便Script中调用对象并对其相应的属性进行更改。
使用：
- 获取对象
<body> <div id="h1">创智教育</div><br> <div class="cls">黑马程序员</div><br> <input type="checkbox" name="hobby">电影 <input type="checkbox" name="hobby">旅游 <input type="checkbox" name="hobby">游戏 </body> <!-- 可以定义在任何位置 --> <!-- 获取Element（标签）元素 ,如果有多个返回值，返回的是数组--> <script> //01通过id获取 var H1 =document.getElementById("h1") alert("通过id获取"+H1) //02通过标签获取 var Tag1=document.getElementsByTagName("div") for (let index = 0; index < Tag1.length; index++) { alert("通过标签获取:"+Tag1[index]) } //02通过name获取 var Name1=document.getElementsByName("hobby") //02通过class获取 var Class1=document.getElementsByClassName("cls") </script>
- 改变该对象的属性
var H1 =document.getElementById("h1") H1.innerHTML="调用div对象后更改" //获取的是div标签
找到div对象对于的属性
使用：innerHTML 属性设置或返回元素的 HTML 内容（内部 HTML）。
4.4JS事件
五、Vue
一、概念
Vue.js是一套构建用户界面的渐进式 JavaScript框架，专注于视图层，提供MVVM风格的双向数据绑定，并具备组件化机制。
Vue.js非常注重核心库的精简，其核心库只关注视图层，这使得Vue与其它大型框架不同，它被设计为可以自底向上逐层应用。当涉及到复杂单页应用时，Vue不仅能提供简洁的数据绑定和模板语法，还能结合多种工具和库，如Vue Router、Vuex等，来支持复杂的应用开发。
Vue.js的推出，主要是为了应对Web应用开发中的日益增长的复杂性。在传统的DOM操作中，开发者需要频繁地进行手动操作，这导致代码难以维护，性能也受到影响。Vue通过引入声明式渲染和组件化机制，有效解决了这些问题。声明式渲染让开发者可以通过模板语法直接表达数据与界面的关系，而无需直接操作DOM；组件化则允许将界面拆分成独立、可复用的组件，每个组件包含自己的逻辑和样式。
二、工具安装
V2官网
下载开发版本：完整版本，会有常见问题的警告提示，项目上线如果用到核心包，可以使用生产版本。
三、用法
3.1快速上手
- 插值表达式+双向绑定数据指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 02引入vue.js开发包，一旦引入Vue开发工具包，全局环境中就有了Vue的构造函数，就可以创建Vue的实例，new Vue --> <script src="D:\Java\JavaWeb\Html_2024_8_7\vue.js"></script> </head> <body> <!-- 01引入容器 --> <div id="app1"> <!-- 04渲染代码的逻辑 --> {{ msg }} <br> <a>{{count}}</a> <h1>{{ms}}</h1> <input type="text" v-model="msg"><!-- 数据绑定 --> </div> </body> <!-- 03创建实例 --> <script> const app=new Vue({ //配置选择器，指定管理的对象 el:"#app1", //通过data提供数据 data:{ msg:"hello world", count:666, ms:7777 } }) </script> </html>
双向数据绑定：
3.2常用指令
3.2.1bind绑定标签属性值，model绑定数据
<body> <!-- 01引入容器 --> <div id="app1"> <!-- 04渲染代码的逻辑 --> <a v-bind:href="url">百度</a> </div> </body> <!-- 03创建实例 --> <script> const app=new Vue({ //配置选择器，指定管理的对象 el:"#app1", //通过data提供数据 data:{ url:"https://www.baidu.com/" } }) </script>
3.2.2v-on绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- 01引入vue包 --> <script src="D:\Java\JavaWeb\Html_2024_8_7\vue.js"></script> <body> <div id="bind1"> <!-- 通过vue实现事件绑定 --> <input type="button" value="点我一下" v-on:click="Click()"><!-- js实现绑定事件直接写click： --> <input type="button" value="简化写法：点我一下" @click="Click()"><!-- 简化 --> </div> </body> <script> new new Vue({ el:"#bind1", data:{ }, //定义方法 methods: { Click:function(){ alert("你点了我一下") } } }) </script> </html>
3.2.3v-if条件判断，v-show
两者的区别：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 01引入vue包 --> <script src="D:\Java\JavaWeb\Html_2024_8_7\vue.js"></script> </head> <body> <div id="app"> <div v-for="item in Array">{{item}}</div> <input type="text" v-model="msg"> </div> </body> <script> const app=new Vue({ el:"#app", data:{ msg:"Hello", Array:["北京","天津","河北","安徽"] } }) </script> </html>
3.3案例
<body> <div id="app"> <!-- 定义一个表格 --> <table border="1" cellspacing="0" width="60%"> <tr> <!-- 表头部署 --> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <!-- 一行静态数据 --> <tr align="center"> <td>1</td> <td>Alex</td> <td>18</td> <td> <span>男</span> <span>女</span> </td> <td>90</td> <td> <span>优秀</span> <span>及格</span> <span style="color: red;">不及格</span> </td> </tr> </table> </div> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-案例</title> <script src="D:\Java\JavaWeb\Html_2024_8_7\vue.js"></script> </head> <body> <div id="app"> <!-- 定义一个表格 --> <table border="1" cellspacing="0" width="60%"> <tr> <!-- 表头部署 --> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <tr align="center" v-for="(user,index) in users"> <td>{{index+1}}</td><!-- 加1的原因是index默认从0开始 --> <td>{{user.name}}</td> <td>{{user.age}}</td> <td> <span v-if="user.gender==1">男</span> <span v-if="user.gender==0">女</span> </td> <td>{{user.score}}</td> <td> <span v-if="user.score>=85">优秀</span> <span v-else-if="user.score>=60">及格</span> <span style="color: red;" v-else>不及格</span> </td> </tr> </table> </div> </body> <script> new Vue({ el:"#app", data:{ users:[ { name: 'Tom', age: 20, gender: 1, score: 80 }, { name: 'Alice', age: 22, gender: 0, score: 90 }, { name: 'Bob', age: 24, gender: 1, score: 75 }, { name: 'Jane', age: 21, gender: 0, score: 55 }, { name: 'Mike', age: 23, gender: 1, score: 95 } ] } }) </script> </html>
3.4生命周期
钩子方法自动调用，不需要绑定，根据上图中的生命周期，挂载执行完之前调用mounted（）方法，一般在此方法中执行向服务器请求数据请求。
