前端web开发学习笔记

JavaWeb

前端Web开发

前端Web开发

HTML

负责网页的结构（页面元素和内容）。

CSS

负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

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

javaScript

1.JS引入

html 复制代码

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

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

2.JS基础语法

JS输出语句

html 复制代码

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

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

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

JS变量

var

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

var声明的变量的作用于是全局的

html 复制代码

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

let

局部变量，不能重新定义

html 复制代码

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

const

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

3.JS函数

html 复制代码

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

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

4.JS对象

Array

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

html 复制代码

<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

html 复制代码

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

自定义对象

html 复制代码

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

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

JSON

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

json必须使用双引号

html 复制代码

<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：浏览器窗口对象

html 复制代码

<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：地址栏对象

html 复制代码

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

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

DOM文档对象模型

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

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

操作Element对象的属性（标签的属性）

html 复制代码

<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元素上的 "事情"

事件绑定

html 复制代码

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

常见事件

Vue

前端js框架

Vue快速入门

html 复制代码

<!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，要改端口