前端知识点

1.HTML
2.CSS
3.js
4.VUE
5.vUE的基本指令
6.VUE案例
7.ELEMENT

HTML

设置图片

    "图片地址">
    让图片居中显示
    "图片地址" width="270" height="900">
1
2
3

有序列表

<!--有序 type为格式 start 填数字 为从多少开始-->
<ol type="1" start="1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>
1
2
3
4
5
6
7
8

无序列表

<!--无序的 默认实心圆 square正方形 circle空心圆-->
<ul>
    <li>无序哦</li>
    <li>无序的</li>
</ul>
设置无序列表的样式
<ul type="square">
    <li>无序哦</li>
    <li>无序的</li>
</ul>
设置无序列表的样式
<ul type="circle">
    <li>无序哦</li>
    <li>无序的</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

水平线

<hr color="颜色"/>

1
2

超链接

<!--超链接的形式 不同的浏览器可能结果不同   
		target="_blank"  在新的页面中打开-->
<a href="地址" target="_blank">标签提示</a>
1
2
3

表格

<table border="1" cellpadding="0"  cellspacing="0" width="50%" bgcolor="aqua" align="center">
    <caption>居中标签</caption>
    <!--border画一条多少像素的线 cellpadding线到文字的距离
     cellspacing两条线线连接到一起 width与网页占比
      bgcolor背景色 align是居中 thead是表格的头部-->
    <thead>
    <tr  align="center">  居中显示
        <td rowspan="2">第一列</td>
        <td>第二列</td>
        <td bgcolor="#5f9ea0">第三列</td>
    </tr>
    </thead>
    <!--tbody是表格的体-->
    <tbody>
    <tr >
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
    <!--tfoot是表格的尾部-->
    <tfoot>
    <tr >
        <td>z</td>
<!--        占两列单元行-->
        <td colspan="2">z</td>
    </tr>
    </tfoot>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

表单提交

<from action="服务器地址" method="post" name="表单名字">
    <!--text是文本框 value是在框中显示 password是将输入的内容隐藏 maxlength是框内输入的最大数量-->
    账号<input type="text" value="请输入:" maxlength="5"/> <br/>
    密码<input type="password"/> <br/>
    
    
    <!--单选 名字必须是相同的  checked  默认选中-->
    第一<input type="radio" name="w" checked="checked"/>
    第二<input type="radio" name="w"/>
    第三<input type="radio" name="w"/><br/>
    
    
    
    <!--多选 名字是相同的 好给服务器端进行反馈 checked是设置默认选中的-->
    <!-- input :id  与 lable :for 的值相等的情况下  点击lable中标签的文字就可以选中文本框了 -->
    <input checked="checked" type="checkbox" name="q" id="cs"/>
    <label for="cs">测试</label>
    <input type="checkbox" name="q" id="ja"/>
    <label for="ja">java</label>
    <input type="checkbox" name="q" id="c"/>
    <label for="c">c++</label>
    <br/>
    
    
    <!--    submit提交 reset重新 为啥不管我也不知道-->
    <input type="submit" value="提交"/>
    <input type="reset" value="重新注册"/>
    <!--结合css进行获取验证码-->
    <input type="button" value="验证码获取"/>
    <!--上传图片-->
    <input type="file"/> <br/>
    <!--点击点我就可以点到按钮 没成功-->
    <lable for="wwq">点我</lable>
    <input type="radio" id="wwq">

    <!--    下拉页面-->
    选择<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
    <br/>

    内容框<textarea cols="20" rows="5"></textarea>

</from>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

CSS

css标签

        .w{
            /*背景色*/
            background-color: pink; 设置背景颜色
            width: 80px;   设置宽度
            height: 80px;  设置长度
            border-radius: 50px;  圆角边框的设置
        }
        <div class="w"> </div>
1
2
3
4
5
6
7
8

鼠标经过标签时

        .w:hover{
            /*鼠标经过当前类为w的div时 盒子展示的阴影*/
            box-shadow: 10px 10px 10px 10px rgba(0,0,0, .3) ;

            /*鼠标经过对字体的操作*/
            line-height: 500px;
            text-align: center;
            text-shadow: 10px 10px 10px rgba(0,0,0,.8);
        }
1
2
3
4
5
6
7
8
9

表单提交限制只能输入数字


    <style>
        /*给表单中的字体修改颜色*/
        input::placeholder{
            color: pink;
        }
    </style>
