前端 - 2023.9.15 -
VScode 下载地址 https://code.visualstudio.com/
https://www.w3school.com.cn/tags/index.asp // html 使用文档
VScode 使用
变中文
扩展(Extensions) --> chinese(搜索) --> install --> 右下角提示 重启
中英文之间切换
Ctrl+Shift+p --> configigure display language
扩展 插件
1. Chinese(Simplified)Language Pack // 中文语言包
2. Code Spell Checker // 拼写检查器 自动检测单词是否正确
3. HTML CSS Support // 样式表的 自动补全
4. JavaScript(ES6)code snippets // 支持ES6 语法提示
5. Mithril Emmet // 补全代码
6. Path Intellisense // 路径提示插件
7. Vue 3 Snippets // 快速创建常用的Vue组件和指令 可能与其他有冲突
8. VueHelper // 最好的vue代码提示插件
9. Auto Close Tag // 自动闭合HTML/XML标签
10. Auto Rename Tag // 自动完成另一侧标签的同步修改
11. beautify // 格式化 html js css
12. Bracket Pair Colorizer // 给括号加上不同的颜色
13. open in browser // 快速打开浏览器 Alt + B
14. Vetur // Vue多功能集成插件 包括 语法高亮 智能提示 错误提示 自动补全等
15. InteIIiJ IDEA Keybindings // 在 VScode中使用 IDEA快捷键
快捷键
0. ! // 生成 网页的 基本配置
1. Shift + Alt + F // 格式化代码
2. Alt + ↓ // 向下移动一行
3. Shift + Alt + ↓ // 复制一行
4. Ctrl + H
5. Ctrl + Enter // 光标指向下一行
6. h$*5 // 生成 1 - 5 标题标签
7. Alt + b // 打开浏览器查看结果 需要安装 open in browser插件
8. ul>li*3 // 生成无序列表
9. table>tr*3>td*2{单元格} // 创建三行两列的表格 td里面的 文本信息是 单元格
10. Ctrl + B // 隐藏目录栏
注:
使用 VScode 编辑 vue 代码的时候 不能使用 快捷键 添加注释 首先检查有下角 选择语言模式是不是 vue类型
VScode 默认不支持vue 类型 如果其中没有vue类型 可能是插件冲突
卸载有关 vue的插件. 重新按照 vetur 及 VueHelper插件
Avue
一. 在 Avue 中 添加 按钮 并 弹出窗口 需要的代码
<avue-crud // 按钮 需要在 <avue-crud> 标签中添加
<template #menu-left> // 添加一个按钮 有多个按钮 在里面添加 <el-button> 其中 #menu-left 在窗口的 左侧添加按钮
<el-button type="primary" v-if="permission.recruitBasisAmount_modify" @click="handleRecruitBasisAmount">批量修改招募基础金额</el-button>
</template>
</avue-crud>
// 对话框窗口信息 (点击按钮后 弹出的 对话框窗口信息) 在 <avue-crud> 外添加
<el-dialog :title="'批量修改招募基础金额'" append-to-body v-model="boxRecruitBasisAmount" width="600px" :fullscreen="dialogFull" v-if="boxRecruitBasisAmount">
<div class="avue-crud__dialog__header">
<div style="padding-right:40px" @click="dialogFull ? dialogFull = false : dialogFull = true">
<i class="el-icon-full-screen"></i>
</div>
</div>
<avue-form :option="optionRecruitBasisAmount" v-model="recruitBasisAmountModel"></avue-form>
<div style="text-align:center; color: #f6a60c;">
招募基础金额为普通合伙人每笔订单收益金额,当每日交易单数满足系统设置交易单数时,(普通合伙人分红金额=招募基础金额*单数)
</div>
<div style="text-align:center; margin-top: 10px"> // 新增了 确定 和 取消 按钮 隐藏溜原来的 提交 按钮
<el-button type="primary" @click="confirmRecruitBasisAmount">确定</el-button>
<el-button type="primary" @click="cancelRecruitBasisAmount">取消</el-button>
</div>
</el-dialog>
<script>
import { recruitBasisAmountModify } from "@/api/account/custReachStandardCaptain"; // recruitBasisAmountModify 导入 发送后端的接口
import { optionRecruitBasisAmount } from "@/option/account/captain"; // 导入 option 这里option在另一个文件中. 如果在同一文件中则不用导入
export default {
data () {
return {
optionRecruitBasisAmount: optionRecruitBasisAmount, // 指明 option
recruitBasisAmountModel: {}, // 代表 option 从后端 获取到的数据
boxRecruitBasisAmount: false, // 对话框窗口 默认设置为关闭
methods: {
// 批量修改招募基础金额 点击按钮后的 操作
handleRecruitBasisAmount(){
if (this.selectionList.length === 0) { // 如果没有选择复选框 则给出提示
this.$message.warning("请选择需要修改的合伙人");
return;
}
this.recruitBasisAmountModel = {}; // 在 option 中 字段中的数据
this.boxRecruitBasisAmount = true; // 显示 弹出窗口对话框
},
confirmRecruitBasisAmount(){ // 点击确定按钮后的操作
const basisAmount = this.recruitBasisAmountModel.recruitBasisAmount ; // 获取文本框或下拉列表框中的数据
// .recruitBasisAmount 是 option 中 字段名 prop: "recruitBasisAmount", 的数据
const reg = /^\d{1,4}(\.\d{1,4})?$/; // 正则表达式规则，确保输入为数字（整数或小数,小数点前后个最多四位）最多万位以下
if (!reg.test(basisAmount)) { // 检测 获取到的数据 是否符合
this.$message.warning('输入有误,请重新输入');
return;
}
const custIdArr = this.selectionList.map(item => item.custId).filter(id => id);
const custId = custIdArr.join(','); // 数组 转成 字符串 使用 逗号 分割
recruitBasisAmountModify({ // 调用 传入后端的接口 把 数据 传递给后端
custId: custId,
basisAmount: basisAmount,
})
.then(response => { // 前端返回 成功后的 处理
console.log(response.data);
this.$message.success('修改成功');
this.boxRecruitBasisAmount = false;
this.onLoad(this.page, this.query); // 重新加载当前页面
})
.catch(error => { // 前端返回 失败后的 处理
console.error('修改失败', error);
this.boxRecruitBasisAmount = false;
});
},
cancelRecruitBasisAmount() { // 点击 取消按钮 的操作
this.recruitBasisAmountModel = {};
this.boxRecruitBasisAmount = false;
},
custReachStandardCaptain.js
export const recruitBasisAmountModify = (params) => {
return request({
url: '/api/fss-account/CustReachStandardCaptain/recruitBasisAmountModify',
method: 'get',
params: {
...params,
}
})
}
captain.js
export const optionRecruitBasisAmount = {
menuBtn: false,
column: [
{
label: "招募基础金额",
prop: "recruitBasisAmount",
rules: [
{
required: false,
message: "请输入招募基础金额",
trigger: "blur",
},
],
labelWidth: 190,
span: 24,
},
]
};
注:
this.selectionList // 可以获取到 页面中 复选框中的 数据
this.selectionList.length // 复选框中的 数据 的长度
this.selectionList.map(item => item.custId).filter(id => id); // 可以获取到 custId
this.$message.warning("请选择需要修改的合伙人"); // 警告 提示信息 会在页面显示警告信息
const reg = /^\d{1,4}(\.\d{1,4})?$/;
reg.test(basisAmount) // 检测 正则的规则是否匹配
custIdArr.join(','); // 数组类型 转成 字符串
this.onLoad(this.page, this.query); // 重新加载当前页面
Avue3 报错解决:
1. 错误提示: TypeError: Cannot read properties of null (reading 'style') at TableLayout.setHeight
在Avue中 新添加的页面vue2 转成vue3 会出现这种情况
解决: 在 option 中 calcHeight: "auto", 去掉就好
标签
骨架标签
<!DOCTYPE html> // H5 的声明 网页必备组成部分 用于浏览器识别
<html>
<head>
<title>java html python</title> // title标签是 head里必须包括的 一般写关键字 seo优化利于
<meta charset="utf-8"> // utf-8 是程序的通用语言
</head>
</html>
标题标签
<h1>aaaaa</h1> // 标题标签 1最大 6最小
<h2>bbbb</h2>
<h3>cccc</h3>
<h1 align="left">
align="left|center|right" // align 就是一个属性 "left" 是属性值
标签的属性 在标签<h1 align="left">里面的是属性 不是两个<h1>不是属性</h1>中间的
段落格式标签
<p></p> // 段落标签 双标签
<br> // 换行标签 单标签 <br /><br> 都可以
<hr> // 水平线标签
color="red" : 设置水平线的颜色
width="300px" : 设置水平线的长度
size="20px" : 设置水平线的高度
align="left|right": 设置水平线的对齐方式 默认居中 可取值 left|right
图片标签
<img> // 图片标签
src="1.jpg" // 图片路径
alt="图片走丢了..." // 当图片路径不存在时 会显示碎裂的效果并 加上这段文字
width="300px" // 规定图片的宽度 单位是 px 另一个但是百分比 相当于父元素的百分比
height="100px" // 高度 设置图片会变形 一般不设置这个属性 宽度和高度设置其中一个另一个会等比例缩放
title="哇" // 鼠标悬停在图片上给于的提示信息
超链接标签
<a></a> 超链接标签 可以嵌套其他标签 如 <img>实现图片跳转
href="#" // 跳转本页
<a href="https://www.baidu.com/">超链接</a> // 超链接标签 地址也写全 否则不能跳转
href="https://www.baiu.com" // 必须的属性 跳转的链接 如果没有 会以文本显示
href="https://baidu.com" // 跳转的链接
target="_blank" // 打开方式
_blank // 新开窗口
_self // 当前窗口 默认的
文本标签 // 可以互相嵌套
<em>大米粥</em> // 定义着重文字
<b>大米粥</b> // 定义粗体文本
<i>大米粥</i> // 定义斜体字
<strong>大米粥</strong> // 定义加重语气
<del>大米粥</del> // 定义删除字
<span>大米粥</span> // 没有特定含义 可在CSS中方便调整样式
有序列表 // 可以嵌套列表
<ol type="I"> // 定义一个有序列表 有顺序标号
<li>哈哈</li>
<li>嘎嘎</li>
</ol>
type="I" // <ol></ol> 的属性 可调整 显示样式 默认 1 2 3
无序列表
<ul type="none"> // 一般多用于 导航 可用CSS调整
<li>哈哈</li>
<li>嘎嘎</li>
<ul>
type="disc|circle|square|none" // 默认disc 小黑原点|实心圆|空心圆|什么都没有
表格标签:
<tr></tr> 行
<th></th> 表头 就是 行里面的文字 加粗 居中显示
<td></td> 单元格 列 (一般所有列的数目相等)
<table> // 三行两列
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table中属性>
table中属性
border="1" 边框
cellspacing="0" 设置边框中间的空白是0
width="400px" 宽度 px可以省略
height="200px" 高度
表格合并 <td> 中的属性
colspan="3" // 水平合并3个单元格 合并3个列 有这个属性就少写2个列
<td colspan="2">单元格</td> // 此单元格 占两个位置
<td>单元格</td> // 一共3个列
rowspan="2" // 垂直合并2个单元格 合并以坐上为基准 其他删除
Form表单
<form action="" method="get"></form> // 表单容器
action="https://www.baidu.com" // 必须有 请求给到后端服务器
method="get|post" // 必须有 请求的方式 get提交的数据url可以看到,post看不到 默认是get
<form action="https://www.baidu.com" method="get|post" name="myform">
<input> // 输入框 默认type是 text类型
<input type='text'> // 文本输入框 type是表单类型
<input type="submit"> // 提交按钮
用户名:<input type="text" name="username"> // 文本输入框 那么值是标记 用于调用
密码:<input type="password" name="pwd"> // 密码输入框
</form>
<input> 单标签 用于 form表单里面
<input type="text" name="username">
name="username" // 用于用户名或密码必须有 名字 用于后面调用 样式等
type='text|password|submit' // 必须有 类型 定义 <input>标签的类型
text 文本输入框
password 密码输入框
submit 提交按钮
value="登录" // 更改 提交按钮的 文本 把提交改成登录. 配合submit使用
块元素 换行 独占一行(自上而下垂直排列) 可以设置 width height 属性 一般块元素可以包含行元素和其他块级元素
<div></div>
<form action=""></form>
<h1></h1>
<hr>
<p></p>
<table></table>
<ol></ol>
<ul></ul>
内联元素(行内元素) 不换行 行元素会不占页面中的一行, 只占自身的大小,可以设置width.
不能设置height 一般内联元素包含内联元素,不包含
<a href="#"></a>
<b></b>
<em></em>
<i></i>
<span></span>
<strong></strong>
行内块级元素 不换行 能够识别宽高
<button></button>
<img src="" alt="">
<input type="text">
容器标签
<div> 容器 结构标签 本身没有任何效果 可以理解为 没有边的方框
视频 video
<video src="1.mp4"></video>
controls="controls" // 播放控件 如果 属性 = 属性值 可把属性值省略 如下
<video src="./video/1.mp4" controls width="200px"></video>
音频 audio
<audio src="" controls></audio> // 用法跟video 一样
div 盒子模型
<div></div>
盒子模型组成:
content: 内容区域
padding: 内边距区域
border: 边框区域
margin: 外边框区域 不属于 盒子模型里面的 外边距
div 中 CSS的样式
div{
width: 200px; // 盒子的宽 定义了内容区域的宽
height: 200px; // 盒子的高 定义了内容区域的高
box-sizing: border-box; // 边界 如果有此代码 上面定义的宽高是 整个盒子的大小 前三区域的
background-color: #33cfeb; // 盒子的背景色 便于观察而已 前三区域的
padding: 20px 20px 20px 20px; // 内边距大小 分别是 上 右 下 左 的距离 如果都相同 可只写一个 padding: 20px;
border: 10px solid red; // 边框大小 solid red 线条的颜色
margin: 30px 30px 30px 30px; // 外边距大小 不属于盒子内部的大小 也是上右下左的顺序 如果指定一个值是 上右下左
margin: 0 auto; // 如果指定三个值是 上 右 下 如果指定两个值是 上下 和 左右 .
} // 此设置是居中 上下是0 左右自动设置 自动就是居中
CSS样式:
行内样式: 写在标签的style属性中
内嵌样式: 写在style标签中(可以写在 页面的任何位置,但通常约定写在head标签中)
外联样式: 写在一个单独的.CSS文件中(需要通过link 标签在网页中引入)
style 是 css 的样式 行内样式和内嵌样式
选择器
<h1 id="idname" class="cls">set id CSS<h1/>
元素选择器
h1 { ... }
id选择器 根据id的属性 设置 id是唯一值
#idname { ... }
类选择器 根据class属性 设置 class 可以重复
.cls { ... }
优先级: id > 类 > 元素
属性
color: 颜色的三种表示方法
color: hotpink;
color: rgb(155, 0, 155);
color: #2235ff
font-size: 24px;
text-decoration-line
a {text-decoration-line: none;} // 定义 超链接 没有下划线
JavaScript // 用于和 后端 交互
<script></script> // 在html页面的任意地方 放置任意数量的<script> 一般会放在<body>底部
<script> // 第一种 内部脚本 直接写 js 代码
alert('hello js'); // 代码结尾以 ; 结尾 但是可以省略 不建议省略
</script>
<script src="./js/demo.js"></script> // 第二种 外部脚本 同css一样 在文件中不用写<script></script>
注释: // 和 /* ... */
{ ... } 代码块 作用域
输出语句
window.alert("aaaaaa"); // 提示框
alert("aaaaaa"); // 上面的 window 可以省略
document.write("bbbbbb"); // 输出到 html 页面
console.log("ccccccc"); // 输出到 控制台 控制台在 F12的console页面
变量的定义
var 定义一个全局变量 可重复声明 即使在 代码块中{ }声明变量 在外面也可调用
var a = 10; // var 是定义一个全局变量 并赋值 10
a = "张三"; // JS是弱类型语言 变量可存储不同类型的值
var a = 100; // 可以重复声明
let 定义一个局部变量 只在代码块中有效 不可以重复声明
let b = 10;
alert(b);
const 定义一个常量 不可以改变
const c = 200;
alert("c=" + c);
数据类型
number: // 数字 可直接 定义
string: // 字符串 使用 单引号或 双引号定义的 是字符串
boolean: // 布尔 true false
null: // 对象为空 会返回 object 类型
undefined: // 当声明的变量未初始化时, 该变量的默认值是undefined
typeof 变量 // 可以获取变量值的类型
var a = 10;
alert(typeof a); // 获取到类型 输出
运算符 // 同java一样
算术运算符: + - * / % ++ --
赋值运算符: = += -= *= /= %=
比较运算符: > < >= != == === // == 会进行类型转换 ===不会进行类型转换
逻辑运算符: && || !
三元运算符: 条件表达式?true_value:false_value
类型转换
字符串转数字 parseInt
1. 如果是纯数字的字符串 会转换成 数字
2. 如果开头是数字 中间有字母 只会转换前面的数字
3. 如果开头是字母 结果为 NaN
parseInt("100") // 将 string 转换成 number
parseInt("12a45"); // 结果为 12 会从头匹配 遇到字母 取之前匹配的值
parseInt("a45"); // 结果为 NaN 不是一个字母 not a number
var a = '1231456';
alert("a=" + typeof(a));
a = parseInt(a);
alert("a=" + typeof(a));
其他类型转换为boolean
1. number: 0和NaN 为false 其他均为 true
2. string: 空字符串为false 其他均为 true
3. null 和 undefined: 为 false
流程控制
if(0){} // 这里会把 0 转换成 boolean 类型
if(null){}
switch
for
while
do ... while
函数
定义函数:
1. 定义函数 不需要 指明 参数类型 使用 function 定义函数
2. 不需要指明 方法返回值 有返回值 直接return就可以
方式一:
function 函数名(参数1,参数2){}
方式二:
var fname = function (参数1,参数2){} // 相当于 使用 变量 去接收函数
调用函数:
函数名(实际参数列表)
方式一:
function add(a,b){
return a + b;
}
var result = add(10,20);
alert(result);
方式二:
var fname = function(c,d){
return c - d;
}
var result2 = fname(50,33,40,50); // 传参的时候可以传递多个，但是只有前两个能接收，其他忽略
alert(result2);
箭头函数: 当函数作为参数的时候 可以简写 函数
(...) => {...} // function(...){...} function可以省略
JS对象
基础对象
1. Array 数组对象
定义数组对象
方式一: var 变量名 = new Array(元素列表);
# var arr = new Array(1,2,3,4);
方式二: var 变量名 = [元素列表];
# var arr = [1,2,3,4];
调用数组
arr[索引]=值;
# arr[10] = "hello";
# var arr = new Array(1,3,5,7);
# alert("第二个元素是：" + arr[1]);
# alert(arr[9]); // 未被赋值的变量的值是 undefined
# arr[10] = 15; // 没有10号索引 也可以赋值 不会报错
# alert(arr[10]);
属性
length: 获取数组的长度
for循环遍历数组 遍历数组的所有元素 包括没有值的元素 和 forEach 方法有所区别
# var arr= [2,4,6,8,9];
# for (let i = 0; i < arr.length; i++) {
# alert(arr[i]);
# }
方法:
forEach(函数) 遍历数组中的每个有值的元素,并调用一次传入的函数.
# var arr= [2,4,6,8,9];
# arr.forEach(function(e) {
# console.log(e);
# })
push() 将新元素添加到数组的末尾,并返回新的长度.
# var arr= [2,4,6,8,9];
# arr.push(7,8,9);
# console.log(arr);
splice(2,2) 从数组中删除元素. 从第2号索引开始删除 删除2个元素
# var arr= [2,4,6,8,9];
# arr.splice(2,2);
# console.log(arr);
2. String 字符串对象
定义数字符串对象
方式一: var 变量名 = new String("变量值");
# var s = new String("哈哈");
方式二: var 变量名 = "变量值";
# var s = "嘎嘎";
属性:
length: 获取字符串的长度
# var s ="aaaa";
# console.log(s.length);
方法:
charAt(num.) 返回指定位置的字符
indexOf(string) 检索字符串位置 查找字符 在字符串中的位置
# var s ="abcdefg";
# console.log(s.length);
# console.log(s.charAt(2));
# console.log(s.indexOf("c"));
trim() 去除字符串两边的空格 返回一个新字符串
# var s1 = " 爆米花呀真好吃！ "
# var ss = s1.trim();
# console.log(s1);
# console.log(ss);
substring(start,end) 字符串截取 开始索引和结束索引 函头不含尾 空格也算
# var s1 = " 爆花米呀真好吃！ "
# var s2 = s1.substring(3,6);
# console.log(s2);
自定义对象
var 对象名 = {
属性名1: 属性值,
属性名2: 属性值，
属性名3: 属性值，
函数名称: functio(参数){},
}
# var user = {
# name: "tom",
# age: 10,
# eat: function(){
# alert("吃");
# },
# play(){ // 函数的 简写方法
# alert("玩");
# }, // 最后一个逗号可省略 最好加上
# }
# alert(user.name);
# user.eat();
3. JSON 对象 与自定义对象大致相同 都是"key": "value", 成对查询 但是需要所有的key都引号
以逗号,结尾 在最后一个值的时候 不加 逗号,
在定于数组中最后一个值 不加逗号,
{
"key1": "value1",
"key2": "value2",
"key3": "value3"
}
JSON 中的 value值 的数据类型 及 书写方式
数字(整数或浮点数) 直接写
字符串 双引号中 "janice"
逻辑值 直接写 true false
数组 方括号中 值加引号 最后一个值不加逗号, ["北京","上海","广州"]
对象 花括号中
null
手
JSON方法 将 json对象 转换成 js的对象
JSON.parse(json);
# var jsonstr1 = '{"name":"janice","age":"22"}';
# var jsonstr2 ='{"name":"Teo","age":"18","addr":["北京","上海","广州"]}';
# var j = JSON.parse(jsonstr1);
# console.log(j.name);
# var jsonstr3 = JSON.stringify(j);
# console.log(jsonstr3);
BOM对象 浏览器对象模型
1. Window 可直接使用 window. 调用
属性
history
location
navigator
方法
alent() 弹出 消息框 警告框
confirm() 弹出 确认框 带有确定和取消按钮 返回一个 boolean值
# window.alert("Hello bom");
# var flag = window.confirm("您确认删除改记录吗?");
# window.alert(flag);
setInterval(Function,Number) 定时器 重复调用函数 参数分别是 函数 和 毫秒数
setTimeout(Function,Number) 定时器 调用函数一次
# var i = 0;
# function f(){
# i++;
# console.log("执行第" + i + "次");
# };
# window.setInterval(f,2000);
# window.setTimeout(f,5000);
2. Locaton 地址栏对象
属性
href 获取浏览器的地址
# var i = location.href; // 获取浏览器地址
# alert(i);
# location.href = "https://www.baidu.com"; // 可实现跳转
3. Navigator 浏览器对象
4. Screen 屏幕对象
5. History 历史记录对象 上一步 下一步
DOM 文档对象 把整个 html 的 每一个部分 封装成了对象 通过对象来改变 数据
Document: 整个文档对象
document.getElementById('id') 根据 id 属性 获取 返回一个Element 对象
document.getElementsByTagName('标签') 根据 标签 获取 返回一个数组
document.getElementsByName('name') 根据 name 属性 获取 返回一个数组
document.getElementsByClassName('class') 根据 class 属性 获取 返回一个数组
# <img id="img1" src="./img/news_logo.png">
# <div class="food">爆米花</div>
# <div class="food">大米粥</div>
# <input type="checkbox" name="hobby">旅游
# <input type="checkbox" name="hobby">学习
# <input type="checkbox" name="hobby">英语#
# var j = document.getElementById('img1');
# alert(j);
# var arr1 = document.getElementsByTagName('div');
# for (let i = 0; i < arr1.length; i++) {
# alert(arr1[i]);
# }
# var arr2 = document.getElementsByName('hobby');
# for (let i = 0; i < arr2.length; i++) {
alert(arr2);
# }
# var arr3 = document.getElementsByClassName('food');
# for (let i = 0; i < arr3.length; i++) {
# alert(arr3[i]);
# }
# var v1 = arr1[1]; 取出数组的数据 类型为 Element对象
# v1.innerHTML = "火龙果呀真好吃"; 调用 innerHTML 设置或返回元素的内容。
查询 标签封装成对应属性的方法
Browser Side --> 参考书 --> HTML对象 --> <div> --> Div 对象支持标准属性和事件 --> 属性 --> innerHTML
Browser Side --> 参考书 --> HTML对象 --> Image 对象属性
给 img 换图片 div追加字 input 勾选复选框
# <img src="./img/1.png">
# <div>爆米花</div>
# <div>大米粥</div>
# <div>棉花糖</div>
# <div>火龙果</div>
# <input type="checkbox" name="hobby">睡觉
# <input type="checkbox" name="hobby">学习
# <input type="checkbox" name="hobby">发呆
# var arr1 = document.getElementById('img1');
# arr1.src = './img/2.png';
# var arr2 = document.getElementsByTagName('div');
# for (let i = 0; i < arr2.length; i++) {
# const e = arr2[i];
# e.innerHTML += "<font color='red'>呀真好吃</font>"; //<font> 可给字体加红色
# }
# var arr3 = document.getElementsByName('hobby');
# for (let i = 0; i < arr3.length; i++) {
# const e = arr3[i];
# e.checked = true;
# }
Element: 元素对象
Attribute: 属性对象
Text: 文本对象
Comment: 注释对象
JS事件绑定
两种单机绑定方式
1. 在标签内 添加 onclick 属性 , 属性值是调用函数 对应函数在 JS中给出即可
2. 直接在JS中 根据id绑定到标签 element对象调用 onclick 属性, 此属性值是 函数
# <input type="button" value="不要点我呀！！" onclick="on()">
# <input type="button" value="点我呀！！" id = "click_me">
# function on() {
# alert("不要点我呀 ...");
# }
# var cl = document.getElementById('click_me');
# cl.onclick = function(){
# alert("使劲点呀 ... ")
# }
常用事件
onclick 鼠标单机事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移动到某元素之上
onmouseout 鼠标从某元素移开
..................................................................................................................
VUE
vue2 官网: https://v2.cn.vuejs.org/v2/guide/
两种方式 引入 vue
1. 使用 脚手架
2. 使用 <script> 引入
在官网 https://v2.cn.vuejs.org/v2/guide/ --> 下载 vue.js 的开发版本
参考下面的 根据入门程序中的引入
安装 谷歌浏览器的开发者共计 Devtools 工具
可以在 此网站 下载 https://chrome.zzzmh.cn/ --> Devtools
谷歌浏览器 --> 扩展程序 --> 管理扩展程序 --> 开发者模式 --> 把下载好的拖入即可 --> 打开 开关
关于 首次 打开 浏览器 --> 控制台的 两个提示
1. 提示 安装 Devtools 工具 . 安装上面的步骤安装上就会消失.
2. 提示 不要在成产环境中使用 开发版本. 可以在 Vue.config 配置文件中 改变 productionTip:false 即可
设置为false以阻止vue在启动时生成生产提示。 // 我用没生效 我也不知道为什么
<body>
<script type="text/javascript" >
Vue.config.productionTip = false
</script>
</body>
VUE 入门程序
<head>
<script src="js/vue.js"></script> // 使用 <script> 引入
</head> // 引入后 在浏览器的控制台中 键入 Vue 可以看到函数
<div id="app">
<input type="text" v-model="message"> // v-model 为 vue中的 指令
{{message}}
</div>
<script>
new Vue({ // 创建个 vue 对象
el: "#app", // el 是 element 简写 意思是 元素 相当于css的 id选择器 把 id是app的标签交到 vue代管
data: {
message: "hello vue"
}
})
</script>
指令
v-bind 可简化为: 省略v-bing 为HTML标签绑定属性值，如设置href css 样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件 click为单机事件
<script src="js/vue.js"></script>
<div id="app">
<a v-bind:href="url">最牛逼的网站！！！！</a> // url 相当于 变量
<a :href="url">最牛逼的网站！！！！</a> // v-bind 可以省略
<input type="text" v-model="url"> // 双向数据绑定 会获取 下面的 url的值 如果这个值改变了 其他值也会跟着改变
<input type="button" value="点我点我！！" v-on:click="handle()">
<input type="button" value="点我点我啊！！" @click="handle()"> // v-on 的缩写
</div>
<script>
new Vue({
el: "#app",
data: { // 数据模型中 声明 变量值的地方
url: "https://www.syk.my" // 定义 url 的值
},
methods: { // 声明方法的地方 与变量值的地方同级别
handle: function(){ // handle 方法
alert("讨厌... 你点我了一下...");
}
}
})
</script>
v-if
v-else-if 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else
v-show 根据条件展示某元素，区别在于切换的是display属性的值
<script src="js/vue.js"></script>
<div id="app">
<input type="text" v-model="age">
<span v-if="age <= 40">年轻人</span>
<span v-else-if="age > 40 && age < 60 ">中年人</span>
<span v-else>老年人</span>
<br><br>
<input type="text" v-model="age">
<span v-show="age <= 40">年轻人</span> // v-show的使用
<span v-show="age > 40 && age < 60 ">中年人</span>
<span v-show="age > 60">老年人</span>
</div>
<script>
new Vue({
el: "#app",
data: {
age: 75,
},
})
</script>
v-for 列表渲染，遍历容器的元素或者对象的属性
<script src="js/vue.js"></script>
<div id="app">
<div v-for="addr in addrs">{{addr}}</div>
</div> // 第一个addr 是 变量 名字随便起 in 是关键字固定 addrs是数组的名字
<script>
new Vue({
el: "#app",
data: {
addrs:["北京", "上海", "西安", "成都", "深圳"]
},
})
</script>
vue 的生命周期 vue从创建到 销毁的 都会执行对应的方法
| 状态 | 阶段周期 |
| ------------- | -------- |
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
mounted 方法
Ajax 是 异步请求 早期的技术
Axios 封装了 Ajax 简化了Ajax操作
使用 Axios 发送 get 和 post 请求
<script src="js/axios-0.18.0.js"></script>
<input type="button" value="get" onclick="get()">
<input type="button" value="post" onclick="post()">
<script>
function get(){
axios({
method: "get",
url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list"
}).then(result => {
console.log(result.data);
})
}
function post(){
axios({
method: "post",
url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
data: "id=1"
}).then(result => {
console.log(result.data);
})
}
</script>
使用 axios的 get 和 post方法 简化 代码
<script>
function get(){
axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {
console.log(result.data);
})
}
function post(){
axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then(result => {
console.log(result.data);
})
}
</script>
Vue 项目 创建
# node -v // 需要安装node 环境
# npm config get prefix // 获取 nodejs 安装目录
# npm install -g @vue/cli // 安装vue 脚手架 功能
# set-ExecutionPolicy RemoteSigned // 修改 power shell 权限
# vue --version
# vue create vue-project // 第一种 命令行 创建vue项目
# vue ui // 第二种 图形化界面 创建vue项目
.vue 文件 组成
<template> 模板部分 由它生成HTML代码
</template>
<script> JS 代码 控制模板的数据来源和行为
</script>
<style> CSS样式部分
</style>
public/index.html 入口文件 在这里定义了div id="app" 引入main.js
src/main.js 入口文件 在此文件中 引入 App.vue 组件 代码由 vue 接管
src/App.vue 入口文件
安装 Vue element
https://element.eleme.cn/#/zh-CN/component/installation // 官网
# npm install element-ui@2.15.3 // 在项目根目录下安装
# vim src/main.js // 引入 element 组件 官网-->快速上手 有此代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
# mkdir -p src/views/element
# vim src/views/element/ElementView.vue // 写入基本内容
<template>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
</template>
<script>
export default {
}
</script>
# vim src\App.vue
<template>
<div>
<element-view></element-view>
</div>
</template>
<script>
export default { // 声明出口 只有在这 export 才能在其他地方 import 导入
}
</script>
<style>
</style>
注:
api接口管理网址 https://apifox.com/
修改 power shell 权限
# set-ExecutionPolicy RemoteSigned
# set-ExecutionPolicy Default
......................................................................................................................
https://v2.cn.vuejs.org/
引包:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> // 开发环境 包括一些注释 警告
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script> // 生成环境 去掉了注释 警告
插值表达式{{ }}
插值表达式是一种Vue的模板语法
1.作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2.语法：{{ 化表达式 }}
(1)使用的数据必须存在（data)
(2)支持的是表达式，而非语句，比如：if for.…
(3)不能在标签属性中使用{{ }}插值
<div id="app">
<p>{{nickname }}</p>
<p>{{nickname.touppercase()}}</p>
<p>{nickname+'你好'}</p>
<p>{age>=18?'成年'：'未成年'}</p>
<p>{{friend.name }}</p>
<p>{{friend.desc }}</p>
</div>
const app new Vue({
el:'#app',
data:{ // data 提供数据 变量:值
nickname:'tony',
age:18,
friend: {
name:'jepson',
desc:'热爱学习Vue'
}
},
methods: { // methods 提供方法
}
}
)}
谷歌浏览器安装 插件Vue Devtools
极简插件：https://chrome.zzzmh.cn/ --> Vue Devtools --> 下载 --> 开发者模式 --> 拖拽安装 --> 插件详情允许访问文件
vue 指令
v - 前缀的特殊 标签属性
v-html : 将这个元素的内容解析为 HTML 而不是纯文本
如果你有一个包含 HTML 标签的字符串，你可以使用 v-html 将其渲染为真实的 HTML，而不是简单的文本。
作用：设置元素的innerHTML
语法：V-html="表达式"
v-show
1.作用：控制元素显示隐藏
2.语法：v-show="表达式"表达式值true显示，false隐藏
3.原理：切换display:none控制显示隐藏
4.场景：频繁切换显示隐藏的场景
v-if
1.作用：控制元素显示隐藏 (条件渲染)
2.语法：V-f="表达式”表达式值true显示，false隐藏
3.原理：基于条件判断，是否创建或移除元素节点 根据判断条件控制元素的创建和移除(条件渲染)
4.场景：要么显示，要么隐藏，不频繁切换的场景
v-else
v-else-if
1.作用：辅助V-f进行判断渲染
2.语法：v-else
v-else-if="表达式'
3.注意：需要紧挨着v-f一起使用
v-on
1.作用：
注册事件
添加监听+
提供处理逻辑
2.语法：
v-on:事件名="内联语句"
v-on:事件名="methods中的函数名"
v-on:click 单机事件
@click 可以省略 v-on:
v-on:mouseenter 鼠标划入事件
<button v-on:click="count++">按钮</button>
@c1ick="fn(参数1，参数2)"
fn (a,b){}
<body>
<div id="app2">
<button @click="fn">切换显示隐藏</button>
<h1 v-show="isShow">黑马程序员</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue
<script>
const app2 new Vue({ // 可理解为 创建个vue的对象 app2 ,
el:'#app2', // 管控的 <div>模块 对应 上面的 id="app2"
data:
isShow:true // 变量:值
},
methods:
fn (){
app2.isshow = !app2.isshow
//让提供的所有methods中的函数，this都指向当前实例 当前为 app2
this.isshow = !this.isshow
}
})
</script>
</body>
v-bind
1. 作用：动态的设置html的标签属性 src url title
2. 语法：v-bind:属性名="表达式”
3. 注意：简写形式 :属性名="表达式”
v-bind:src="imgUrl" 绑定属性. 把 src的属性.绑定 imagUrl变量上. 下面必须有变量的赋值
可简写 :src="imgUrl"
<body>
<div id="app">
<img v-bind:src="imgUrl" v-bind:title="msg alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app new Vue({
el:'#app',
data:
imgUr1:'./imgs/10-02.png',
msg:'hello波仔'
})
</script>
</body>
按钮点击 上一页 下一页 切换图片
<body>
<div id="app">
<button @click="index-">上一页</button>
<div>
<img v-show="index > 0" src="list[index]" alt="">
</div>
<button v-show="index list.length - 1" @click="index+">下一页</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app new Vue({
el:'#app',
data: {
index:0,
list: [ // list: [ ] 数组
'./imgs/11-00.gif',
'./imgs/11-01.gif',
./imgs/11-02.gif',
"./imgs/11-03.gif',
./imgs/11-04.png',
./imgs/11-05.png',
]
}
})
</script>
</body>
v-for
1.作用：基于数据循环，多次渲染整个元素 → 数组、对象、数字.…
2.遍历数组语法：
v-for="(item,index) in 数组"
v-for="(item) in 数组" // 如果index用不上 可以 只写一个参数
v-for="item in 数组" // 如果只有一项 () 也可省略掉
item 是对象 表示 每一项
index 下标
<p v-for="...">我是一个内容</p>
<div id="app">
<h3>小黑水果店</h3>
<u1>
<li v-for="(item,index)in list"> // 在下面需要定义 list 数组
{{ item }} - {{ index }}
</1i>
</u1>
</div>
data: {
1ist:['西瓜','苹果','鸭梨','榴莲']
}
3.
v-for中的key
key作用： 给元素添加的唯一标识，便于Vu进行列表项的正确排序复用。
注意点：
1.key的值只能是字符串或数字类型
2.key的值必须具有唯一性
3.推荐使用id作为key(唯一)，不推荐使用index作为key（会变化，不对应)
实现删除 功能
<div id="app">
<h3>小黑的书架</h3>
<u1>
<li v-for="(item,index)in booksList" key="item.id"> // v-for中的key
<span>{{item.name }}</span>
<span>{{item.author }}</span>
<!-~注册点击事件→通过d进行删除数组中的对应项-->
<button @click="del(item.id)"></button>
</1i>
</u1>
</div>
data:
booksList: [
{id:1,name:'《红楼梦》',author:'曹雪芹'}，
{id:2,name:'《西游记》',author:'吴承恩'}，
{id:3,name:'《水浒传》',author:'施耐庵'}，
{id:4,name:'《三国演义》',author:'罗贯中'}
]
methods:{
del (id){
this.booksList.filter(item => item.id !== id) // 传过来的id 不等于 item 的id 则保留
// this.booksList = this.booksList.filter(item = item.id !== id) // 把得到的数组赋值给原数组
}
filter:根据条件，保留满足条件的对应项，得到一个新数组。 不会改变原来的数组
this.list.filter(item = item.id !=id)
v-model:
1.作用：给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容
数据变化→视图自动更新
视图变化→数据自动更新
2.语法：V-mode='变量'
用户名 密码 登录 重置 框
<div id="app">
<!-
v-model可以让数据和视图，形成双向数据绑定
(1)数据变化，视图自动更新
(2)视图变化，数据自动更新
可以快速[获取]或[设置]表单元素的内容
账户：<input type="text"v-model="username'"><br><br>
密码：<input type="password"v-model-="password"><br><br>
<button@click="1ogin">登录</button>
<button@click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></sc
<script>
const app new Vue({
el:'#app',
data:
username
password:
},
methods:
login ()
console.log(this.username,this.password)
reset(){
}
综合 案例 小黑记事本
功能需求：
列表渲染
删除功能
添加功能
底部统计和清空
思维导图 制作
chat 生成一个 PlantUML
https://app.diagrams.net/?src=about --> +号 --> 高级 --> PlantUML