first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-10/每天课程/2023-03-21/index.html
+++ b/历届学生/front-end-team-10/每天课程/2023-03-21/index.html
@@ -0,0 +1,129 @@
+<!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>
+
+        <h1 ref="fff">测试 {{ demos }}</h1>
+
+        <h2> {{ message }} </h2>
+        <a :href="aParams.href"> {{ aParams.title }} </a>
+
+        <ul>
+            <li v-for="v,i in newsList" :key="i" v-text="v.content">
+            </li>
+        </ul>
+
+
+        <div v-show="isVip"> 广告 </div>
+
+        <div v-if="vip == 0">普通</div>
+        <div v-else-if="vip == 1">会员</div>
+        <div v-else>超级会员</div>
+
+        <input v-model="userName" type="text" placeholder="输入用户名">
+        <input v-model="userPwd" type="password" placeholder="输入密码">
+        <div @click="Login">
+            <div class="test" @click.stop.right="test">登录</div>
+        </div>
+
+    </div>
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
+
+<script>
+    // data 是用来存放变量
+    // el 
+
+    // 指令（vue自定义标签属性，全局）
+    // v-bind:  简写 :
+    // v-for 
+    //  注意：循环需要加key，来标注 唯一性
+    // v-show 结果为true显示，为false因此
+    // v-if 
+    //   区别：v-show不符合条件不会删除元素，只是对元素进行 display none
+    //         v-if 把不符合条件的元素直接删除
+    // v-html  v-text
+    // v-model 只能用户输入框，input textarea section
+    // v-on  简写 @
+    // created ajax 请求
+    // mounted 用来获取或者操作网页元素的
+    // computed 会进行计算缓存
+    var vm = new Vue({
+        el: '.app',
+        beforeCreate() {
+            console.log("beforeCreate: ", this.message);
+        },
+        created() {
+            console.log("created: ", this.message);
+            console.log("created: ", this.$refs.fff);
+        },
+        mounted() {
+            console.log("mounted: ", this.message);
+            console.log("created: ", this.$refs.fff);
+        },
+        beforeUpdate() {
+            console.log("beforeUpdate");
+        },
+        updated() {
+            console.log("updated");
+        },
+        destroyed() {
+            alert("destroyed")
+        },
+        data: {
+            message: '我的第一个vue程序',
+            vip: 0, // 0普通 1会员 2超级会员 
+            isVip: false,
+            userPwd: '',
+            userName: '',
+            aParams: {
+                title: '点击我',
+                href: 'https://www.baidu.com/'
+            },
+            newsList: [
+                { id: 1, title: '新闻1', content: '<h2>你好1</h2>' },
+                { id: 2, title: '新闻3', content: '<h2>你好2</h2>' },
+                { id: 3, title: '新闻4', content: '<h2>你好3</h2>' }
+            ]
+        },
+        watch: {
+            // aParams() {},
+            aParams: {
+                handler(newVal, oldVal) {
+                    console.log(newVal, oldVal);
+                },
+                deep: true
+            }
+        },
+        methods: {
+            Login() {
+                console.log("登录");
+                //    console.log("用户登录:", this.userPwd, this.userName);
+            },
+            test() {
+                console.log("test");
+            }
+        },
+        computed: {
+            demos() {
+                return 1 + 2
+            }
+        }
+    })
+</script>
+
+</html>