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/每天课程/2020-04-12/index.html
+++ b/历届学生/front-end-team/每天课程/2020-04-12/index.html
@@ -0,0 +1,115 @@
+<!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>
+        <h1 v-once>{{ test }}</h1>
+        <h2>{{ hello }}</h2>
+        <a :href="baidu">baidu</a>
+        <img :src="img" alt="">
+
+        <ul>
+            <li v-for="item,index in newsList" @click.stop.prevent="demos(index)">
+                {{ item.title }}
+            </li>
+        </ul>
+
+
+        <ul>
+            <li v-for="value,key in list">{{ key }} {{ value }}</li>
+        </ul>
+
+        <div v-html="htmlTest"></div>
+
+        <div v-if="vip == 1">vip1</div>
+        <div v-else-if="vip == 2">vip2</div>
+        <div v-else-if="vip == 3">vip3</div>
+        <div v-else>等级非法</div>
+
+
+        <div v-show="islogin">登录才可以查看</div>
+
+
+        <input type="text" v-model.trim="userName">
+
+        <button @click="login">点我</button>
+
+        <div>{{ jil }}</div>
+
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    // v-bind  将data中的变量绑定到标签的属性上 
+    //  简写 :
+    // v-for 可以遍历数组和对象
+    // v-html 显示 html 到网页上
+    // v-text 显示纯文本
+    // v-if -v-else
+    // v-show 
+    //  v-if 和 v-show 区别
+    //  v-if 多分支的复杂情况进行判断  把不符合条件的html删除
+    //  v-show 只适合简单情况        把不符合条件的html进行 display:none 
+    // v-on:事件类型="事件处理函数"  
+    //  简写：@事件类型="事件处理函数"  @click="test"
+    // v-model 给输入框用的
+    // v-pre 原样输出
+    // computed 计算属性  当参与计算的数值未发生变化，第二次调用不进行计算而是返回上一次的结果
+    //  实现 get（读）  set（写） 监听
+    // methods  存放方法
+    // watch    侦听器（监视器）
+    var vm = new Vue({
+        el: '.app',
+        data: {
+            test: '你好，vue.js',
+            hello: '哈哈哈哈哈哈',
+            baidu: 'https://www.baidu.com/',
+            img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
+            newsList: [
+                { id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
+                { id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
+                { id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
+            ],
+            list: { name: '刘兵', age: 18 },
+            htmlTest: '<h2><span>测试</span></h2>',
+            vip: 1, // 1  2  3
+            islogin: true,
+            userName: '',
+        },
+        methods: {
+            login() {
+                console.log(this.userName);
+            },
+            demos(index) {
+                console.log("demo 方法: ", index);
+            }
+        },
+        computed: {
+            jil() {
+                return 1000 * 100000000
+            }
+        },
+        watch: {
+            test(newvalue,oldvalue) {
+                console.log("oldvalue: ",oldvalue);
+                console.log("newvalue: ",newvalue);
+            }
+        }
+    })
+
+</script>
+
+</html>