first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,134 @@
<html>
<head>
<meta charset="UTF-8" />
<title>我的第一个网页</title>
</head>
<body>
<a href="https://blog.csdn.net/qq_16559905/article/details/51182085" target="_blank"> 变得很低很低和 </a>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<div>
段落标签<i>标签</i>标签段落标签段落标签段落标签段落标签段落标签段落标签
</div>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<div>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</div>
<div>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</div>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法加载" />
<ul>
<li>
无序列表1
<ul>
<li>无序列表1-1</li>
<li>无序列表1-2</li>
<li>无序列表1-3</li>
</ul>
</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<input type="text">
<input type="number">
<input type="password">
<input type="password">
<input type="file">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="radio" name="li">
<input type="radio" name="li">
<input type="radio" name="li2">
<input type="radio" name="li2">
<input type="hidden" name="dd">
<input type="button" value="登录" >
<input type="reset" value="登录">
<input type="submit" value="登录">
<br><br><br>
<form action="http://192.168.1.131/" method="post">
<input type="number" value="11111" placeholder="输入手机号" name="phone" readonly>
<input type="password" placeholder="输入密码" maxlength="5" name="pwd">
<input type="reset" value="清除">
<input type="submit" value="提交" disabled>
</form>
<video loop poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" src="https://www.runoob.com/try/demo_source/movie.mp4" controls >
</video>
<audio src=""></audio>
<select name="" id="">
<option value="">请选择</option>
<option value="10003">合肥</option>
<option value="10001">南京</option>
<option value="10002">北京</option>
</select>
<div>
HTML的 <strong>全称</strong> 为超文 <em>本标记</em> 语言,是 <i>一种标</i> 记语言。它 <big>包括一</big> 系列标签.通过这些标签可 <small>以将网</small> 络上的文 <sub>档格式</sub> 统一,使分散的 <sup>Internet资源</sup> 连接为 <del>一个逻辑</del> 整体。HTML文本是由HTML命令组成的描述性文本HTML命令可以说明文字图形、动画、声音、表格、链接等。超..
</div>
<table>
<tr>
<th>年份</th>
<th>月份</th>
</tr>
<tr>
<td>1990</td>
<td>10</td>
</tr>
<tr>
<td>2001</td>
<td>11</td>
</tr>
</table>
<textarea placeholder="sdwdw" name=""></textarea>
</body>
</html>

View File

@@ -0,0 +1,51 @@
<!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>Document</title>
</head>
<body>
<div class="nav">
<div class="logo">
<img src="" alt="">
<input type="text">
</div>
<div class="menu">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="active">
<div class="left">
<div>
<i></i>
<img src="https://himg.bdimg.com/sys/portraitn/item/public.1.3c72d8d4.97PFsTVGYI7y8QTDsCfPHA" alt="">
<span>全部教程</span>
</div>
<ul>
<li>
<a href="">1111</a>
</li>
</ul>
</div>
<div class="right">
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

View File

@@ -0,0 +1,164 @@
git: 团队项目管理工具
仓库(代码)
本地仓库
远程仓库
网上免费的 github gitee coding gitlab
分支模型
开发dev 测试(test) 发布(build)
代码拉取(下载)到本地
代码提交步骤
1点击源代码管理
2点击更改 上的 + 加号 所有文件都要被上传的意思
3在输入框中输入备注然后 ctrl + enter
4点击 三个 小点,,先点击拉取,然后点击推送 (表示把本地代码上传到服务器)
web开发
前端开发 PC网站手机网站app开发桌面windowsmacoslinux开发, 后端开发)
入门简单,时间短 要学的知识非常非常多
后端开发 javaphppythongo
入门难点,时间长 要学的知识稍微少,但是需要深度
全栈开发
开发模式
1后端渲染
2前后端分离
app开发
安卓开发
苹果开发
桌面开发
c#
java
技术团队
技术总监
前端开发
后端开发
产品经理(项目经理【技术型,产品型】)
UI设计师
前端开发:
html超文本标签标记语言 人体的骨骼 用来布局,划分网页的结构
css层叠样式表 化妆品
javascriptjs人的思想
html
标签
<标签字母 开始标签> </标签字母 结束标签>
</>
标签的分类
块级标签:独占一行,可以设置宽高
pdivh1 ~ h6
行内标签:不会独占一行,不可以设置宽高
span,img
标签字母:
html
head
title 设置标签卡的标题文字
meta 元数据标签 工具箱
https://blog.csdn.net/qq_16559905/article/details/51182085
body
a 超链接 实现跳转
h1 ~ h6 数字越大显示效果越小 标题
p 段落
img 图片
实现重复性布局的
ul 无序列表
ol 有序列表
input 输入
type
form: 表单标签
br: 换行
div 是用来布局网站结构的
method 类型:
GET
怎么传数据给后端:
地址栏传参,会把参数 通过 ?key(名字)=value(数值)&key(名字)=value(数值)
http://192.168.1.131/?phone=12343454&pwd=111111111&dddd=2222
POST
PUT
DELETE
请求体里面的

View File

@@ -0,0 +1,65 @@
<!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>Document</title>
<style>
.box_1 {
width: 200px;
height: 200px;
background: red;
/* margin: 10px; 上右下左*/
/* margin: 10px 20px; 上下 左右*/
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 10px 20px 30px 40px; */
/* margin-left: 30px;
padding: 10px;
margin-bottom: 30px; */
/* border: 10px solid blue; */
/* border-left: 10px solid blue; */
float: left;
}
.box_2 {
width: 200px;
height: 200px;
background: blue;
float: left;
}
.hahah {
width: 100px;
height: 100px;
background: black;
}
span {
border-right: 1px solid #f5f5f5;
}
</style>
</head>
<body>
<div class="main">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
<div class="hahah"></div>
<!-- <span>测试</span> -->
<!-- 留坑:块和行相互转换 -->
</body>
</html>

