前端web开发学习笔记

最新推荐文章于 2024-05-13 15:29:18 发布
最新推荐文章于 2024-05-13 15:29:18 发布
阅读量453 收藏 4
点赞数 5
分类专栏： javaweb 文章标签： 前端 学习 笔记 java javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61689418/article/details/134624883
版权

JavaWeb

在这里插入图片描述

前端Web开发

HTML

负责网页的结构（页面元素和内容）。
在这里插入图片描述
在这里插入图片描述

CSS

负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
在这里插入图片描述

javaScript（Js）脚本语言。用来控制网页行为的，它能使网页交互。（交互效果）

javaScript

1.JS引入

<!-- 内部脚本 -->
<script>
     alert('Hello JS')
</script>

<!-- 外部脚本 -->
<script src="js/demo.js"></script>

2.JS基础语法

在这里插入图片描述

JS输出语句

<script>
//方式一: 弹出警告框
window.alert("hello js");

//方式二: 写入html页面中
document.write("hello js");

//方式三: 控制台输出,在console可以看到
console.log("hello js");
</script>

JS变量

var
var声明的变量可以接受任何数据类型的值，变量可以多次赋值，后面值把前面覆盖
var声明的变量的作用于是全局的

<script>
    //var定义变量
    var a = 10;
    a = "张三";
    alert(a);
    var a = 20;
    alert(a);
</script>

let
局部变量，不能重新定义

    <script>
        {
            let x = 1;
            x = 2;
            alert(x);
        }
    </script>

const
常量，不能重新定义，不能多次赋值

3.JS函数

<script>
    //定义函数
    function add(a,b){
        return a + b;
    }

    //函数调用
    var result = add(10,20);
    alert(result);
</script>

4.JS对象

Array

特点：长度可变，类型可变

<script>
    //定义数组
    var arr = new Array(1,2,3,4);
    console.log(arr[0]);
    
    arr[10] = 50;
    
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    
    //forEach：遍历数组中有值的元素
    arr.forEach(function(e) {
        console.log(e)
    });
    
    //push：添加元素到数组尾部
    arr.push(7,8,9);
    console.log(arr);
    
    //splice：删除元素
    arr.splice(2,2)   //从数组下标为2开始删，删2个
    console.log(arr);
</script>

String

<script>
    //定义字符串
    var str = "Hello";
</script>

自定义对象

<script>
    //自定义对象
    var user = {
        name:"Tom",
        age:20,
        gender:"male",
        eat: function(){
            alert("用膳");
        }
    };

    //获取对象中的属性
    console.log(user.name);
    //对象中方法的调用
    user.eat();
</script>

JSON

作为数据的载体，在网络中传输。

json必须使用双引号

<script>
    //定义json
    var jsonstr = '{"name":"Tom", "age":"18", "addr":["北京","上海","西安"]}';
    alert(jsonstr.name)   //结果为undefined，因为jsonstr是一个字符串，要是一个对象才可以

    //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    alert(obj.name)

    //js对象--json字符串
    var jsonStr = JSON.stringify(jsonstr);
</script>

BOM

浏览器对象模型，运行JavaScript与浏览器对话，JavaScript将浏览器的各个部分封装为对象

BOM中提供了5个对象：
主要学习下面两个对象
window：浏览器窗口对象

<script>
    //BOM

    //window
    //获取（window可以省略）
    window.alert("Hello BOM");
    
    //方法
    //confirm - 对话框
    var flag = window.confirm("你确认删除该记录吗？");
    alert(flag);

    //定时器 - setInterval -- 周期性的执行某个函数
    var i = 0;
    setInterval(function(){
        i++
        console.log("定时器执行了"+i+"次")
    })

    //定时器 - srtTimeout --延迟指定时间执行一次
    setTimeout(function(){
        alert("JS")
    },3000);
</script>

location：地址栏对象

<script>
    //location：地址栏对象
    alert(location.href)

    location.href = "https://www.baidu.com/index.htm"
</script>

DOM文档对象模型

将 HTML 文档的各个组成部分封装为对象

获取DOM中的元素对象（Element对象 ，也就是标签）
操作Element对象的属性（标签的属性）

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">教育</div>   <br>
    <div class="cls">程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 获取Element元素
    //1.1 获取元素-根据ID获取
    var img = document.getElementById('h1');
    alert(img);

    //1.2 获取元素-根据标签获取 - div
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }

    //1.3 获取元素-根据name属性获取
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);
    }

    //1.4 获取元素-根据class属性获取
    var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }

    //2. 查询参考手册, 属性、方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];
    
    div1.innerHTML = "英才教育";

</script>

JS事件监听

事件：发生在HTML元素上的 “事情”

事件绑定

    <script>
        function on(){
            alert("按钮1被点击了...")
        }
        
        document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了...");
    }
    </script>