<!--提交验证要加表单域-->
<form action="">

    <ul>
        <li>
            <!--        输入限制为数字  值在搜索框内  自动聚焦  autocomplete="on"加上name属性可以显示表单记录-->
            <input type="number" readonly="readonly" placeholder="搜搜看" autofocus="autofocus" autocomplete="on" name="w" >
            <!--       输入的只能为数字-->
            <input type="number">
        </li>
    </ul>
    <!--multiple="multiple"提交多个文件-->
    <input type="file" multiple="multiple">

    <input type="submit" value="提交" >
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

定位

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        /*距离自身(100px 100px在页面的开头)进行的偏移*/
        .xd{
            width: 100px;
            height: 100px;
            position: relative;
            top: 100px;
            left: 50px;
            background-color: pink;

        }
        /*因为有了父类相对定位,所以绝对定位是根据父类定位进行的偏移*/
        /*在同一个位置 z-index: 0;值越大 可以盖住值小的*/
        .juedui{
            height: 100px;
            width: 100px;
            background-color: #ff6700;
            position: absolute;
            right: 50px;
            bottom: 50px;
            z-index: 0;
        }

        .juedui2{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            right: 50px;
            bottom: 5px;
            z-index: 1;
        }
        /*跟父元素没有任何关系*/
        .guding{
            width: 100px;
            height: 100px;
            background-color: #333333;
            position: fixed;
            top: 5px;
            right: 5px;
        }
    </style>
</head>
<body>

<div class="xd">这个是相对定位

    <div class="juedui">这个是绝对定位1号</div>
    <div class="juedui2">这个是绝对定位2号</div>
    <div class="guding">这个是固定定位</div>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

标签选择器

<!--    外部样式表的引入 同一文件夹下写名字或路径-->
    <link rel="stylesheet" href="d1.css">
    <!--    这种方法叫做内部样式表-->
    <style>
        /*标签选择器 所有的标签都会被赋值*/
        p {
            color: #44ffff;
        }


        /*类选择器 给class对应的名字赋值*/
        .w {
            color: pink;
        }

        /*多类名的情况下,将属性相同的放在一起*/
        .q {
            font-weight: bold;
        }

        /*自定义,对应的是id 该值只能调用一次*/
        #qq {
            color: salmon;
        }

        /*更改所有标签中的内容*/
        * {
            font-size: 90px;
        }

    </style>
</head>
<body>
<p>这是p标签</p>
<p class="w">这也是p标签</p>
<!--多类名的定义方式-->
<p class="w q">这这这是是是</p>

<p id="qq">这个只可以调用一次</p>

<!--行内样式表 对于简易的操作使用-->
<div style="font-size: 50px;color: red;">这是。。</div>

<div class="fff">这是外部样式表</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

选择器

    <style>
        /*后代选择器*/
        ol li{
            color: pink;
        }

        /*子选择器*/
        .w >a{
            color: pink;
        }

        /*并集选择器 ，隔开加后代选择器*/
        .q,.w,li a{
            color: pink;
        }

        /*伪链接选择器*/
        a:link{
            color: cadetblue;
        }

        a:visited{
            color: salmon;
        }

        a:hover{
            color: pink;
        }

        a:active{
            color: black;
        }

        /*伪类选择器 对表单进行的更改*/

        input:focus{
            color: pink;
            width: 60px;
            height: 60px;
        }

    </style>
</head>
<body>

<ol>
    <li>zhehehheh</li>
    <li>zhehehheh</li>
    <li>zhehehheh</li>
</ol>

<ul>
    <li >zhehehheh</li>
    <li>zhehehheh</li>
    <li class="w"><a>zhehehheh</a></li>
    <li><a>zhehehheh2</a></li>
</ul>

<ul>
    <P class="q">这是 是是是</P>
    <li>zhehehheh1</li>
    <li>zhehehheh2</li>
    <li class="w"><a>zhehehheh3</a></li>
    <li><a>zhehehheh4</a></li>
</ul>

<a href="#">点我 点我</a>

<input type="text">


</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

伪类选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 500px;
            width: 500px;
            background-color: pink;
        }

        /*伪元素的设置 content:""必写*/
        div::before{
            content:"";
            height: 100px;
            width: 100px;
            background-color: #44ffff;
            display: inline-block;
        }

        /*鼠标经过div盒子 会让其伪元素更改颜色*/
        div:hover::before{
            background-color: pink;
        }
    </style>