View File

@@ -0,0 +1,48 @@
/* .one, h2 {
color: red;
}
.main h1 {
color: lawngreen;
}
.main a span {
color: blueviolet;
} */
h2 {
color: greenyellow !important;
}
.mouse:hover {
color: red;
font-size: 30px;
}
.name:focus {
width: 200px;
}
ul li {
color: red;
}
/* ul li:nth-child(2n) {
color: black;
} */
ul li:first-child {
color: black;
}
ul li:last-child {
color: black;
}
.insert::before {
content: "—— ";
}
.insert::after {
content: " ——";
}

View File

@@ -0,0 +1,57 @@
<!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>css 学习</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p class="one">测试1</p>
<p class="two">测试2</p>
<h2>标题2</h2>
<h1>标题1-1</h1>
<div class="main">
<span>span11</span>
<h1>标题1-2
<a href="">
<span>span</span>
</a>
</h1>
</div>
<div class="mouse">测试鼠标放上</div>
<input type="text" class="name">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div class="insert">哈哈哈哈哈</div>
</body>
</html>

View File

@@ -0,0 +1,125 @@
css
三种写法
内联
内部
外链
语法:
css属性名称: css属性数值;
选择器:
class . 选择器 class="test" .test
id选择器 # id="test" #test
区别:
1: id选择器的优先级高于class选择器
2id选择器是用来标识唯一性的一般不会去重复使用
* (通配符)选择器 选中所有的标签,来设置你的样式
标签 选择器
选择器类型, 选择器类型, 选择器类型, ..... {
css属性名称: css属性数值;
}
伪类选择器
父 选择器类型 子 选择器类型 : 表示父子嵌套
选择器类型, 选择器类型 :同时选中多个
../ 表示当前文件夹的上一层
./ 表示当前文件夹
/ 表示根路径
css属性记录
!important 提升css属性的优先级
nth-child ():
使用公式an+ b.描述a代表一个循环的大小
N是一个计数器从0开始以及b是偏移量。
盒子模型:
外边距 margin
内边距 padding
边框 border
内容 content
真实高度的计算规则:
真实高度 = 你写的宽高 + 边距 + 边框
box-sizing: border-box; 改变盒子模式的计算规则
把块元素放一行:
1display: block;
block 块
inline 行
inline-block 行内块级
2浮动 float
left
right
问题:元素设置浮动后,将从文档流中脱离,他原本位置被删除,会导致父元素没有高度,
那么紧接着在父元素后面的内容,就会挤过去。
解决:
clear: both; 加在 父元素后面的内容
overflow: hidden; 加载 父元素上,自动设置高度
height 手动设置高度
line-height: 行高 只针对块标签
设置文本段落的垂直行高
设置当行文本的垂直居中
居中的各种方式
1一个具有宽度块标签想在另外一个元素内部居中
margin: 0 auto;
2单行文本的居中line-height数值应该是你想要居中的父元素的高度
3: 被定位的元素如何设置垂直水平居中?
移动50%,然后 margin 减去自身宽度或者高度的一半
top: 50%;
margin-top: calc(-12px / 2);
选择一个,一般都是下面的
transform: translateY(-50%);
4: 元素内部的文字水平居中可以使用text-align: center;
5: 设置两个行内标签的对齐,选中高的元素 设置 vertical-align

View File

