前端web开发学习笔记

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>//定义jsonvar 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 获取元素-根据标签获取 - divvar 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>