</head>
<body>
<div ></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*父类的第一个孩子*/
    ul li:first-child{
        color: #ff6700;
    }
    /*父类的最后一个孩子*/
    ul li:last-child{
        color: red;
    }
    /*(里可以填公式等)*/
    /*先找到公式里的所有子类再去找是不是li元素里的*/
    ul li:nth-child(2n){
        color: pink;
    }

    /*先找到元素,再到元素中找到其子类*/
    ul li:nth-of-type(3){
        color: chartreuse;
    }


</style>
<body>

<ul>
    <li>z</li>
    <li>zz</li>
    <li>zzz</li>
    <li>zzzz</li>
    <li>zzzzz</li>
</ul>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

属性选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*必须有的属性*/
        div[class]{
            color: pink;
        }
        /*属性=值进行修改*/
        div[class=zzz]{
            color: #ff6700;
        }
        /*以q开头*/
        div[class^="q"]{
            color: blue;
        }
        /*以v结尾*/
        div[class$="v"]{
            color: darksalmon;
        }
        /*属性含有bb的值*/
        div[class*="bb"]{
            color: black;
        }


    </style>
</head>
<body>
<div class="zz">www</div>
<div class="zzz">wwww</div>
<div class="q">ww</div>
<div class="qcv">ww</div>
<div class="bbb">www</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

鼠标浮动选择

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            position: relative;
            /*给父级添加透视*/
            perspective: 500px;
        }

        div{
            width: 200px;
            height: 20px;
        }

        .d{
            position: relative;
            /*给父类加3d呈现效果*/
            transform-style: preserve-3d;
            transition: all .4s;
        }

        .b,.bb{
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 8px;
            line-height: 20px;
            text-align: center;
        }

        .b{
            background-color: pink;
            /*让前面的前移宽的一半*/
            transform:translateZ(10px);
        }

        .bb{
            background-color: #ff6700;
            /*注意先移动，后旋转*/
            /*因为.b的z坐标前移10px .bb的坐标下移10px旋转*/
            /*后正好形成了一个直角 转动父类即可*/
            transform:translateY(10px) rotateX(-90deg);
        }

        .d:hover{
            /*转动大盒子*/
            /*正数往上走*/
            transform:  rotateX(90deg) ;
        }



    </style>
</head>
<body>
<div class="d">
    <div class="b">这里</div>
    <div class="bb">在这</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

旋转效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body {
        perspective: 500px;
        }

        section{
            width: 300px;
            height: 270px;
            position: relative;
            margin: 100px auto;
            transform-style: preserve-3d;
            /*调用动画 动画名 持续时间 运动曲线 何时开始 播放次数*/
            /*是否反方向 动画是否保持结束状态*/
            animation: dd 10s linear 1s infinite alternate forwards;
        }


        section:hover{
            /*鼠标经过时，图片停止*/
            animation-play-state: paused;
        }

        /*定义动画 想让图片动起来要添加动画*/
        @keyframes dd{
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }

        div{

            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url("sdsd.jpg") no-repeat;
        }

        .w{
            transform:rotateY(0deg) translateZ(300px);
        }

        .ww{
            /*先写旋转，再写距离*/
            /*这六张图每张旋转60°正好是一圈 利用z轴拉近距离*/
            transform:rotateY(60deg)  translateZ(300px) ;

        }

        .www{
            transform:rotateY(120deg) translateZ(300px) ;

        }

        .wwww{
            transform:rotateY(180deg) translateZ(300px) ;

        }

        .wwwww{
            transform:rotateY(240deg) translateZ(300px) ;

        }

        .wwwwww{
            transform:rotateY(300deg) translateZ(300px) ;

        }



    </style>
</head>
<body>

<section>
    <div class="w"></div>
    <div class="ww"></div>
    <div class="www"></div>
    <div class="wwww"></div>
    <div class="wwwww"></div>
    <div class="wwwwww"></div>
    <div class="q"></div>
</section>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

存储音频/视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 地址 自动播放 静音播放 播放按键 无限循环 缓存时的图片-->
<video src="怦然心动上半部.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="hot_tel.jpg"></video>
<!--文件地址 自动播放 播放按键 播放重复-->
<audio src="李志%20-下雨.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

小米导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索栏</title>
    <link rel="stylesheet" href="xiaomi.css">