@@ -0,0 +1,78 @@
<!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>定位</title>
<style>
body {
margin: 0;
}
.main {
margin-left: 30px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 30px;
top: 40px;
}
.box_2 {
background: green;
position: relative;
left: 10px;
top: 20px;
}
.box_2_1 {
width: 100px;
height: 100px;
background: palevioletred;
position: absolute;
left: 20px;
top: 20px;
}
.box_3 {
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
.box_4 {
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box_1 box"></div>
<div class="box_2 box">
<div class="box_2_1"></div>
</div>
<div class="box_3 box"></div>
<div class="box_4 box"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,45 @@
border-radius 设置圆角
zoom 实现对元素的缩放一般用于字体font-size 小于12px的情况
border 粗细 线条类型 线条颜色
border: 1px solid #eee;
background-attachment: fixed; 背景图的定位
background-repeat 设置背景图是否重复
background-position 设置背景图定位
cursor 修改光标的样式
background-image: linear-gradient(角度, 第一个颜色, 第二个颜色);
定位 position
通过left right top bottom
相对定位 relative
当元素被设置相对定位后,他原本的位置还在,但是他脱离了页面(文档流)
定位参考对象:
它的定位参考对象就是原本的位置
绝对定位 absolute
当元素被设置绝对定位后,他原本的位置不在,但是他脱离了页面(文档流)
定位参考对象:
父元素是否设置过定位
是:定位参考对象就是父元素的位置(当前位置)
否:定位参考对象就是浏览器边框
固定定位 fixed
当元素被设置固定定位后,他原本的位置不在,但是他脱离了页面(文档流)
定位参考对象:
定位参考对象就是浏览器边框
z-index

View File

@@ -0,0 +1,56 @@
<!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>css3 动画</title>
<style>
/* 帧 */
@keyframes test {
/* from {
background: red;
}
to {
background: blue;
width: 300px;
height: 300px;
border-radius: 100%;
} */
0% {
background: red;
}
50% {
background: green;
width: 600px;
height: 600px;
border-radius: 50%;
}
100% {
background: blue;
width: 300px;
height: 300px;
border-radius: 100%;
}
}
.box {
width: 200px;
height: 200px;
background: red;
animation: test 6s ease 1s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,45 @@
<!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>media媒体查询</title>
<style>
body {
margin: 0;
}
.box {
width: 187.5px;
height: 187.5px;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: blue;
}
@media screen and (min-width: 414px) {
.box {
width: 207px;
height: 207px;
}
}
@media screen and (min-width: 0px) and (max-width: 320px) {
.box {
width: 160px;
height: 160px;
}
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,61 @@
<!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>Document</title>
<style>
body,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
.header {
background: red;
height: 45px;
position: fixed;
width: 100%;
top: 0;
}
.footer {
background: blue;
height: 50px;
position: fixed;
width: 100%;
bottom: 0;
}
.content {
height: calc(100vh - 45px - 50px);
margin-top: 45px;
display: flex;
}
.test {
flex: 1;
}
.main {
flex: 5;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="test">dsdw</div>
<div class="main">
<h2>ddd</h2>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,164 @@
<!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>Document</title>
<style>
body,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
background: red;
height: 45px;
}
.footer {
background: blue;
height: 50px;
}
.content {
overflow-y: scroll;
background: yellow;
flex: 1;
}
@media screen and (min-width: 375px) {
body {
width: 375px;
margin: 0 auto;
}
}
.content::-webkit-scrollbar {
width: 0;
height: 0;
background-color: #f5f5f500;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>

View File

@@ -0,0 +1,48 @@
<!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>Document</title>
<style>
body,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
ul {
display: flex;
justify-content: space-around;
height: 40px;
background: red;
align-items: center;
/* flex-wrap: wrap; */
}
li {
/* width: 20%; */
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>社会</li>
<li>财经</li>
<li>军事</li>
<li>科技</li>
<li>体育</li>
<li>娱乐</li>
<li>政治</li>
<li>名生</li>
<li>百科</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!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>rem</title>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<style>
body {
margin: 0;
}
.mian {
display: flex;
flex-wrap: wrap;
}
.box {
width: 1.875rem;
height: 1.875rem;
}
.box_1 {
background: red;
}
.box_2 {
background: blue;
}
</style>
</head>
<body>
<div class="mian">
<div class="box box_1"></div>
<div class="box box_2"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,22 @@
任务:
蔡敏:
1 (33).psd
1 (58).psd
1 (128).psd
计梦梦:
1 (22).psd
1 (64).psd
1 (85).psd
陶瑞:
1 (4).psd
1 (39).psd
1 (102).psd
王安民:
1 (20).psd
1 (53).psd
1 (1).psd

View File

@@ -0,0 +1,43 @@
移动端兼容:
布局兼容
1媒体查询
2flex
尺寸兼容
1100%
2: rem
2 * 50
真实的尺寸 = 你写的rem数值 * html上的基准数值font-size
flex
新布局方式,可以实现更多的多终端兼容效果
13 css属性
display: flex
应用在父元素上 6个
justify-content 设置元素在 X 轴上的对齐方式
flex-wrap 设置元素一行放不下的时候是否换行
align-content 设置元素在 Y 轴上的对齐方式(多行)
align-items 设置元素在 Y 轴上的对齐方式(单行)
flex-direction 设置元素的排列方向注意如果设置了column垂直那么 justify-content 和 align-items
作用相反。
flex-flow: flex-direction flex-wrap
应用在子元素上 6个
order: 设置元素的顺序,数值越小越靠前
flex-basis 设置元素的宽度类似width
align-self
flex-grow 设置元素的放大比例,数值越大,所占空间越大
flex-shrink 设置元素的缩小比例数值0不缩放
flex: none(flex-grow) | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

View File

@@ -0,0 +1,38 @@
<!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>array 数组</title>
</head>
<body>
</body>
<script>
// 数组:通过下标来存储数据
// 定义
// var a = new Array();
// a[0] = "你好0";
// a[1] = "你好1";
// a[2] = "你好2";
// var a = new Array(1,2,3,4,5);
// var a = [1,2,3,4,5,6];
// for (var i = 0; i < a.length; i++) {
// console.log(a[i]);
// }
// a.forEach(function(v, i, arr) {
// console.log(v);
// // console.log(i);
// })
</script>
</html>

View File

@@ -0,0 +1,81 @@
<!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>实现新闻列表</title>
</head>
<body>
<ul class="test">
</ul>
</body>
<script>
// 虚拟dom
// var ul = {
// localName: "ul",
// className: "test",
// children: [
// {
// localName: "li",
// children: [
// {
// localName: "p",
// innerText: "ewfwef"
// }
// ]
// },
// {
// localName: "li",
// children: [
// {
// localName: "h2",
// innerText: "wdqdqw"
// }
// ]
// }
// ]
// }
var news = [
{
title: '新闻1标题',
time: '2020-10-29',
content: "新闻1内容"
},
{
title: '新闻2标题',
time: '2020-10-29',
content: "新闻2内容"
},
{
title: '新闻3标题',
time: '2020-10-29',
content: "新闻3内容"
},
{
title: '新闻4标题',
time: '2020-10-29',
content: "新闻4内容"
}
];
for (var index = 0; index < news.length; index++) {
var li = `<li>
<h2>${news[index].title}</h2>
<span>${news[index].time}</span>
<div>${news[index].content}</div>
</li>`;
document.querySelector("ul").innerHTML += li
}
</script>
</html>

View File

@@ -0,0 +1,40 @@
<!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>事件</title>
</head>
<body>
<button class="loginBut">登录</button>
</body>
<script>
// 事件
// 三要素: 事件源 事件处理类型 事件处理函数
// 三种
// 1
// 2
document.querySelector(".loginBut").onclick = function (event) {
console.log(event);
}
// document.querySelector(".loginBut").onclick = function () {
// alert("用户登录2")
// }
// document.querySelector(".loginBut").onclick = null
// document.querySelector(".loginBut").addEventListener("click", function() {
// alert("用户登录1")
// })
// document.querySelector(".loginBut").addEventListener("click", function() {
// alert("用户登录2")
// })
</script>
</html>

View File

@@ -0,0 +1,39 @@
<!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>Document</title>
<style>
body,html{
margin: 0;
width: 100%;
height: 100%;
}
span {
position: absolute;
}
</style>
</head>
<body>
</body>
<script>
var body = document.querySelector("body");
body.onclick = function (event) {
var x = event.clientX, y = event.clientY;
var span = document.createElement("span");
span.innerText = "哈哈哈";
span.style.left = `${x}px`;
span.style.top = `${y}px`;
console.log(span);
body.appendChild(span)
}
</script>
</html>

View File

@@ -0,0 +1,62 @@
<!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>循环</title>
</head>
<body>
</body>
<script>
// 循环
// for
// while
// for (循环的开始变量;循环的结束条件;循环的自增变量) {
// }
// var result = 0;
// for (var i = 1; i<=100; i++) {
// result+=i
// }
// console.log(result);
// var car = {
// name: {
// name1: 'F150',
// name2: '猛禽'
// },
// speed: 6,
// color: "black"
// };
// for (var key in car) {
// console.log(car[key]);
// }
// var i = 1, result = 0;
// while (i<=100) {
// result+=i;
// i++
// }
// console.log(result);
// var i = 1
// do {
// console.log(i);
// i++;
// } while (i <= 10);
</script>
</html>

View File

@@ -0,0 +1,95 @@
<!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>function 函数(方法)</title>
</head>
<body>
</body>
<script>
// function 就是具有相同功能代码的封装,降低代码冗余
// 定义 ?
// function 方法名( 可选 方法参数1,方法参数2,....) {
// // 你的代码
// }
// 没写名字的方法叫 匿名方法
// function test (money, clothes) {
// var b = 2, c = money;
// return `同学帮我洗: ${clothes}, 还剩余${c-b}元,还给了我`;
// }
// var test = function (money, clothes) {
// var b = 2, c = money;
// return `同学帮我洗: ${clothes}, 还剩余${c - b}元,还给了我`;
// }
// var c = test;
// console.log( c(10, "衣服") );
// var d = test(10, "衣服");
// console.log(d);
// 回调函数 在 异步 (同步) 代码里面用
// function async(callback) {
// var b = 1;
// setTimeout(function() {
// b = 3;
// callback(b)
// }, 3000)
// }
// async( function(ddd) {
// console.log(ddd);
// } )
// function a (callback) {
// var c = 1;
// callback(c)
// }
// a( function(res) {
// console.log(res);
// } )
// function forEach(data, callback) {
// for (let index = 0; index < data.length; index++) {
// callback(data[index], index, data)
// }
// }
// forEach(["哈哈1","哈哈2","哈哈3"], function(v,i,arr) {
// console.log(arr);
// } )
// 方法的作用域
// 全局作用域
// 局部作用域
// 变量提升
// var c = 1
// function a () {
// var c = 2;
// console.log(c); // 3
// }
// a();
// console.log(c); // 1
</script>
</html>

View File

@@ -0,0 +1,95 @@
<!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>js</title>
</head>
<body>
</body>
<script>
// es5es6es7 ++
// typescript
// 严格模式
// 变量 计算内部会变的数据
// var 系统关键字
// var 变量名称 = 变量数值
// var 变量名称
// var a = 100
// var b = "刘兵"
// 变量名称 规范
// 1: 变量命名不可以出现特殊符号 (_ $)
// 2变量命名不能以数字开头
// 3: 变量命名区分大小写
// 4: 变量命名 遵守 驼峰命名法
// 5: 变量名不要出现重复
// 6: 先定义后使用
// var c = "1111"
// var C = "3333"
// var UserName = "李四"
// var hhhh
// console.log(a,b);
// a = 1000
// console.log(a);
// console.error("哈哈哈哈")
// console.warn("警告")
// console.log(b);
// 常量 计算内部不会变的数据
// const 常量名称 = 常量数值
// const test = "111"
// test = "活动和德国法国发过"
// 数据类型
// 1基本类型
// 字符串String凡是用双引号或单引号包裹起来的都是字符串
// 数字(Number):阿拉伯数字
// 布尔(Boolean):就是 true真 1 和 false假 0
// 对空Null表示没有找到某个东西
// 未定义Undefined变量如果未赋值或者未定义
// Symbol表示唯一的
// var a = 100
// var b = 1000
// var c = 1
// 简写
var a = 1, b = 2, c = 4
// 运算符 & 赋值运算符
// + - * / % ++ -- += -= *= /+ %=
// a++-- 表示先用a用完后然后再+1
// --++a : 表示先+1然后用a
// +
// 1: 进行数学加法运算(左右两边都是数字)
// 2: 进行字符串拼接
// = 赋值
// == 判断是否相等
// === 强等于 判断是否相等,还会判断数据类型是否相等
// 比较运算符 & 逻辑运算符
// != !== ! && 条件表达式两边必须都为true才返回true否则直接返回false
// || 条件表达式两边只要有一个为true就返回true
// console.log(++a);
// console.log( ( ++a - ( c + (++b) ) ) + ( a-- + (--b) ) );
// console.log( ( a-- + ( ++a + (a-true-(c++)) / --b + (++b) ) ) + ( a + b + c) );
// 2引用数据类型
// 现在不讲
// Object array function
// 数据类型转换
</script>
</html>

View File

@@ -0,0 +1,86 @@
<!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>js 数据类型 - 对象</title>
</head>
<body>
</body>
<script>
// object
// 1数据组成的规则
// 2: 编程中的思想 面向对象(oop)的变成 c++ java php python js 面向过程的编程 c
// 三大特征:封装,继承,多态
// 以前 objectjs 更新一个 class
// 如何定义一个对象?
// var 对象名 = {
// 属性名(key): 属性值(value)
// }
// var obj = new Object();
// obj.name = "F150";
// obj.color = "black";
// var obj = new Object({ name: "F150", color: "black" });
// var car = {
// name: {
// name1: 'F150',
// name2: '猛禽'
// },
// 11111: "test",
// speed: 6,
// color: "black"
// };
// console.log(car);
// setTimeout(() => {
// car.name = "demo";
// console.log(car);
// }, 3000)
// console.log(car.name.name2);
// console.log(car.11111);
// console.log( car["11111"] );
// car.start();
// car.stop();
// class car {
// start() {
// console.log("车辆启动了");
// }
// stop() {
// console.log("车辆停止了");
// }
// }
// class F150 extends car {
// name = "11111"
// test() {
// // console.log(this.name);
// }
// }
// class FLL extends car{
// }
// var me = new F150();
// me.test()
</script>
</html>

View File

@@ -0,0 +1 @@
alert("1111")

View File

@@ -0,0 +1,119 @@
<!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>条件语句</title>
</head>
<body>
<input type="text" placeholder="请输入分数">
<button>查询</button>
<div class="result"></div>
</body>
<script>
// if
// if (写条件) {
// 具体要干的事情
// }
// if () {
// } else {
// }
// if () {
// } else if () {
// } else {
// }
var je = true;
// if (je) {
// console.log("我去吃饭");
// } else {
// console.log("我不去吃饭");
// }
// if(je) console.log("我去吃饭")
// else console.log("我不去吃饭")
// 三元运算
je ? console.log("我去吃饭") : console.log("我不去吃饭")
// var nums = 100;
// if (nums < 60) {
// console.log("不及格");
// } else if (nums >= 60 && nums <= 70) {
// console.log("一般");
// } else if (nums > 70 && nums <= 80) {
// console.log("普通");
// } else if (nums > 80 && nums <= 90) {
// console.log("良好");
// } else if (nums > 90 && nums <= 100) {
// console.log("优秀");
// } else {
// console.log("成绩不合理");
// }
// document.querySelector("button").onclick = () => {
// var nums = document.querySelector("input").value;
// var res = document.querySelector(".result")
// if (nums < 60) {
// console.log("不及格");
// res.innerText = "不及格"
// } else if (nums >= 60 && nums <= 70) {
// console.log("一般");
// res.innerText = "一般"
// } else if (nums > 70 && nums <= 80) {
// console.log("普通");
// res.innerText = "普通"
// } else if (nums > 80 && nums <= 90) {
// console.log("良好");
// res.innerText = "良好"
// } else if (nums > 90 && nums <= 100) {
// console.log("优秀");
// res.innerText = "优秀"
// } else {
// console.log("成绩不合理");
// res.innerText = "成绩不合理"
// }
// }
// switch
// var je = true;
// switch (je) {
// case true:
// console.log("吃饭");
// break
// case false:
// console.log("不吃饭");
// break;
// default:
// console.log("1111");
// break;
// }
</script>
</html>

View File

@@ -0,0 +1,7 @@
javascript:
js做表单做特效处理简单逻辑的复杂的逻辑数据渲染桌面端app游戏开发3D
js:
dom 操作html+css的
bom 操作控制浏览器的

View File

@@ -0,0 +1,78 @@
<!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>ajax</title>
</head>
<body>
<ul>
</ul>
</body>
<script>
// 拿出手机 创建一个新的ajax对象
var xhr = new XMLHttpRequest();
// 输入号码
// 网址! 是后端给我们的,而且不止一个,每一个网址都有一个具体的功能
xhr.open("GET", "http://127.0.0.1:3000/api/index/hot")
// 拨号
xhr.send();
// 状态监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 序列化string转object/array
var data = JSON.parse(xhr.responseText)
data.result.forEach(v => {
console.log(v);
document.querySelector("ul").innerHTML += `<li>
<a href="${v.url}" target="_blank">
<img src="${v.img}" alt="">
<div class="title">${v.title}</div>
</a>
</li>`
});
} else {
alert("当前请求失败,请稍后再试")
}
}
}
//request req 请求
//response res 响应
// 请求头
// 响应头
// 请求体
// 请求方式
// GET 要的意图 读
// http://127.0.0.1:3000/api/index/class?username=刘兵&pwd=123456&age=18
// 地址栏传参
// POST 给的意图 写
// 请求体里面
// 二级制(文件流)
// form-data
// json
// PUT 给的意图,更新操作 更新
// DELETE 给的意图,删除操作 删除
// json
// xml
</script>
</html>

View File

@@ -0,0 +1,51 @@
<!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>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<img src="" alt="">
</body>
<script>
// 拿出手机 创建一个新的ajax对象
var xhr = new XMLHttpRequest();
// 输入号码
// 网址! 是后端给我们的,而且不止一个,每一个网址都有一个具体的功能
xhr.open("GET", "http://127.0.0.1:3000/api/index/hot")
// 拨号
xhr.send();
// 状态监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 序列化string转object/array
var data = JSON.parse(xhr.responseText)
data.result.forEach(v => {
console.log(v);
document.querySelector("ul").innerHTML += `<li>
<a href="${v.url}" target="_blank">
<img src="${v.img}" alt="">
<div class="title">${v.title}</div>
</a>
</li>`
});
} else {
alert("当前请求失败,请稍后再试")
}
}
}
</scrip>
</html>

