first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/罗朝/2019-05-14/指令学习.html
+++ b/历届学生/罗朝/2019-05-14/指令学习.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Vue 指令</title>
+  <script src="https://vuejs.org/js/vue.js"></script>
+</head>
+<body>
+  
+
+  <div id="app">
+    {{ message }}
+    <a :href="address" target="_blank">百度</a>
+    <img :src="vueLogo" :alt="message">
+    <button v-on:click="clickMore">点我</button>
+    <p v-html="h2">
+    </p>
+
+    <input @input="clickTwo" v-model="UserInfo.UserName" type="text" placeholder="请输入账户名">
+
+
+    <p v-if="showStatus">未登录</p>
+    <p v-else>已经登录</p>
+    <button @click="changeLoginStatus">切换登录状态</button>
+
+    <p v-for="(a,index) in list" :class="index == 0 ? 'hello' : '' "> {{a}} | {{ index }}</p>
+
+  </div>
+
+
+  <script>
+    /**
+     * 
+     * v-bind: 把莫个变量绑定到标签的莫个属性上
+     * 简写  ":"
+     * 
+     * v-on:  为莫个标签绑定事件
+     * 简写：@
+     * 
+     * v-html： 把字符串解析成html渲染到页面上，类似 innerhtml
+     * 
+     * v-model: 专门用来获取存放输入框里面用户输入的数据
+     * 
+     * v-if : 条件判断，根据条件的真和假决定显示还是隐藏元素
+     * v-else
+     * 
+     * v-if
+     * 
+     * v-else-if
+     * v-else-if
+     * v-else
+     * 
+     * v-for 专门用来变量数组渲染页面的
+     *  
+     */
+    new Vue({
+      el: "#app",
+      data: {
+        message: '你好我是Vue',
+        address: 'http://www.baidu.com',
+        vueLogo: 'https://cn.vuejs.org/images/logo.png',
+        h2: "<h2>我是h2标签</h2>",
+        UserInfo: {
+          UserName: null
+        },
+        showStatus: true,
+        list: [
+          4,5,7,2,4,7
+        ]
+      },
+      // Vue开发中基本上所有的事件处理函数都放在  methods: {} 里面
+      methods: {
+        clickMore() {
+          alert(this.message)
+          //this.clickTwo()
+        },
+
+        clickTwo() {
+          console.log(this.UserName)
+        },
+        changeLoginStatus() {
+          this.showStatus = !this.showStatus
+        }
+      },
+    });
+
+  </script>
+
+</body>
+</html>