From 167bf572a08f61981cb23a399e0123152b857be6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=93=E6=96=87=E8=90=8D?= <1721629528@qq.com>
Date: Wed, 13 Apr 2022 09:20:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BA=864=E6=9C=887=E5=92=8C?=
 =?UTF-8?q?4=E6=9C=888=E7=9A=84=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../1.html"                                   |  0
 .../DetailRegister.html"                      | 63 ++++++++++++++++++
 .../details.css"                              | 61 +++++++++++++++++
 .../ColorChange.html"                         | 66 +++++++++++++++++++
 4 files changed, 190 insertions(+)
 create mode 100644 "\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/1.html"
 create mode 100644 "\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/DetailRegister.html"
 create mode 100644 "\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/details.css"
 create mode 100644 "\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-08-vue\344\275\234\344\270\232/ColorChange.html"
diff --git "a/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/1.html" "b/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/1.html"
new file mode 100644
index 0000000..e69de29
diff --git "a/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/DetailRegister.html" "b/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/DetailRegister.html"
new file mode 100644
index 0000000..9a96630
--- /dev/null
+++ "b/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/DetailRegister.html"
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>注册</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <link rel="stylesheet" href="./details.css">
+</head>
+<body>
+    <!-- 作业：
+        1.用户注册页改成 vue去实现，
+        2.需要用户名 密码，确认密码，性别（勾选框），省份（下拉框），
+        3.需要验证规则(用户名 密码许验证，其余不能为空) -->
+        <div id="DetailRegister">
+            <h1>注册</h1>
+            <table id="biaoge">
+                <tr>
+                    <td id="first">用&nbsp;户&nbsp;名:</td>
+                    <td ><input type="text" placeholder="请输入用户名"></td>
+                </tr>
+                <tr>
+                    <td id="first">密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
+                    <td><input type="password" id="pwd" placeholder="请输入密码"></td>
+                </tr>
+                <tr>
+                    <td id="first"> 确认密码:</td>
+                    <td><input type="password" id="repwd" placeholder="请确认密码"></td>
+                </tr>
+                <tr>
+                    <td id="first"> 性&nbsp;&nbsp;&nbsp;&nbsp;别:</td>
+                    <td id="sex"><input type="radio" value="男" name="sex" id="man"><span>男</span>
+                        <input type="radio" value="女" name="sex" id="woman"><span>女</span></td>
+                </tr>
+                <tr>
+                    <td id="first">所在省份:</td>
+                    <td>
+                        <select name="" id="province">
+                            <option>北京</option>
+                            <option>广州</option>
+                            <option>福建</option>
+                            <option>江西</option>
+                            <option>广西</option>
+                            <option>河南</option>
+                            <option>湖南</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td id="first"></td>
+                    <td>
+                        <button id="btn">提交</button>
+                    </td>
+                </tr>
+        </table>
+        </div>
+        <script>
+            new Vue({
+                
+            })
+        </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/details.css" "b/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/details.css"
new file mode 100644
index 0000000..5837b8f
--- /dev/null
+++ "b/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-07-vue\344\275\234\344\270\232/details.css"
@@ -0,0 +1,61 @@
+html{
+    background-color: #7A9AD7;
+}
+#DetailRegister{
+    margin: 100px auto;
+    width: 320px;
+    height: 400px;
+    border: 1px solid #7A9AD7;
+    background-color: white;
+}
+#biaoge{
+   margin-left: 20px;
+    background-color: white;
+}
+h1{
+    text-align: center;
+    color: #7A9AD7;
+    background-color:white;
+}
+#biaoge tr{
+    background-color: white;
+    display: block;
+    margin-bottom: 20px;
+}
+
+input{
+    
+    vertical-align: bottom;
+    width: 133px;
+    border: none;
+    border-bottom: 1px solid #A5BAE5;
+}
+#btn{
+    width: 135px;
+    height: 35px;
+    border: 1px solid #7A9AD7;
+    color: #F6F6F6;
+    background-color: #7A9AD7;
+    margin-top: 10px;
+    border-radius: 5%;
+}
+#first{
+    color: #8EA5DD;
+    width: 80px;
+    padding-left: 20px;
+} 
+#sex input {
+    width: 25px;
+    height: 18px;
+}
+#province{
+    color: white;
+    background-color: #A5BAE5;
+    width: 133px;
+    line-height: 20px;
+    height: 23px;
+    padding-left: 50px;
+}
+span{
+    color:#7A9AD7 ;
+}
\ No newline at end of file
diff --git "a/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-08-vue\344\275\234\344\270\232/ColorChange.html" "b/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-08-vue\344\275\234\344\270\232/ColorChange.html"
new file mode 100644
index 0000000..b136f43
--- /dev/null
+++ "b/\346\230\223\346\226\207\350\220\215\347\232\204\344\275\234\344\270\232/2022-04-08-vue\344\275\234\344\270\232/ColorChange.html"
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+ <meta charset="UTF-8">
+ <title>自定义指令实现随机背景</title>
+ <style type="text/css" media="screen">
+	#app{
+	width: 999px;
+	height: 999px;
+	}
+ </style>
+</head>
+<body>
+ <h3>自定义指令</h3>
+ <div id="app" v-change-background-color="myBgColor">
+ <h3 ><input type="text" v-model="myBgColor" placeholder="请输入16进制颜色"></h3>
+ </div>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+ <script>
+	var exampleData = {
+	myBgColor: "#5FCA34",
+	};
+	new Vue({
+	el: "#app",
+	data: exampleData,
+	methods:{
+		getRandom:function(){
+		var r=Math.floor(Math.random()*256);
+		var g=Math.floor(Math.random()*256);
+		var b=Math.floor(Math.random()*256);
+		var a=Math.random().toFixed(1);
+		return `rgba(${r},${g},${b},${b})`
+		}
+	},
+  directives: {
+   changeBackgroundColor: {
+    bind: function(el, bindings) {
+		var r=Math.floor(Math.random()*256);
+		var g=Math.floor(Math.random()*256);
+		var b=Math.floor(Math.random()*256);
+		var a=Math.random().toFixed(1);
+ 
+     el.style.backgroundColor =`rgba(${r},${g},${b},${a})`;
+     console.log("绑定成功");
+    },
+    update: function(el, bindings) {
+     console.log('已更新数据');
+     var r=Math.floor(Math.random()*256);
+                    var g=Math.floor(Math.random()*256);
+                    var b=Math.floor(Math.random()*256);
+                    var a=Math.random().toFixed(1);
+     el.style.background = `rgba(${r},${g},${b},${a})`
+    }, //更新数据
+ 
+   }
+  }
+ });
+ </script>
+</body>
+ 
+</html>
+	
+
+        
+
+ 
\ No newline at end of file
-- 
Gitee


用户名:
密码:
确认密码:
性别:	男 + 女
所在省份:	+ +
	+ +