View File

@@ -0,0 +1,22 @@
<!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>jsonp</title>
</head>
<body>
</body>
<script>
function a (res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1:3000/api/index/test?cc=a"></script>
</html>

View File

@@ -0,0 +1,62 @@
ajax
web 开发模式
1: 服务端(后端)渲染
后端1万 jquery 写页面30% js+html+css 数据库 实现功能 做安全 70%
前端3千 写页面70% html+css ( 30% )
优:方便做 seo 优化
缺:后端工作任务量大,代码维护艰难
2: 前后端 分离
后端1.8k 数据库 写功能(业务) 做安全
前端1.7k 写页面 做功能(前端) 做安全 app桌面端后端
优:代码维护方便,分工明确,减少前后端扯皮的次数,提供研发效率
缺:
用什么开通讯?
ajax
xml http request xhr
GraphQL
ajax 同源策略(浏览器)
前端file:///C:/Users/bmy/Desktop/2021-11-05/index.html
http://127.0.0.1:8080/index
后端http://127.0.0.1:3000/api/index/hot
1协议
http 80
https 443
2域名
3端口
解决浏览器的同源策略(解决跨域)
1后端设置cors请求头允许前端访问
2: jsonp+callback回调函数 资源文件请求绕过浏览器的ajax同源策略
3服务端代理后端语言nginxapache
A自己前端
|
B自己公司的后端
|
C别人后端

View File

@@ -0,0 +1,24 @@
<!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>测试</title>
</head>
<body>
<h2>测试测hi是</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,33 @@
// var { test, hello } = require("./utils");
// var request = require("request");
// request('https://www.baidu.com/', function (error, response, body) {
// console.log(body);
// });
// console.log(test());
// console.log(hello());
// console.log("你好");
// var http = require('http');
// var fs = require('fs');
// http.createServer(function(req, res){
// var html = fs.readFileSync("./index.html");
// res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
// res.end(html.toString());
// }).listen(8080);
const fs = require('fs');
var readStream = fs.createReadStream('index.html');
var writeStream = fs.createWriteStream("1.png");
//覆盖原有数据
readStream.pipe(writeStream);
console.log("程序执行完毕");

View File

@@ -0,0 +1,18 @@
{
"name": "2021-11-17",
"version": "1.0.0",
"description": "npm学习",
"main": "index.js",
"scripts": {
"start": "node-dev index.js",
"pc": "node-dev src/pc.js"
},
"author": "bmy",
"license": "ISC",
"dependencies": {
"axios": "^0.24.0",
"cheerio": "^1.0.0-rc.10",
"iconv-lite": "^0.6.3",
"request": "^2.88.2"
}
}

View File

@@ -0,0 +1,3 @@
module.exports = {
url: 'http://www.netbian.com/'
}

View File

@@ -0,0 +1,33 @@
const axios = require('axios');
const config = require("./config");
const iconv = require('iconv-lite');
class http {
constructor() {
this.http = axios.create({
baseURL: config.url,
timeout: 100000,
headers: {
"Cookie": "__yjs_duid=1_54d7d9761ff38fd500742b8c976378851637137358248; xygkqecookieclassrecord=%2C1%2C; Hm_lvt_14b14198b6e26157b7eba06b390ab763=1637137357,1637138134,1637138153,1637138272; xygkqecookieinforecord=%2C7-24028%2C7-24022%2C1-1%2C19-23857%2C11-23937%2C12-24000%2C; Hm_lpvt_14b14198b6e26157b7eba06b390ab763=1637144818",
"Host": "www.netbian.com",
"Referer": "http://www.netbian.com/index.htm",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36"
}
});
}
async get(params) {
var res = (await this.http.get(params.url, {
params: params.data,
responseType: params.type ? "arraybuffer" : "stream"
})).data;
if (params.type == "1") {
return iconv.decode(res,'gbk');
} else {
return res;
}
}
}
module.exports = new http();

View File

@@ -0,0 +1,87 @@
var http = require("./http");
const cheerio = require('cheerio');
const fs = require('fs');
const path = require('path');
var pagePicNums = 20;
var urlArr = [] // 存放每一页的网址
var urlIndex = 0;
var pagePicArr = [] // 存放当前页有多少列表需要爬取
var picIndex = 0;
for (var i = 1; i <= 10; i++) {
if (i == 1) {
urlArr.push("")
} else {
urlArr.push(`/index_${i}.htm`)
}
}
GetPageHtml();
async function GetPageHtml() {
console.log("GetPageHtml: ",urlArr[urlIndex]);
var res = await http.get({
url: urlArr[urlIndex],
data: {},
type: "1"
});
const $ = cheerio.load(res);
$(".list ul li").each(function() {
if ($(this).attr("class") != "nextpage") {
if (! ($(this).find("a").attr("href").includes("pic")) ) {
pagePicArr.push({
title: $(this).find("a img").attr("alt"),
url: $(this).find("a").attr("href")
})
}
}
});
console.log(pagePicArr);
GetPageInfo();
}
async function GetPageInfo() {
var res = await http.get({
url: pagePicArr[picIndex].url,
data: {},
type: "1"
});
const $ = cheerio.load(res);
createdImg($(".endpage .pic img").attr("src"))
if (picIndex <= pagePicArr.length - 1) {
picIndex += 1;
// 这一页爬结束了
if (picIndex > pagePicArr.length - 1) {
console.log(`当前第 ${urlIndex} 页结束,开始下一页 ${urlIndex + 1},下一页网址是:${urlArr[urlIndex]}`);
pagePicArr = [];
picIndex = 0;
urlIndex+=1;
GetPageHtml();
} else {
GetPageInfo();
}
}
}
async function createdImg(url) {
console.log(url);
var res = await http.get({
url: url,
data: {},
type: "2"
});
fs.writeFileSync(path.join(__dirname, `./img/${pagePicArr[picIndex]?.title}.jpg`), res);
}

View File

@@ -0,0 +1,11 @@
class utils {
test () {
return "test"
}
hello() {
return "hello"
}
}
module.exports = new utils();

View File

@@ -0,0 +1,100 @@
<!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.js</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 v-once>{{ test }}</h2>
<img :src="imgSrc" alt="">
<ul>
<li v-for="v,i in newList" :key="i" @click="LiClick(i)">{{ i }} | {{ v.title }}</li>
</ul>
<input type="text" placeholder="输入用户名" v-model="userName">
{{ userName }}
<div class="" v-show="isVip">vip查看的内容</div>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h2>{{ hello }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// vue 如何实现双向数据绑定的???
// vue 指令 (标签的属性 全局属性)
// v-bind: 将变量绑定到标签的属性上
// 简写 :
// v-for 循环 必须加 :key="" 数值一般是下标
// v-html 将字符串显示成网页
// v-text 所有内容显示成为本
// v-model 用来获取输入框用户输入的数值 修饰符 .trim
// v-on 绑定点击事件 v-on:事件类型="事件处理函数"
// 简写 @事件类型="事件处理函数"
// v-show
// v-if v-else v-if-else
// v-slot 留坑,插槽的时候再说
var vm = new Vue({
el: '.app',
data: {
type: 'C',
userName: '',
test: '你好',
imgSrc: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
newList: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
],
html: "<h2>测试html</h2>",
isVip: false
},
// vue中的所有方法
methods: {
LiClick(index) {
console.log("你点击了li标签: ", this.newList[index]);
}
},
watch: {
test(newValue, oldValue) {
console.log(newValue, oldValue);
}
},
computed: {
hello() {
return "111111"
}
}
})
</script>
</html>

View File

@@ -0,0 +1,70 @@
<!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>轮播图组件 作用域插槽的封装</title>
</head>
<body>
<div class="app">
<swiper :list="imgList">
<template v-slot:default="{ data: a }">
<img :src="a" alt="">
</template>
</swiper>
<hr>
<swiper :list="newsList">
<template v-slot:default="{ data: a }">
<p>{{ a.title }}</p>
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component("swiper", {
template: `
<div class="swiper">
<div class="swiper-silder" v-for="(item,index) in list" :key="index">
<slot :data="item"></slot>
</div>
</div>
`,
props: {
list: {
type: Array,
default: () => []
}
},
data() {
return {
}
},
methods: {
}
});
new Vue({
el: '.app',
data: {
imgList: [
'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
],
newsList: [
{ id: 1, title: '热点1' },
{ id: 2, title: '热点2' },
{ id: 3, title: '热点3' },
]
},
methods: {
}
})
</script>
</html>

View File

@@ -0,0 +1,114 @@
<!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>tabs切换</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 20px;
}
.title_active {
color: red;
}
.tabs_content div {
display: none;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<!-- <li :class=" index == currentIndex ? 'title_active' : '' " -->
<li :class="{ title_active: index == currentIndex }"
@click="currentIndex = index"
v-for="(item,index) in tabsList" :key="index">
{{ item.title }}
</li>
</ul>
<div class="tabs_content">
<div :class="index == currentIndex ? 'content_active' : '' " v-for="(item,index) in tabsList" :key="index">
<p v-for="(v,i) in item.content" :key="i">
{{ v.text }}
</p>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabsList: [
{
id: 1,
title: '精选',
content: [
{ text: '精选的内容1' },
{ text: '精选的内容2' },
{ text: '精选的内容3' },
]
},
{
id: 2,
title: '美食',
content: [
{ text: '美食的内容1' },
{ text: '美食的内容2' },
{ text: '美食的内容3' },
]
},
{
id: 3,
title: '百货',
content: [
{ text: '百货的内容1' },
{ text: '百货的内容2' },
{ text: '百货的内容3' },
]
},
{
id: 4,
title: '个护',
content: [
{ text: '个护的内容1' },
{ text: '个护的内容2' },
{ text: '个护的内容3' },
]
},
]
},
methods: {
changeActive(index) {
this.currentIndex = index;
}
}
})
</script>
</html>