</head>
<body>
	<style>
	*{
	    margin: 0px;
	    padding: 0px;
	}
	/*设置导航栏的*/
	.q{
	    height: 40px;
	    line-height: 40px;
	    background-color: #333333;
	}
	/*模块化*/
	ul li{
	    display: inline-block;
	    font-size: 12px;
	}
	/*对超链接进行操作*/
	 li a{
	    Text-decoration: none;
	    color: #b0b0b0;
	    padding-left: 10px;
	}
	
	 /*清除购物车超链接的左内边距*/
	 li .aa{
	     padding-left: 0px;
	 }
	
	 /*对导航栏的内容设置*/
	 ul .wq{
	    float: right;
	}
	/*对导航栏的内容设置*/
	ul .wwq{
	    float: right;
	    padding-right: 10px;
	}
	/*对购物车连接进行的操作*/
	ul .aa{
	    margin-right: 10px;
	    Text-decoration: none;
	    color: #b0b0b0;
	    background-color: #424242;
	    float: right;
	    width: 120px;
	    text-align: center;
	}
	
	.er{
	    height: 55px;
	    margin: 22.5px 10px;
	    background-color: white;
	}
	
	.er .tubiao{
	    height: 50px;
	    width: 50px;
	}
	
	/*对灰色模块的设置*/
	.w{
	    overflow: auto;
	    height: 910px;
	    width: 415px;
	    background-color: white;
	    margin: 0px auto;
	}
	
	.ww{
	    margin: 0px 10px;
	    float: left;
	}
	
	.ww>a{
	    display: block;
	    /*行内元素转化为块元素*/
	    width: 200px;
	    height: 40px;
	    background-color: #55585a;
	    /*背景色*/
	    Text-decoration: none;
	    /*超链接文本无下划线*/
	    line-height: 40px;
	    /*行间距40像素=盒子的高度 可以上下空隙相同*/
	    font-size: 20px;
	    color: #fff;
	    padding-left: 30px;
	    /*Text-indent: 2em;*/
	    /*首行缩进2字符*/
	    font-size: 14px;
	
	}
	
	.ww >a:hover{
	    background-color: #ff6700;
	}
	
	.aa:hover{
	    background-color: white;
	    /**/
	
	}
	
	li >a:hover{
	    color: white;
	}
	
	.tubiao:hover{
	    background-image: url("参考资料/sdsd.jpg");
	}
	
	
	
	
	</style>
<div class="q">
    <ul>
        <li><a href="#">小米商城</a></li>
        <li><a href="#">云服务</a></li>
        <li><a href="#">小爱开放平台</a></li>
        <li><a href="#">企业团购</a></li>
        <li><a href="#">下载app</a></li>
        <li><a href="#">MIUI</a></li>
        <li><a href="#">|oT</a></li>
        <li><a href="#">资质证照</a></li>
        <li ><a href="#">智能生活</a></li>
        <a href="#" class="aa">🛒购物车</a>
        <li class="wwq"><a href="#">消息通知</a></li>
        <li class="wq"><a href="#">注册</a></li>
        <li class="wq"><a href="#" >登入</a></li>
    </ul>
</div>

<div class="er">
    <img class="tubiao" src="tubiao.png" >

</div>


<div class="w">
    <div class="ww">
        <a href="#">手机</a>
        <a href="#">电视</a>
        <a href="#">笔记本</a>
        <a href="#">出行</a>
        <a href="#">旅行</a>
        <a href="#">衣服</a>
    </div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

JS

JS基础语法

<!--    js代码执行是有先后顺序的 js代码在前,会被优先执行-->
    <script>
        //定义变量的方式
        var a=3;
        //输出到网页上 
