first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/font-end-nine/每天上课/2022-07-09/index.html
+++ b/历届学生/font-end-nine/每天上课/2022-07-09/index.html
@@ -0,0 +1,97 @@
+<!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学习</title>
+    <style>
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="app" v-cloak>
+        <h2 v-once>{{ text }}</h2>
+        <div v-text="message"></div>
+
+        <ul>
+            <li v-for="v,i in news" :key="i" @click="enterInfo(v)">{{ i }} | {{ v.title }}</li>
+        </ul>
+
+        <ul>
+            <li v-for="v,k in obj">{{ k }} | {{ v }}</li>
+        </ul>
+
+        <img :src="imgSrc" :alt="text">
+
+        <div v-if=" type == 0 ">未开vip</div>
+        <div v-else-if=" type == 1 ">普通vip</div>
+        <div v-else-if=" type == 2 ">超级vip</div>
+        <div v-else-if=" type == 3 ">至尊vip</div>
+        <div v-else>请登录</div>
+
+
+        <div v-show="isShow">show true</div>
+
+        <input type="text" placeholder="输入用户名" v-model="userName">
+        <button @click="UserLogin">登 录</button>
+
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+<script>
+
+    // m v vm
+    // vue 指令 就是一些特殊的  html 标签属性
+    //   v-text 没啥用
+    //   v-html 把内容渲染中html结构
+    //   v-for 循环数组 & 对象
+    //    一定要加 key
+    //   v-bind  帮变量绑定到标签的属性上
+    //    简写 ：
+    //   v-if    根据条件，来显示隐藏元素（不符合条件的html将被删除）
+    //   v-show  
+    //   v-model  一般给输入框使用的，来获取输入框用户输入的值
+    //   v-on
+    //   简写 @
+    var vm = new Vue({
+        el: '.app',
+        // 所有的变量都定义在data中（数据的）
+        data: {
+            text: '我是测试的文字',
+            message: `<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">`,
+            news: [
+                { id: 1, title: '新闻1' },
+                { id: 2, title: '新闻2' },
+                { id: 3, title: '新闻3' },
+                { id: 4, title: '新闻4' },
+            ],
+            obj: { id: 1, title: '新闻1' },
+            imgSrc: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
+            type: 0,
+            isShow: true,
+            userName: ''
+        },
+        // 存放所有的方法
+        methods: {
+            UserLogin() {
+                console.log("UserLogin: ", this.userName);
+                this.test();
+            },
+            test() {
+                console.log("test");
+            },
+            enterInfo(v) {
+                console.log(v);
+            }
+        }
+
+    })
+
+</script>
+
+</html>