View File

@@ -0,0 +1,75 @@
angular react vue 尤雨溪
mmodel ajax获取到的数据 vview 页面) vmview and model 模块
// dom操作
// 去dom 化
mmodelvviewccontroller模式 纯服务端渲染的网站开发
laravel
vue 1.x
vue 2.x
option api vue 不适合做大型项目开发
60%
class api 过渡阶段 语法
5%
@Componect
class Home extends Vue {
}
vue3.x nodejs + typescript
composition api 35%
setup() {
var test = function() {
}
return {
test
}
}
vue 优势:
数据双向view and model绑定 & 响应式
组件系统
计算属性和侦听器
组件
混入 mixins this 指向
更合理的代码封装解决this指向问题
自定义指令
过滤器
vue-router
vue第二种用法 (详细的介绍第二种用法的文件结构和规范注意事项)
demo
封装vue脚手架
做项目........
vue cli 脚手架
vue 2.x
vuecli 2.x 自己的文件夹结构
vue 3.x
vuecli 3.x 4.x 5.x 文件结构变化很大

View File

@@ -0,0 +1,149 @@
<!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>Document</title>
</head>
<body>
<div class="app">
<lb-header :title="str"></lb-header>
<lb-button @more="alertOne"></lb-button>
<h2 ref="nihao">测试标签</h2>
<lb-button @more="alertTwo"></lb-button>
<lb-header title="详情页的头部">
<template v-slot:left>
<i>我是图标left</i>
</template>
<template v-slot:right>
<i>我是图标right</i>
</template>
</lb-header>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件
// 生命周期
//
// 全局组件 在项目的任何一个页面都可以随意使用
// ref
// 局部组件 只有某个页面可以使用
// 1 定义局部组件
var button_a = {
template: `
<div>局部组件 </div>
`,
data() {
return {
}
},
methods: {},
}
Vue.component('lb-header', {
template: `
<div>
<div class="left">
<slot name="left"></slot>
</div>
<h2>{{ title }}</h2>
<div class="right">
<slot name="right"></slot>
</div>
</div>
`,
// props: [ 'title' ],
props: {
title: {
type: String,
default: '默认标题'
}
},
data() {
return {
headerText: '我的公共头部'
}
},
methods: {
}
})
Vue.component('lb-button', {
template: `
<button @click="but_click">
点我
<lb-c></lb-c>
</button>
`,
data() {
return {
aaa: '11111'
}
},
methods: {
but_click() {
// 2
console.log(this.$root.$children[3].$props.title="哈哈是受到很多很多很好的");
this.$emit("more", "1111")
}
},
// 2 注册局部组件
components: {
"lb-c":button_a
}
});
// 父子组件的数据传递
// 父 --> 子 props provide / inject
// 子 --> 父 $emit
// 传html 用插槽
// 别名插槽
// 作用域插槽 (搞不明白没关系)
// 兄弟关系
// 1: 子1 $emit 提交数据给父组件然后父组件通过props传给子2
// 2: this.$parent $root 等实现
// 3: provide / inject
new Vue({
el: '.app',
data: {
str: '',
},
beforeCreate() {
console.log(this);
},
created() {
this.getIndex();
console.log(this.$refs.nihao);
},
methods: {
alertOne(res){
console.log(res);
this.str = res;
alert(1)
},
alertTwo(res){
console.log(res);
alert(2)
},
getIndex() {
console.log("getIndex");
}
}
})
</script>
</html>