换行 typeof()返回元素的数据类型
        document.write(a+"
"+typeof (a)+"
")

        var b=+"123";
        // 正负号是数字才加的,所以便把这个字符串123转为了number
        // 如果不加+号的话 则视为拼接字符串
        // 字面值如果不是数字的话,则转为不是数字的(nan)
        var c=b+1;
        document.write(c+"
"+typeof (c)+"
")

        var d="abc";
        var e="acb";
        var f=d==e;
        // 按照字母表的先后顺序,从第一个字母开始,依次进行比较
        document.write(f+"
"+typeof (f)+"
")

        var d1="123";
        var e1=123;
        var f1=d===e;
        // ===是全等于,在比较前先判断数据类型是否相等,类型不同直接false
        document.write(f1+"
"+typeof (f1)+"
")

        var r=1;
        var r1="true";
        //将代码转为boolean类型的
        document.write(!!r+"
"+typeof (r)+"
")
        document.write(!!r1+"
"+typeof (r1)+"
")


        var j=4;
        var j1=3;
        // 三元运算符 j大于j1时,正确取值1,不正确取值2
        var j2=j>j1?true:false
        document.write(j2+"
")

        // for循环定义演示
        var k=0;
        for (var k1=1;k1<=100;k1++){
            k+=k1;
        }
        document.write(k+"
")
    </script>

<!--    引入方法-->
    <script src="基础.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

Array数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 数组的定义
        // 1
        var a=new Array(5);
        a[0]=1;a[1]=2;a[2]="abc";a[3]=4;a[4]=5;
        // 数组的长度也是可变的
        a[10]="hehe";
        // 数组中元素类型是可变的
        // 数组中的长度也是可变的
        document.write(a+"
")
        // 在元素的后面添加元素
        a.push("dd");
        // 将元素用-隔开
        document.write(a.join("-")+a.length+"
");

        // 2
        var a2=new Array(1,2,3,4,5);
        document.write(a2+"
")
        // 3
        var a3=[1,2,3,4,5];
        document.write(a3+"
")


    </script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

创建当前日期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // date的创建
        var date=new Date();
        // 返回date对象对应的本地字符串格式
        var s = date.toLocaleString();
        document.write(s+"
")
        // 获取毫秒值 据当前1970年1月1日1时的毫秒值
        var time = date.getTime();
        document.write(time+"
")

    </script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Goalbal

    <script>
        // jbk是一个汉字占用两个字节
        // utf-8是一个汉字占用3个字节
        // 流程:将一个2进制字节分为两个16进制字节
        var a="https://www.mi.com/?masid=2701.0001"
        // url编码 将参数转为utf-8或jbk的类型
        var b=encodeURI(a);
        document.write(b+"
");
        //url解码 将编码解析为参数
        document.write(decodeURI(b)+"
");

        // url编码
        var b1=encodeURIComponent(a);
        document.write(b1+"
");
        //url解码
        document.write(decodeURIComponent(b1)+"
");

        // 将字符逐一判断,是数字转为number
        var c="12abc";
        var number = parseInt(c);
        document.write(number+"
");

        //NaN参与的==的判断结果均为false 所以要用这个方法去判断
        var d;
        var e=isNaN(d);
        document.write(e+"
");

        // 将字符串作为方法去使用
        var f="isNaN(d)";
        document.write(eval(f))

    </script>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

圆周率/随机数/取整

    <script>
        // 返回圆周率
        document.write(Math.PI+"
")

        // 返回1-100之间的随机数 Math.floor()对值进行向下取整
        var a=Math.floor(Math.random()*100)+1
        document.write(a+"
")

        var b=3.4;
        // 对值进行四舍五入
        document.write(Math.round(b));
        // 对值进行向上取整
        document.write(Math.ceil(b));

    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

正则表达式校验

    <script>
        // 创建格式
        // ^为开头$为结尾
        // \w是单个字符 {6-12之间的数量}
        var a=new RegExp("^\\w{6,12}$");
        // \d是单个字符数字
        var a1=/^\d{6,12}$/;
        // 参数
        var b="helloworld";
        // 验证参数
        var c = a.test(b);
        var c1 = a1.test(b);

        document.write(c+"
");
        document.write(c1);
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

刷新/跳转页面

<input type="button" id="w" value="刷新">
<input type="button" id="ww" value="跳转">
<script>
    // 刷新
    var elementById = document.getElementById("w");
    elementById.onclick =function f(){
        location.reload()
    }
    // 自动跳转到指定网页网页
    var ww = document.getElementById("ww");
    ww.onclick =function f(){
        location.href="https://www.baidu.com/";
    }




</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

打开新窗口/关闭新窗口/弹出提示框

<script>
    //window窗口对象 不用创建,直接使用
    var a="123";
   //弹出警告框
    alert(a);

    // 有确认取消两个按钮
    var b = confirm("确定要退出码");
        if (b){
            alert("不要嘛")
        }else {
            alert("好的呢")
        }

        // 获取用户输入的值
    prompt("今天天气很不错")

    // 打开一个新窗口
    var windows;
    var w = document.getElementById("w");
    w.onclick=function () {
        // open(中可以写需要传递的网站)
       windows = open("https://www.baidu.com/");
    }

    // 关闭窗口
    var ww=document.getElementById("ww");
    ww.onclick=function () {
        // 谁调用关闭谁
        windows.close();
    }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

获取标签文字并修改文字

<script>
    // 
    var elementById = document.getElementById("w");
    // 根据id值取获取一个标签对象
    alert(elementById)

    var innerHTML = "你你你";
    // 修改标签的内容
    elementById.innerHTML= innerHTML;
</script>
1
2
3
4
5
6
7
8
9
10

修改图片内容/删除图片

<img src="../image/c1.jpg" name="w">
<img src="../image/c1.jpg" name="ww" >
<script>
    //设置新的属性 用id不可以   修改图片
    var y = document.getElementsByName("w")[0];
    y.setAttribute("src","../image/c2.jpg")
	var yy = document.getElementsByName("ww")[0];
    //删除设置的属性        删除图片
    yy.removeAttribute("src");
</script>
1
2
3
4
5
6
7
8
9
10

修改标签id属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="ww">
</div>

<script>
    // 对div标签 添加css属性
    var ww = document.getElementById("ww");
    ww.className="w";
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

修改文本内容/图片名称

<div id="w">dd</div>
<div>ddd</div>
<div class="q">dddd</div>
<img src="../image/c1.jpg" name="w">
<script>

    // 根据id返回的元素对象 更改值
    var w = document.getElementById("w");
    w.innerHTML="ddd";

    // 根据div返回的元素数组的第二个 下表是0  更改值
    var z = document.getElementsByTagName("div")[1];
    z.innerHTML="dd"

    //根据class属性获取的元素对象 返回数组的第一个 更改值
    var x = document.getElementsByClassName("q")[0];
    x.innerHTML="d"

    //根据name对象 返回的数组的第一个  更改图片
    var y = document.getElementsByName("w")[0];
    y.setAttribute("src","../image/c2.jpg")


</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

表格/全选/反选/全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }

        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>

    <script>
        /*
          分析：
              1.全选：
                  * 获取所有的checkbox
                  * 遍历cb，设置每一个cb的状态为选中  checked

         */


        //1.在页面加载完后绑定事件
        window.onload = function(){
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function(){
                //全选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为选中  checked
                    cbs[i].checked = true;
                }
            }

            document.getElementById("unSelectAll").onclick = function(){
                //全不选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为未选中  checked
                    cbs[i].checked = false;
                }
            }

            document.getElementById("selectRev").onclick = function(){
                //反选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为相反
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            document.getElementById("firstCb").onclick = function(){
                //第一个cb点击
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //获取第一个cb

                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态和第一个cb的状态一样
                    cbs[i].checked =  this.checked;
                }
            }

            //给所有tr绑定鼠标移到元素之上和移出元素事件
            var trs = document.getElementsByTagName("tr");
            //2.遍历
            for (var i = 0; i < trs.length; i++) {
                //移到元素之上
                trs[i].onmouseover = function(){
                    this.className = "over";
                }

                //移出元素
                trs[i].onmouseout = function(){
                    this.className = "out";
                }

            }

        }



    </script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../image/c2.jpg" id="w" width="100%">

<script>
    var a=1;
    function fun() {
        a++;
        if (a>3){
            a=1;
        }
        var elementById = document.getElementById("w");
        elementById.src="../image/c"+a+".jpg";
    }
    // 循环定时器
    setInterval(fun,2000);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

表单格式校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" id="form" method="get">
    <div>
账号<input type="text"  id="w" placeholder="请输入用户名">

        <span id="s_username" class="error">1</span>
        </div>


<div>密码<input type="password" name="password" id="ww" placeholder="请输入密码"><span id="www">1</span></div>

    <input type="submit" value="提交" id="z">
</form>
<script>

    // 当图或页面加载完毕后执行function方法
    window.onload = function() {
        document.getElementById("form").onsubmit = function () {
            // 当账户和密码同时验证成功时,提交表单
            return f() && f1();
        }

        // 当表单失去焦点的时候,调用方法进行对账号或密码的判断
            document.getElementById("w").onblur = f;
            document.getElementById("ww").onblur = f1;
    }


        function f() {
            var w = document.getElementById("w").value;
            // 获取账号的内容
            var a1 = /^\d{6,12}$/;
            // 内容与正则表达式进行判断是否符合
            var flag = a1.test(w);
            var s = document.getElementById("s_username");
            if (flag) {
                s.innerHTML = "验证成功";
            } else {
                s.innerHTML = "验证失败";
            }
            return flag;

        }

        function f1() {
            var ww = document.getElementById("ww").value;
            // 获取账号的内容
            var a1 = /^\d{6,12}$/;
            var flag = a1.test(ww);
            // 内容与正则表达式进行判断是否符合
            var s1 = document.getElementById("www");
            if (flag) {
                s1.innerHTML = "验证成功";
            } else {
                s1.innerHTML = "验证失败";
            }
            return flag;
        }

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

表单全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }

        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>

    <script>
        /*
          分析：
              1.全选：
                  * 获取所有的checkbox
                  * 遍历cb，设置每一个cb的状态为选中  checked

         */


        //1.在页面加载完后绑定事件
        window.onload = function(){
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function(){
                //全选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为选中  checked
                    cbs[i].checked = true;
                }
            }

            document.getElementById("unSelectAll").onclick = function(){
                //全不选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为未选中  checked
                    cbs[i].checked = false;
                }
            }

            document.getElementById("selectRev").onclick = function(){
                //反选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为相反
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            document.getElementById("firstCb").onclick = function(){
                //第一个cb点击
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //获取第一个cb

                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态和第一个cb的状态一样
                    cbs[i].checked =  this.checked;
                }
            }

            //给所有tr绑定鼠标移到元素之上和移出元素事件
            var trs = document.getElementsByTagName("tr");
            //2.遍历
            for (var i = 0; i < trs.length; i++) {
                //移到元素之上
                trs[i].onmouseover = function(){
                    this.className = "over";
                }

                //移出元素
                trs[i].onmouseout = function(){
                    this.className = "out";
                }

            }

        }



    </script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

动态表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
    </tr>


</table>


<script>

    //使用innerHTML添加
    document.getElementById("btn_add").onclick = function() {
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //获取table
        var table = document.getElementsByTagName("table")[0];

        //追加一行
        table.innerHTML += "\n" +
            "        "+id+"\n" +
            "        "+name+"\n" +
            "        "+gender+"\n" +
            "        删除\n" +
            "    ";
    }


    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }


</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>

        document.write("");for(var a=1;a<=9;a++){
            document.write("");for(var b=1;b<=a;b++){
                document.write("");}
            document.write("");}</script></head><body></body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Vue 
 
1.引入vue
 2.创建vue对象
 3.编写input标签，引用v-model指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app" >
    <input v-model="username">
    {{username}}
</div>

<!--1.引入vue文件-->
<script src="vue.js"></script>
<script>

    //2.创建Vue的核心代码
    new Vue({
        el:"#app",
        data(){
            return{
                username:""
            }
        }
    })

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
vue的基本指令
 
  
 v-bind：为htm的标签href/css 动态的获取值
v-model：在表单元素上创建双向数据绑定
 用法: 
 <div id="app" >
    <input v-model="url">

    <a v-bind:href="url">点位跳转</a>

    <input v-model="username">
    {{username}} 
</div>

<!--1.引入vue文件-->
<script src="vue.js"></script>
<script>

    //2.创建Vue的核心代码
    new Vue({
        el:"#app",
        data(){
            return{
                url:"",
                username:""
            }
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 
 v-on 为HTML标签绑定事件 
 使用： 
 <div id="app" >
<!--    单机事件-->
    <input type="button" value="按钮1" v-on:click="show()">
    <input type="button" value="按钮2" @click="show()">
<!--    失去焦点-->
    <input type="button" value="按钮3" v-on:blur="show()">
</div>

<!--1.引入vue文件-->
<script src="vue.js"></script>
<script>

    //2.创建Vue的核心代码
    new Vue({
        el:"#app",
        methods:{
            show(){
                alert("我被点击了")
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 
 v-if 等于if
v-show 满足这个条件时，执行 
 <div id="app" >
<div v-if="count == 1" >div 1</div>
<div v-else-if="count == 2" >div 2</div>
<div v-else="count == 3" >div 3</div>
<div v-show="count == 3" >div show</div>
    <input v-model="count">
</div>
<!--1.引入vue文件-->
<script src="vue.js"></script>
<script>

    //2.创建Vue的核心代码
    new Vue({
        el:"#app",
        data() {
            return {
                count: 3
            }
        }
    })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 
 v-for 遍历数组 （addr in addrs）addr 遍历 addrs数组 
 <!--    遍历当前数组-->
<div v-for="addr in addrs">
    {{addr}}  <br>
</div>
<!--遍历当前数组并且输出序号-->
    <div v-for="(addr,i) in addrs">
       {{i+1}} {{addr}}  <br>
    </div>
</div>
<!--1.引入vue文件-->
<script src="vue.js"></script>
<script>

    //2.创建Vue的核心代码
    new Vue({
        el:"#app",
        data() {
            return {
                count: 3,
                addrs:["北京","上海","西安"]
            }
        }
    })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 
 页面加载完成，发送异步请求，加载数据 
 <script>

    //2.创建Vue的核心代码
    new Vue({
        el:"#app",
        data() {
            return {
                count: 3,
                addrs:["北京","上海","西安"]
            }
        },
        //页面加载完成，发送异步请求，加载数据
        mounted(){
            alert("加载完成")
        }
    })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 
 案例：查询所有  
  
  
 1.发送axios请求 
  
 2.将查询出的数据赋值给brands字段 
  
 3.tr标签遍历显示 
   
          <tr v-for="(brand,i) in brands" align="center">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>

<script>

    //2.创建Vue的核心代码
    new Vue({
        el:"#app",
        data() {
            return {
                brands:[]
            }
        },
        //页面加载完成，发送异步请求，查询数据
        mounted(){
                    var _this = this;
                    axios({
                        method:"get",
                        url:"http://localhost:8080/brand-demo/selectAllServlet"
                    }).then(function (resp) {
                        //查询到的数据，返回给模型上
                        _this.brands = resp.data;
                    })
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 
   
  新增数据
 1.发送axios请求时，字段用了v-model，所以将所有字段的信息，赋值给data，发送请求
 2.请求成功后，查看后端响应的数据，返回succes，页面完成跳转 
      <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">启用<br>

        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>
<script src="js/axios-0.18.0.js"></script>

<script src="js/vue.js"></script>

<script>

    new Vue({
        el: "#app",
        data(){
            return {
                brand:{}
            }
        },
        methods:{
            submitForm(){
                // 发送ajax请求，添加
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-demo/addServlet",
                    //获取data数据
                    data:_this.brand
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if(resp.data == "success"){
                        location.href = "http://localhost:8080/brand-demo/brand.html";
                    }
                })

            }
        }
    })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 
   
   
   
     Element概述 
    
  https://element.eleme.cn/#/zh-CN ->网站
 创建步骤： 
  <!--1.引入文件-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<!--2.创建对应的div标签和vue对象-->
<div id="app">> </div>


<script>
    //2.创建Vue的核心代码
    //2.创建Vue的核心代码
    new Vue({
        el:"#app"
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 
  复制的代码要放到vue对象的div中 
  


                    相关阅读:

                    
spring与spring boot升级官方指导文档                            

写出你所知道的测试工具，并写出他们的用途和优缺点                            

uni-app集成mui-player                            

【math】利用Cardano方法对一元三次方程求解及python实现                            

《国际服务贸易》期末复习题 及答案参考                            

设计模式学习（二十一）：命令模式                            

web前端网页实例：深度剖析与实践指南                            

SpringBoot学习(二)---基础配置                            

TeamTalk梳理概括                            

纸面石膏板适用于AS 1530.1澳标阻燃标准吗？                            

                    
                

                    原文地址：https://blog.csdn.net/qq_48690030/article/details/127922511
                

            
                
                    最新文章
                
                
                    
攻防演习之三天拿下官网站群                            

数据安全治理学习——前期安全规划和安全管理体系建设                            

企业安全 | 企业内一次钓鱼演练准备过程                            

内网渗透测试 | Kerberos协议及其部分攻击手法                            

0day的产生 | 不懂代码的"代码审计"                            

安装scrcpy-client模块av模块异常，环境问题解决方案                            

leetcode hot100【LeetCode 279. 完全平方数】java实现                            

OpenWrt下安装Mosquitto                            

AnatoMask论文汇总                            

【AI日记】24.11.01 LangChain、openai api和github copilot                            

                    
                
            

            
                
                    热门文章
                
                
                    
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！                            

奉劝各位学弟学妹们，该打造你的技术影响力了！                            

五年了，我在 CSDN 的两个一百万。                            

Java俄罗斯方块，老程序员花了一个周末，连接中学年代！                            

面试官都震惊，你这网络基础可以啊！                            

你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法                            

心情不好的时候，用 Python 画棵樱花树送给自己吧                            

通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！                            

13 万字 C 语言从入门到精通保姆级教程2021 年版                            

10行代码集2000张美女图，Python爬虫120例，再上征途                            

                    
                
            

        

    
        
            
                
                    Copyright © 2022 侵权请联系2656653265@qq.com   
                    京ICP备2022015340号-1
                
                
                    正则表达式工具
                    cron表达式工具
                    密码生成工具
                
                
                    
                    京公网安备 11010502049817号
                
            
        
    
  

         
             ");
                document.write(a+"*"+b+"="+a*b+"  ");
                document.write("