first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/逯帅帅/每日课程/2021-03-23/index.html
+++ b/历届学生/逯帅帅/每日课程/2021-03-23/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+
+ <div class="main" v-cloak>
+    <h2>{{ hello }}</h2>
+     <ul v-once>
+         <li v-for="(item,index) in list">{{ index }} {{ item.name }}</li>
+     </ul>
+
+     <ul>
+         <li v-for="(value,key) in obj">{{ key }} {{ value }}</li>
+     </ul>
+
+     <img :src="img" alt=""/>
+
+     <p v-if="isLogin == '1' ">1</p>
+     <p v-else-if="isLogin == '2'">2</p>
+     <p v-else-if="isLogin == '3'">3</p>
+     <p v-else>都不满足</p>
+
+     <h2 v-show="isShow">v-show</h2>
+
+     <div v-html="content"></div>
+
+     <input type="text" v-model="userName" placeholder="请输入账户">
+     {{userName}}
+
+     <button @click="test">点我</button>
+ </div>
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+  // vue 指令 就是一堆用在标签上的属性
+  // v-for 循环数据到页面上的
+  // v-bind 绑定标签的属性 简写 :
+  // v-if 根据条件的真假，决定div是显示
+  // v-show 根据条件的真假，决定div是显示
+  // 差别1：v-if会删除dom元素 v-show 是display 进行隐藏
+  // 差别2：v-if不适合用在数据量大的场景，
+  // v-html 把html渲染到页面上
+  // v-text 把内容渲染到页面上
+  // v-model 用在输入框上
+  // v-on 绑定事件  @
+  // watch 用来实现对 变量的监听
+  // computed 用来实现计算缓存的
+  var vm = new Vue({
+    el: '.main',
+    data: {
+      hello: '这是第一个vue项目',
+      img: 'https://www.baidu.com/img/dong_47f08bb2dd6546c9a788f71d7463ce48.gif',
+      isLogin: '5',
+      userName: '张三',
+      isShow: false,
+      content: '<h2>这是测试标题</h2>',
+      list: [
+        {id:1,name: '哈哈哈1'},
+        {id:2,name: '哈哈哈2'},
+        {id:3,name: '哈哈哈3'},
+      ],
+      obj: {
+        id: 1,
+        name: 222
+      }
+    },
+    methods: {
+      test() {
+        this.test2();
+      },
+      test2() {
+        alert(this.userName)
+      }
+    }
+  });
+
+</script>
+</html>