View File

@@ -0,0 +1,44 @@
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.test {
width: 100%;
height: 600px;
}
#one {
background: red;
}
#two {
background: green;
}
#three {
background: blue;
}
#four {
background: black;
}
</style>
</head>
<body>
<div>
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<a href="#four">four</a>
</div>
<div class="test" id="one"></div>
<div class="test" id="two"></div>
<div class="test" id="three"></div>
<div class="test" id="four"></div>
</body>
</html>

View File

@@ -0,0 +1,67 @@
<!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>Document</title>
</head>
<body>
<div class="app" v-title=" '首页' ">
{{ hello | sub }}
<h2></h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var mix = {
data() {
return {
page: 1,
totalPage: 0
}
},
methods: {
testTwo() {
return "testTwo"
}
}
}
new Vue({
el: '.app',
mixins: [mix],
data: {
hello: '这是测试的问题哈很多很多很多很多很多很多很多很多和',
demo: '你好'
},
created() {
console.log(this.page);
console.log(this.testTwo());
},
methods: {
test() {
}
},
filters: {
sub(str) {
return str.substring(0, 10) + '...'
}
},
directives: {
title: {
bind: function (el, binding) {
var html = `<div class="header">${binding.value}</div>`
el.innerHTML = html + el.innerHTML
}
}
}
})
</script>
</html>

