前端web开发学习笔记

news2024/11/28 22:32:13

JavaWeb

前端Web开发
- HTML
- CSS
- javaScript
- - 1.JS引入
  - 2.JS基础语法
  - 3.JS函数
  - 4.JS对象
- BOM
- DOM文档对象模型
- JS事件监听
- Vue
- - Vue常用指令
  - Vue的生命周期
- Ajax
- - Axios
- 前端工程化
- - 环境准备
  - NodeJS安装和Vue-cli安装
  - vue项目
  - - Vue组件库Element
    - - 组件的使用
  - Vue路由
  - Nginx打包部署

在这里插入图片描述

前端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>