JavaScript
1.Js的介绍
-
JavaScript(简称js)是一门跨平台，面向对象的脚本语言，是用来控制网页的行为的，他能使网页可以交互
-
脚本语言：就是不需要通过编译，浏览器可以直接读取的语言
2. Js的引入
-
内部脚本：
- JavaScript代码必须放在标签之间
- 在HTML文档中，可以在任意位置，放在任意数量的
<!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>
<body>
<!-- 内部脚本 -->
<script>
alert("hello,world");
</script>
<!-- 外部脚本 -->
<script src="./js的文件夹/1.demo.js"></script>
</body>
</html>
3. js的基础语法
3.1 书写语法
- 区分大小写：与java一样，变量名，函数名以及其他一切东西都是区分大小写的
- 每行的结尾的分号可有可无
- 注释：
- 单行注释：//
- 多行注释：/* */
- 大括号表示代码块
- 输出语句：
- 使用window.alert()，写入警告框(window可有省略)
- 使用document.write(),写人HTML输出
- 使用console.log()，写入用浏览器的控制台
<!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>
<body>
<script>
//弹出警告框
alert("Hello,world");
//输入html页面
document.write("hello,world");
//控制台输出
console.log("hello,world");
</script>
</body>
</html>
3.2 变量
- Js中可有使用var关键字来声明变量
- Js是一门弱语言，变量可以存放不同类型的值
- 变量的命名的规则：
- 组成字符可以是任何字母，数字，下划线，美元符号
- 数字不能开头
- 建议使用驼峰原则
var a=3;
a="张三"
- var 变量的特点：
- var声明的变量作用域比较大，是全局变量
- var声明的变量名是可以重复定义的，后面定义的变量会把前者给替换掉
- let关键字也可以用来声明变量，只不过其作用域在代码块内有效，并且不能重复声明
- const关键字，用来声明一个只读常量，一旦声明，常量值就不能发生改变
3.3 数据类型和运算符
3.3.1 数据类型
-
JavaScript中分为：原始类型和引用类型
-
原始类型：
- number：数字（整数，小时，NaN(Not a Number)
- string:字符串，单双引号都可以
- boolean:布尔值。true/false
- null:对象为空
- underfined:当前声明的对象未初始化，该变量默认值是undefined
-
使用typeof运算符可以获取数据类型
<!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>
<body>
<script>
//原始数据类型
alert(typeof(3));//number
alert(tyepof(3.14));//number
alert(typeof("A"));//string
alert(typeof('hello,world'));//string
alert(typeof(false));//boolean
alert(typeof(true));//boolean
aler(typeof(null));//object
var a;
alert(typeof(a));//undefined
</script>
</body>
</html>
3.3.2 运算符
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 三元运算符
- 该运算符与java的运算符基本一致，只有比较运算符中的== 和===与java不一样
- 在js中== 会先进行类型转换，再进行比较，===则不会进行类型转换
var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true
<!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>
<body>
<script>
var a=10;
var _a="10";
var $a=10;
alert(a==_a);//true
alert(a===_a);//false
alert(a===$a);//true
</script>
</body>
</html>
3.3.4 类型转换
- 字符串类型转换为数字
- 将字符串字面值转为数字。如果字面值不是数字，则转为NaN
- 其他类型转换为boolean
- Number:0和NaN为false，其他均转为true
- String：空字符串为false，其他均转为true
- Null和undefined：均转为false
<script>
//其他类型转换为数字
alert(parseInt("12"));//12
alert(parseInt("12A45"));//12
alert(parseInt("A45"));//NaN
//其他类型转换为boolean
if(0){
alert("0转换为false");
}
if(NaN){
alert("NaN转换为false");
}
if(-1){
alert("除了0和NaN其他都是true");
}
if(""){
alert("空字符串转换为false,其他都为true");
}
if(null){
alert("null也是转换为false");
}
if(undefined){
alert("undefined也是转换为false");
}
</script>
3.3.5 流程控制语句
- 和java一模一样
4.函数(方法)
-
介绍：函数(方法)是被设计为执行特定任务的代码块
-
定义1：JavaScript函数通过function关键字进行定义：
function fuctionName(参数1，参数2){ //执行的代码 } -
注意：
- 形式参数不需要类型，因为Js是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
-
调用：函数名称(实际参数列表)
<body>
<script>
//定义函数
function add(a,b){
return a+b;
}
var result=add(12,20);
alert(result);
</script>
</body>
- 定义2:
var functionName=fuction(参数1，参数2){
//需要执行的代码
}
var add=function(a,b){
return a+b;
}
var result=add(10,20);
alert(result);
- 定义三：类似于java的Iambda表达式
var add3=(a,b)=>{
return a+b;
}
alert(add3(10,30));
- 在函数的调用，可以传递多个参数，但是会按照函数定义的参数个数进行计算
5. 对象
5.1 Array数组
-
在JS中Array对象是用于定义数组的
-
定义：
//方法1 var 变量名=new Array(元素列表); var arr=new Array(1,2,3,4); //方法2 var 变量名=[元素列表]; var arr=[1,2,3,4]; -
访问：
arr[索引]=值 arr[10]="hellow"; -
特点：长度可变，类型可变
var arr2=[1,2,3,4]; arr2[10]="hello"; console.log(arr2[10]); -
常用的属性和方法
属性 描述 length 设置或返回数组中元素的数量 方法 描述 forEach() 变量数组中的每个有值的元素，并调用一次传入函数 push() 将新元素添加到数组的末尾，并返回数组的长度 splice() 从数组中删除元素
var arr=new Array(1,2,3,4,5);
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
对于forEach()方法，里面的参数要设置一个函数，这个函数，是用来处理遍历出来的元素
var arr=new Array(1,2,3,4,5);
arr[10]="hello";
arr.forEach(function(e){
console.log(e);
});
//js中也提供了类似Java lambda表达式叫做箭头函数
()=>{}
arr.forEach(()=>{
console.log(e);
});
//push：添加元素到数组的末尾
var arr=new Array(1,2,3,4,5);
arr.push(6,7,8);
console.log(arr);
//splice:删除元素
//从那个索引开始删除，删除几个
var arr=[1,2,3,4,5];
arr.splice(2,2);
console.log(arr);
5.2自定义对象
-
定义格式：
var 对象名={ 属性名1：属性值1, 属性名2：属性值2, 属性名3：属性值3, 函数名称：function(参数列表){} };var user={ name:"tom", age:20, gender:"male", eat:function(){ alert("吃饭"); } //也可以使用方法也可以简写 eat(){ alert("吃饭"); } }; -
调用格式：
对象名.属性名 console.log(user.name); 对象名.函数名 user.eat();
5.3 JSON的介绍
- JvavScript Object Notation,JavaScript对象标记法
- JSON是通过js对象标记书写的文本
- JSON的格式十分简单，就是K/V的键值对，但是键要用双引号
- JSON现在多用于作为数据载体，在网络中进行数据传输
- JSON字符串对象只能通过单引号标记
{
"name":"Tom",
"age":20,
"gender":"male"
}
-
定义：
var 变量名='{"key1":value1,"key2""value2}';var userStr='{"name":"Jerry","age":18,"addr":["北京","上海","武宁"]}'; -
由于无法直接获取JSON里面的值，所以需要把JSON对象转换为JS对象
var userStr='{"name":"Jerry","age":18,"addr":["北京","上海","武宁"]}';//JSON格式的字符串
//把JSON对象转换为JS对象
var jsObject=JSON.parse(userStr);
alert(jsObject.name);
//把JS对象转换为JSON对象
var jsonObject=JSON.stringify(jsObject);
alert(jsonObject);
5.4 BOM对象
-
概念：Browser Object Model 浏览器对象模型，运行JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象
-
组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
-
对于Java程序员主要了解Window和Location对象
5.4.1 Window对象
- 获取：直接使用window,其中window.可以省略
- 属性：
- history：对History对象的只读引用
- location:用于窗口或框架的Location对象。
- navigator:对navigator对象的只读引用
- 方法：
- alert()：显示一段消息和一个确定按钮的警告框
- confirm():显示带有一段消息以及确定和取消的对话框，他会有返回值，点击确定返回true，点击取消返回false
- setInterval()：按照指定的周期(毫米)来调用函数或表达式
- setTimeout():在指定的毫米数后调用函数或计算表达式
<script>
alert("弹出一个警告框");
//confirm方法--对话框--确认：true--取消：false
var flag=confirm("是否要删除文件");
alert(flag);
//定时器--setInterval --周期性的执行某个方法
//1000毫米==2s
var i=0;
setInterval(function(){
i++;
console.log("定时器执行了："+i+"次");
},2000);
//定时器--setTimeOut--延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},3000);
</script>
5.4.2 Location对象
- 介绍：地址栏对象
- 获取：window.location.属性，其中window.可以省略
- 属性：
- href：设置或返回完整的URL
<script>
alert(location.href);
//设置新的地址，并且自动跳转到新地址
location.href="https://leetcode.cn/";
</script>
5.5 DOM对象
-
概念：Document Object Model,文档对象模型。
-
将标记语音的各个组成部分封装成对应的对象：
- Document：整个文档对象
- Element:元素对象
- Attribute：属性对象
- Text:文本对象
- Comment:注释对象
-
HTML：就是超文本标记语言
-
HTML被浏览器解析成对象：
-
会将整个HTML封装成Document对象
-
会将HTML里面的每一个标签封装成Element对象
-
会将HTML标签中的属性封装成Attribute对象
-
标签之间的文本会被封装成成Text对象
-
在HTML中的注释会封装成Comment对象
-
JaavScript通过DOM，就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式(CSS)
- 对HTML DOM事件作出反应
- 添加和删除HTML元素
-
HTML中Element对象可以通过Document对象获取，而Doucument对象是通过window对象获取的
-
Document对象中提供以下获取Element元素对象的函数
- 根据id属性值获取，返回单个Element对象
var h1=document.getElementByID('h1');- 通过标签名获取，返回Element对象数组
var divs=document.getElementsByTagName('div');- 根据name属性值获取，返回Element对象数组
var hobbys=document.getElementsByName('hobby');- 根据class属性获取，返回Element对象数组
var clss=document.getElementsByClassNmae('cls');<script> //1.获取Element元素 //1.1获取元素-根据ID获取,由于id是唯一的所以Element不用加s var img=document.getElementById('h1'); alert(img); //1.2获取元素-根据标签获取 var divs=document.getElementsByTagName('div'); for(var i=0;i<divs.length;i++){ alert(divs[i]); } //1.3获取元素-根据name获取 var hobby=document.getElementsByName('hobby'); for(var i=0;i<hobby.length;i++){ alert(hobby[i]); } //1.4获取元素--根据class属性获取 var divs= document.getElementsByClassName('cls'); for(var i=0;divs.length;i++){ alert(divs[i]); } //2.查询参考手册，完成相关方法 var div1=divs[0]; //通过DOM方法完成对元素的修改 div1.innerHTML="wzc天下无双"; </script> -
要使用DOM步骤：
- 获取相关对象
- 找到需要修改的属性/方法
- 修改该属性值/调用该方法
<body>
<img id="h1" src="../图片/1.png"><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">游戏
<script>
//1.点亮灯泡，修改src属性值
var light=document.getElementById('h1');
light.src="../图片/2.png";
//2.给所以div标签加上very good(红色字体)
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
const div=divs[i];
div.innerHTML+="<font color='red'>very good</font>";
}
//3.给所以复选框添加选中的状态
var box=document.getElementsByName('hobby');
for(var i=0;i<box.length;i++){
box[i].checked=true;
}
</script>
</body>
6 事件监听
- 事件：HTML事件是发生在HTML元素的“事件"，例如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
- 事件监听：JavaScript可以在事件被检测时执行代码
6.1 事件绑定
-
方法一：通过HTML标签中的事件进行绑定
<input type="button" onlick="on() value="按钮"> <script> fuction on(){ alert(我被点击了) } </script> -
方式二:通过DOM元素属性绑定
<input type=button id="bth" value="按钮2"> <script> document.getElmenetById('bth').onclick=function(){ alert("w我被点击；1") } </script>
6.2 常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标点击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获取焦点 |
| onload | 某个页面或图像被完全加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 键盘上某个按钮被按下 |
| onmouseover | 鼠标移动到某元素上 |
| onmouseout | 鼠标从某元素移开 |
<!-- 给body添加onload事件，当网页开始加载时，会调用load()方法 -->
<body onload="load()">
<!-- 给表格添加onsubmit事件，当提交这个表单时，会带有subfn()方法 -->
<form accept="" style="text-align: center;" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id="'b1" type="submit" value="提交">
<input id="b1" type="button" value="点击事件" onclick="fn1()">
</form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center" onmousemove="over()" onmouseout="out()">
<tr align="center">
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>98</td>
<td>优秀</td>
</tr>
<tr align="center">
<td>002</td>
<td>李四</td>
<td>100</td>
<td>非常优秀</td>
</tr>
</table>
<script>
//onload:页面/元素加载完成后触发
function load(){
alert("页面加载完毕");
}
//onclick:鼠标点击事件
function fn1(){
console.log("我被点击了");
}
//onblur:失去焦点事件
function bfn(){
console.log("失去焦点");
}
//onfocus:元素获取焦点
function ffn(){
console.log("获取焦点");
}
//onkeydown:当键盘下的某个键被按下时
function kfn(){
console.log("键盘被按下");
}
//onmouseover:当鼠标移动到元素之上
function over(){
console.log("鼠标移入....");
}
//onmouserout:当鼠标移出
function out(){
console.log("鼠标移出....");
}
//onsubmit:提交表单事件
function sunfn(){
alert("表单被提交了...");
}
</script>
</body>
<!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>
<body>
<img src="../图片/1.png" id="light">
<br><br>
<input type="button" value="点亮" onclick="on()" >
<input type="button" value="熄灭" onclick="off()">
<br><br>
<input type="text" value="absdajsdkajsdjad" onfocus="small()" onblur="big()" id="文本">
<br><br>
<input type="checkbox" name="爱好">电影
<input type="checkbox" name="爱好">旅游
<input type="checkbox" name="爱好">游戏
<br><br>
<input type="button" value="全选" onclick="al()" >
<input type="button" value="反选" onclick="none()" >
<script>
function on(){
// 为什么通过ID获取document对象可以
//var img= document.getElementById('light');
//img.src="../图片/2.png";
//我通过标签获取document对象却不可以
//因为通过下面是获得数组的
var img=document.getElementsByTagName('img');
img[0].src="../图片/2.png";
}
function off(){
var img= document.getElementById('light');;
img.src="../图片/1.png";
}
function small(){
var input=document.getElementById('文本');
input.value=input.value.toLowerCase ();
}
function big(){
var input=document.getElementById('文本');
input.value=input.value.toUpperCase();
}
function al(){
var hobby=document.getElementsByName('爱好');
for(var i=0;i<hobby.length;i++){
hobby[i].checked=true;
}
}
function none(){
var hobby=document.getElementsByName('爱好');
for(var i=0;i<hobby.length;i++){
hobby[i].checked=false;
}
}
</script>
</body>
</html>
7. Vue
7.1 Vue的快速入门
-
Vue是一套前端框架，免除原生Javascript中的DOM操作，简化书写
-
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
-
视图-模型-视图模型，当模型内容改变时，通过视图模型，改变视图，或者改变视图内容时，模型内容也会发生改变
-
使用操作：
- 先引入Vue文件(Vue2)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>- 在JS代码区域，创建Vue核心对象，定义数据模型
<script> new Vue{ el:"#app", //表示Vue对象控制的区域，相当于css中的id选择器 data:{ //定义的数据模型 message:"hello Vue" } } </script>- 编写视图
<div id="app"> <input type="text" v-model="message"> {{message}}//插值表达式 </div>- 插值表达式
- 形式：{{表达式}}
- 内容：
- 变量
- 三元运算符
- 函数调用
- 算术运算
7.2 Vue的常用指令
-
指令：在HTML标签上带有的v-前缀的特殊属性，不同指令具有不同的含义
-
常用指令：
指令 作用 v-bind 为HTML标签绑定属性值，如设置href,css样式等 v-model 在表单元素上创建双向数据绑定 v-on 为HTML标签绑定事件 v-if 条件性的渲染某元素，判断为true时渲染，否则不渲染 v-else-if 条件性的渲染某元素，判断为true时渲染，否则不渲染 v-else 条件性的渲染某元素，判断为true时渲染，否则不渲染 v-show 根据条件展示元素，区别在于切换的是display属性值 v-for 列表渲染，遍历容器的元素或对象的属性
7.2.1 v-vbind和v-model
- v-bind:为HTML标签绑定属性值，如设置href,css样式等
- v-model:在表单元素上创建双向数据绑定
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- 通过v-vind给href动态绑定地址 -->
<a v-bind:href="url">链接1</a>
<!-- 简化模式 -->
<a :href="url">链接2</a>
<!-- 这时候input表单元素和数据项的url绑定了 -->
<input type="text" v-model="url">
</div>
<script>
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com/"
}
})
</script>
- 注意：当我们通过V-bind或者v-model绑定变量时，必须在数据模型中声明该变量(例如：上面的url)
7.2.2 v-on
-
为HTML标签绑定事件
-
在v-on:后面绑定事件名称
- 视图层：
<input type="button" value="按钮" v-on:click="handle()">; <!-- 简化模式 --> <input type="button" value="按钮" @click="handle()">;- 创建Vue对象
<script> new Vue({ el:"#app", //定义控制区域的区域 data:{ //定义数据模型的区域 //.... }, methods:{ //定义函数的区域 handle:fuction(){ alert("我被点击了") } } }) </script>
<body>
<input type="button" id="app" value="按钮" v-on:click="handel()">
<script>
new Vue({
el:"#app",
data:{
},
methods:{
handel:function(){
alert("我被点击了")
}
}
})
</script>
</body>
7.2.3条件渲染事件
- 注意：v-show是通过控制css中的display属性值来完成的
<body>
<div id="app">
年龄<input type="text" v-model="age">
<span v-if="age<=35">年轻人</span>
<span v-if="age>35&&age<60">中年人</span>
<span v-if="age>=60">老年人</span>
<br><br>
年龄<input type="text" v-model="age">
<span v-show="age<=35">年轻人</span>
<span v-show="age>35&&age<60">中年人</span>
<span v-show="age>=60">老年人</span>
</div>
<script>
new Vue({
el:"#app",
data:{
age:35
}
})
</script>
</body>
7.2.4V-for
- v-for：基本语法：
<div v-for="addr in addrs">{{addr}}</div>
//第一个addr是遍历出来的元素名称，可以自定义
//第二个addr是在数据模型中定义的数据类型
//插值表达式可以将出数据插入到HTML模版中
//索引是从0开始的
<body>
<div id="app">
<!-- 方式1 -->
<div v-for="addr in addrs">{{addr}}</div>
<!-- 方式二 -->
<div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>
</div>
<script>
new Vue({
el:"#app",
data:{
addrs:["北京","天津","厦门","南昌","武宁"]
}
})
</script>
7.3 Vue的生命周期
- 生命周期：一个对象从创建到销毁的整个过程
- 生命周期的八大阶段：没触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
| 状态 | 创建周期 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新完成 |
| beforeDestroy | 销毁前 |
| destoryed | 销毁完成 |
<script>
new Vue({
el:"#app",
data:{
},
mounted(){
console.log("Vue挂载完成,请求获取数据");
},
methods:{
},
})
</script>
8.Ajax(暂时有点懵24.3.13)
- 概念： Asynchronous JavaScript And Xml ,异步的JavaScript和XML
- 作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应数据
- 异步交互：可以在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页技术：搜索联想，用户名是否可以用的校验等等
8.1 Axios
-
介绍：Axios对原生的Ajax进行了封装，简写书写，快速开发
-
Axios的使用方式：
- 引入Axios的js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>- 使用Axios发送请求，并获取响应结果
9. 前端工程化
- 为了使前后端能够发生交换就必须遵守同一个接口文档
9.1 YApi
-
介绍：YApi是高效，易用，功能强大的api管理平台，旨在为开发，产品，测试人员提供更优雅的接口管理服务
-
也可以使用Apifox
-
get/post请求方式的区别：
-
-
Apifox的使用步骤：
- 先创建一个目录(添加项目和添加分类)
- 在添加接口，使用get请求方式，接口名可以见名之意，比如：getById(通过id查询)（添加接口）
- 再在修改文档中设置请求参数和返回响应
9.2 环境准备
- 介绍：Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模版
- Vue-cli提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
- 依赖环境：NodeJs
9.3 Vue项目
9.3.1项目的创建
-
命令行：
vue create vue-project01 -
图形化界面：
vue ui -
创建项目步骤：
- 在所需项目文件夹打开控制面板，再在命令行输入vue ui命令
- 在创建项目中–包管理器选择npm，暂时不初始化Git仓库
- 在选择预设模版中–手动
- 再额外选择–Router功能
- 选择Vue的版本–2.x
- 语法检测选择第一个
- 再在VScode中打开Vue文件夹
9.3.2Vue项目的目录结构
- 基于Vue脚手架创建出来的工程，有标准的目录结构，如下：
-
打开Vue项目：
- 在Vscode中的NPM脚本中，在serve中运行
- 在命令行中输入：npm run serve
-
配置Vue项目的端口号:
9.4 Vue项目的开发流程
-
Vue组件文件以.vue结尾，每个组件由三部分组成：,
10.Element
- Element是一套为开发者，设计师和产品经理准备的基于Vue2.0桌面的组件库
- 组件：组成网页的部件，例如：超链接，按钮，图片，表格，表单，分页条等
10.1 Element的快速入门
-
安装ElementUI组件库(当前工程的目录下)，在命令行执行代码：
npm install element -ui@2.15.3 -
会把element-ui目录安装在node_modules目录下
-
引入ElementUI组件库(在main.js文件下)，这个可以直接去官网搜索
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); -
再在views下创建vue文件(采用驼峰命名)，并且要包括vue的三部分
-
访问Element官网，复制组件代码到所创建的vue文件中，调整相关组件
-
由于默认展示的是根组件App.vue里面的内容，所以我们就需要在App.vue里面引用所创建的Vue文件
-
在中添加标签：，这样会在
import ElementView from './views/ElementView.vue'
export default {
components: { ElementView },
10.2 Element的常见组件
- 组件：就是直接去Element官网，直接负责，然后进行调试就可以了
- Ctrl+Alt+F格式化
10.2.1 表格
- Table：用于展示多条结构类似的数据，可对数据进行排序，筛选，对比或其他自定义的操作。
- 可以查看该组件官网的最下面查看相关属性信息
10.2.2Pagination分页组件
- Pagination分页：当数据量过多时，使用分页分解数据
- 具体查看Element官网
10.2.3 Dialog对话框
- 在保留当前页面状态的情况下，告知用户并承载相关操作
10.2.4Form表单
-
Form表单：有输入框，选择器，单选框，复选框等控件组成，用以收集，校验，提交数据
-
通过el-form声明一个表单
-
通过model变量绑定了一个变量from
-
通过el-form-item声明一个表单项
-
再通过v-model绑定数据模型
-
由于绑定了数据模型，就得在data里面声明
//ElementView.vue
<template>
<div>
<!-- 这是button按钮 -->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<!-- 这是表格 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<!-- 这是分页组件 -->
<el-pagination
background
layout="total,sizes,prev, pager, next,jumper"
:total="1000"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
<!-- 这是对话框 -->
<!--定义了dialogTableVisible数据模型，数据模型在data里面定义的 -->
<el-button type="text" @click="dialogTableVisible = true"
>打开嵌套表格的 Dialog</el-button
>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<!-- 定义了griddata数据模型 -->
<el-table :data="gridData">
<el-table-column
property="date"
label="日期"
width="150"
></el-table-column>
<el-table-column
property="name"
label="姓名"
width="200"
></el-table-column>
<el-table-column
property="address"
label="地址"
width="200px"
></el-table-column>
</el-table>
</el-dialog>
<br /><br />
<!-- 通过Dialog展示表单 -->
<el-button type="text" @click="dialogFormVisible = true"
>打开嵌套表单</el-button
>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
<!-- 通过model绑定了一个变量form -->
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date1"
style="width: 100%"
></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker
placeholder="选择时间"
v-model="form.date2"
style="width: 100%"
></el-time-picker>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
},
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
gridData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
dialogTableVisible: false,
dialogFormVisible: false,
};
},
methods: {
handleSizeChange: function (pager) {
alert("展示页面数据量为：" + pager);
},
handleCurrentChange: function (pager) {
alert("跳转到页面：" + pager);
},
onSubmit:function(){
// 由于里面的数据全部绑定到了form对象中，可以输出form对象输出
//由于Form是JSON对象，所以得通过stringify将其转换成字符串
alert(JSON.stringify(this.form));
}
},
};
</script>
<style>
</style>
11.Axios异步加载
-
当完成页面的布局和组件的实现之后，就需要使用Axios进行异步加载了
-
使用步骤：
- 在项目目录下安装axios:npm install axios(右击该项目在集成终端中打开)
- 需要使用axios时，导入axios：import axios form ‘axios’(导入到所创建的Vue文件)
- 再创建一个与methods平级的钩子方法(mounted)，在该方法中获取异步请求：
axios.get("https://yapi.pro/mock/73458/emp/list").then((result) =>{ //地址可以通过YApi创建获取 //result就是从Yapi获取到的数据 //再通过.data获取到数据中的数据管理模块 //再.data从数据管理模块中获取data属性 //再讲获取到的值给上面的数据模型赋值 this.tableData=result.data.data; });
12. vue路由
- 前端路由：URL中的hash(#号后面的)与组件之间的对应关系
- Vue Router是Vue官方路由
- 组成：
- VueRouter:路由器类，根据路由请求在路由视图中动态渲染选中的组件
- :请求链接组件，浏览器会解析生成(超链接标签)
- :动态路由视图组件，用来渲染展示与路由路径对应的组件
- 路由器类中有一个路由表：该表中有与vue组件相关的标识，通过路由链接组件，通过标识来链接对应的组件
12.1 使用步骤
-
安装路由(在创建Vue项目时已经选择了)
npm install vue-router@3.5.1 -
定义路由表
-
要在：src的router的index.js中定义
-
相关的路由信息在const routes 里面配置
-
-
由于在main.js中已经导入路由信息，并且在创建Vue对象时已经指定了路由
-
当完成了上述之后，就需要使用标签，然后在对应的区域展示出效果
-
标签放在需要跳转标签处
<el-menu-item index="1-1"> <router-link to="/dept">部门管理</router-link> </el-menu-item> <el-menu-item index="1-2"> <router-link to="/emp">员工管理</router-link> </el-menu-item> -
再在APP.vue展示，把之前的vue标签注释掉，使用 标签
-
当我们重新加载这个项目时，会展示出空白页面，因为初始时，默认路径是空，解决办法就是在添加一个空路径到router里面
13 打包部署
- 打包部署分为两步：打包和部署
- 再讲打包好的文件夹通过Nginx部署到服务器上
13.1 打包
- 执行NPM第二个脚本：build进行打包，会将打包好的文件放在dist目录下
13.2 部署
-
介绍：Nginx是一款轻量级的Web服务器/方向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点：占用内存少，并发能力强，在各大互联网公司都有非常广泛的使用
-
Nginx相关目录：
-
部署：将打包好的dist目录下的文件，复制到Nginx安装目录的html目录下面
-
启动：双击Nginx.exe文件就可以，Nginx服务器默认占用本地的80端口号
-
可以在命令行中输入：netstat -ano | findStr 80 就可以查看80端口被什么程序占用了
-
当80端口号是被系统占据时，我们可以通过修改默认端口号来解决
-
修改步骤：
- 在conf目录下的nginx.conf中修改
- 在36行的listen 把80修改为90
-
查看：在浏览器中输入：localhost:90 就可以查看网页了
通过标识来链接对应的组件
12.1 使用步骤
-
安装路由(在创建Vue项目时已经选择了)
npm install vue-router@3.5.1 -
定义路由表
-
要在：src的router的index.js中定义
-
相关的路由信息在const routes 里面配置
-
-
由于在main.js中已经导入路由信息，并且在创建Vue对象时已经指定了路由
-
当完成了上述之后，就需要使用标签，然后在对应的区域展示出效果
-
标签放在需要跳转标签处
<el-menu-item index="1-1"> <router-link to="/dept">部门管理</router-link> </el-menu-item> <el-menu-item index="1-2"> <router-link to="/emp">员工管理</router-link> </el-menu-item> -
再在APP.vue展示，把之前的vue标签注释掉，使用 标签
-
当我们重新加载这个项目时，会展示出空白页面，因为初始时，默认路径是空，解决办法就是在添加一个空路径到router里面
13 打包部署
- 打包部署分为两步：打包和部署
- 再讲打包好的文件夹通过Nginx部署到服务器上
13.1 打包
[外链图片转存中…(img-ah5zwD1U-1714900669494)]
- 执行NPM第二个脚本：build进行打包，会将打包好的文件放在dist目录下
13.2 部署
-
介绍：Nginx是一款轻量级的Web服务器/方向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点：占用内存少，并发能力强，在各大互联网公司都有非常广泛的使用
-
Nginx相关目录：
[外链图片转存中…(img-joHOaMKO-1714900669494)]
-
部署：将打包好的dist目录下的文件，复制到Nginx安装目录的html目录下面
-
启动：双击Nginx.exe文件就可以，Nginx服务器默认占用本地的80端口号
-
可以在命令行中输入：netstat -ano | findStr 80 就可以查看80端口被什么程序占用了
-
当80端口号是被系统占据时，我们可以通过修改默认端口号来解决
-
修改步骤：
- 在conf目录下的nginx.conf中修改
- 在36行的listen 把80修改为90
-
查看：在浏览器中输入：localhost:90 就可以查看网页了
2224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