View File

@@ -0,0 +1,236 @@
<!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-router</title>
<style>
.active {
color: red;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/my">我的</router-link>
</p>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 1. 定义 (路由) 组件。
const Home = {
template: `
<div class="home">
首页
<button @click="GoLogin">登录</button>
<ul>
<router-link :to="{ path: 'info', query: { title: item.title, id: item.id } }" tag="li" v-for="(item,index) in shopList" :key="index">
{{ item.title }}
</router-link>
</ul>
</div>
`,
data() {
return {
shopList: [
{ id: 1, title: 'MBP最新款', price: 21000 },
{ id: 2, title: 'iphone最新款', price: 9000 },
{ id: 3, title: '鞋子最新款', price: 400 },
]
}
},
methods: {
GoLogin() {
this.$router.push("/login")
// this.$router.push({
// path: '/login',
// query: {
// id: "111"
// }
// })
}
}
}
const Info = {
template: `<div>详情页面</div>`,
data() {
return {
}
},
created() {
// $route 获取路由的配置信息
// $router vuerouter的所有方法
console.log(this.$route.query.id, this.$route.query.title);
},
}
const Login = {
template: `
<div @click="login">登录页面</div>
`,
methods: {
login() {
localStorage.setItem("token", '1111122222');
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
} else {
this.$router.replace("/")
}
}
}
}
const My = {
template: `<div>我的页面</div>`
}
const NotFound = {
template: `<div>404页面</div>`
}
const routes = [
{
name: 'error',
path: '*',
component: NotFound,
meta: {
isLogin: false
}
// redirect: "/"
},
{
name: 'home',
path: '/',
component: Home,
meta: {
isLogin: false,
title: '首页'
}
},
{
name: 'info',
path: '/info',
component: Info,
meta: {
isLogin: false,
title: '详情'
}
},
{
name: 'login',
path: '/login',
component: Login,
meta: {
isLogin: false,
title: '登录'
},
beforeEnter: (to, from, next) => {
if (localStorage.getItem("token") != null) {
history.back();
} else {
next();
}
}
},
{
name: 'my',
path: '/my',
component: My,
meta: {
isLogin: true,
title: '我的'
}
},
]
const router = new VueRouter({
mode: "hash",
linkExactActiveClass: 'active',
routes
});
// 实现页面的权限控制(有些页面需要登录才可以访问)
router.beforeEach((to, from, next) => {
document.title = to.meta.title
// 判断你要访问的页面是否需要登录,如果需要登录
// 再判断用户是否登录
// 需要等
if (to.meta.isLogin) {
// 登录过了
if (localStorage.getItem("token") != null) {
next();
} else {
next({
path: '/login',
query: {
from: to.fullPath
}
})
}
} else {
next();
}
})
const app = new Vue({
router,
el: "#app"
})
// 现在,应用已经启动了!
// vue-router
// hash http://www.test.com/#/info
// history
// http://www.test.com/car
// 页面传参方式
// 1: query
// http://www.test.com/info?id=1&page=2
// 2: params
// http://www.test.com/car/1/2
</script>
</html>

View File

@@ -0,0 +1,12 @@
<!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>Document</title>
</head>
<body>
<webview url="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp"></webview>
</body>
</html>

View File

@@ -0,0 +1,47 @@
uniapp
用前端开发APP
1Cordova lonic PhoneGap
2React Native weex
1Androidjava iosobject-c swift 原生
更新成本太高了 开发成本高
webview html 标签
2: webview (android system webview) (H5页面) + 原生
webview 让浏览器中的js和android代码进行交互
3: 混合app中间层转换 ReactNative Weex VueNative uniapp flutter
webview
前身:
mui
uniapp 基于 vue.js
js
|
webview
|
uniapp.jar
|
android
adb 电脑控制手机的调试工具
nvue
index.nvue(weex) ===> 原生渲染
vue
index.vue ===> index.js