常见事件
在这里插入图片描述

Vue

前端js框架

Vue快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

Vue常用指令

v-bind、v-model、v-on、v-if、v-show、v-for

Vue的生命周期

主要掌握mounted（挂载完成）

Ajax

与服务器进行数据交互

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

Axios

前端工程化

环境准备

Vue-dli是官方提供的一个脚手架，用于快速生成Vue的项目模板

Vue-cli主要提供了如下功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线

环境依赖：NodeJS

NodeJS安装和Vue-cli安装

先下NodeJS，再去下Vue-cli
NodeJS下载地址 https://nodejs.org/en

Vue-cli安装
使用管理员身份运行命令行，在命令行中，执行如下指令：
npm install -g @vue/cli

vue项目

在这里插入图片描述

Vue组件库Element

安装ElementUI的组件库
npm i element-ui -S

Vue项目开发流程：
在这里插入图片描述

在这里插入图片描述

组件的使用

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

button 按钮
Table 表格
Pagination分页
Dialog对话框
Form表单

Vue路由

在这里插入图片描述

Nginx打包部署

需要安装Nginx
nginx默认占用80，要改端口

不会写算法的小王
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《轻松学web前端开发入门与实战（视频彩色版）》读书笔记（一）正则表达式
2301_76995272的博客
08-03 101
例如匹配“ab开头，后面紧跟数字字符串”的正则表达是“ab\d+”，其中ab就是普通字符串，这里用于匹配以ab开头的字符串，\d表示匹配数字，代表0-9，+表示前面的字符可以出现1次或者1次以上（在这里就是匹配1位或1位数字以上的字符串）表单中的某些控件的数据输入格式是有要求的，例如有的只能输入数字，有的只能输入字母，有的则要求输入数字+字母+特殊符号，，而且必须要符号一定的格式（如用户的密码，通常是字母和数组或特殊符号组合）。表单中的某些控件输入数据的值必须相同，例如表单中的设置密码和确认密码。
web前端笔记
11-30
web前端笔记
2024年前端最新react-router-dom V6 中文文档教程总结_reactrouter6中文文档，前端面试java基础
最新发布
2401_84616977的博客
05-13 1480
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
Web前端笔记
weixin_51582215的博客
04-29 479
Web前端笔记
web 前端笔记
随风潜入夜，不白头
01-25 242
一、HTML、CSS、JavaScript 三者构成一个完整的页面 1、jQuery 是一个 JavaScript 库 2、jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。 3、jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。 4、TypeScript 是 JavaScript 的一个超集 5、ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表（提供了常规的折线图、
WEB前端笔记
05-13
WEB 前端培训笔记 里面有CSS +HTML JAVASCRIPT 一些的关键点和问题
Web前端笔记(标签)
W15105879792的博客
08-01 364
学习笔记
Web前端 笔记 （21-45）
m0_74246969的博客
10-28 1413
Web前端 笔记 （21-45）
WEB前端笔记01
weixin_43938742的博客
03-30 1143
HTML 1. HTML5 HTML5 是 HTML(超文本标记语言)的最新版本。 2. <!DOCTYPE> <!DOCTYPE>是关于页面写入了什么版本的HTML的指令。<!DOCTYPE>标记没有结束标记，它不区分大小写。<!DOCTYPE>声明必须是HTML5文档中的第一行，在标记之前。 3. HTML5新特性 3.1 <canvas> <video> <audio> 元素 3.2 支持本地储存 3
Web前端的学习笔记!!!
weixin_37150764的博客
10-26 170
目录 前端大杂烩笔记 不好理清的JS基础知识和CSS3选择器小结-第一章 面试题：node.js的基本知识点阐述 NodeJS知识点梳理-第一篇
Web前端笔记记录
yjnlovepy的博客
10-19 3417
web前端开发笔记
Web前端开发笔记(1)
gentle、待人的博客
02-27 2026
Web前端开发笔记(1) HTML基础(从了解到入门) 文章目录Web前端开发笔记(1)前言基础学习路线HTML目标：1.网页1.1.什么是网页?1.2 什么是 HTML1.3 网页的形成1.4 网页总结2. 常用浏览器2.1 常用浏览器2.2浏览器内核3.Web 标准（重点）3.1为什么需要 Web 标准3.2Web 标准的构成4. HTML 标签（上）4.1 HTML 语法规范4.2 标签关系4.3 HTML 基本结构标签4.3.1 第一个 HTML4.3.2 基本结构标签总结4.4 网页开发工具4.
web前端 JS笔记
KonG_WeI的博客
12-06 357
不定时更新不同的前端学习笔记 现在整理的是JS的初级相关笔记 如果想要入门级JS笔记可以参考一下
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值