first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/18课程/class18_2/课程/2021-01-07/index.html
+++ b/历届学生/18课程/class18_2/课程/2021-01-07/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .box {
+            width: 300px;
+            height: 300px;
+            background: red;
+        }
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="app" v-cloak>
+        <h2>{{msg}}</h2>
+        <img :src="img" alt="">
+        <ul>
+            <li v-for="v,index in list " :key="index">{{index}} | {{v.name}}</li>
+        </ul>
+
+        <ul>
+            <li v-for="val,key,i in obj" :key="i">{{i}} | {{key}} | {{val}}</li>
+        </ul>
+
+        <h2 v-if="isVip == 1">游客查看内容</h2>
+        <h2 v-else-if="isVip == 2">普通vip查看内容</h2>
+        <h2 v-else-if="isVip == 3">超级vip查看内容</h2>
+        <h2 v-else>错误页面</h2>
+
+        <h3 v-show="isShow">isShow</h3>
+        <div v-html="test"></div>
+        <div v-text="test"></div>
+
+        <button @click="hello('你好')">点我</button>
+
+        <div class="box" @click="father">
+            <button @click.stop.once="child">子元素点击</button>
+        </div>
+
+        <input type="text" v-model="UserName" placeholder="请输入用户名">
+        <!-- <p>{{UserName}}</p> -->
+
+        <span v-once>{{ UserName }}</span>
+    </div>
+</body> 
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    // v-bind 将变量绑定到标签的属性上
+    // 简写 ：
+    // v-for 
+    // v-if 会根据条件真假 对元素进行 增删
+    // v-show 会根据条件真假 对元素进行display设置
+    // v-on  @
+    var vm = new Vue({
+        el: '.app',
+        data: {
+            test: '<h2>v-html</h2>',
+            msg: '这是vue',
+            img: 'https://www.baidu.com/img/bd_logo1.png',
+            UserName: '1111',
+            list: [
+                {id:1,name:'测试1'},
+                {id:2,name:'测试2'},
+                {id:3,name:'测试3'},
+            ],
+            obj: {
+                name: '张三',
+                age: 18
+            },
+            isVip: 4,//1游客，2普通vip，3超级vip
+            isShow: false,
+        },
+        methods: {
+            father() {
+                alert("father")
+            },
+            child() {
+                alert("child")
+            },
+            hello(name) {
+                console.log(this.msg);
+                alert(name)
+            }
+        }
+    });
+
+    // var data = {
+    //     age: 18,
+    //     name: '张三'
+    // };
+
+    // document.querySelector("h2").innerText = data.name
+
+    // Object.defineProperty(data,"name", {
+    //     get: function() {
+    //         return "李四";
+    //     },
+    //     set: function(newValue) {
+    //         console.log(newValue);
+    //         document.querySelector("h2").innerText = newValue
+
+    //     },
+    // })    
+    // console.log(data.name);
+
+</script>
+</html>