first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/罗朝/2019-06-03/index.html
+++ b/历届学生/罗朝/2019-06-03/index.html
@@ -0,0 +1,135 @@
+<!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://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
+  <style>
+    .on {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  
+
+
+  <div id="app">
+    
+    <input v-model="userInput" type="text" placeholder="输入备忘内容">
+    <button @click="addList">提交</button>
+  
+
+    <ul v-if="listArray.length != 0">
+      <li v-for="(item,index) in listArray" 
+          :key="index"
+          @click="changeOn(index)"
+          :class=" index ==  currentIndex ? 'on' : ''  "> 
+          {{ item }} 
+        <span @click="deleteTag(index)"> x </span>
+      </li>
+    </ul>
+
+    <p v-else>抱歉，没有数据</p>
+
+    <!-- <aa-button @father="getChildEvent" :a="list"/> -->
+    
+    <v-jubu></v-jubu>
+    
+  </div>
+
+  <script>
+    // 实现一个任务便签
+    // 组件 ？积木 
+    // 全局注册
+    // 局部注册 
+    // 父子组件
+    // 父子组件的数据传递
+    // 两种方式：
+    // 父 --> 子 props
+    // 子 --> 父 ，不允许 props，但是可以通过 $emit 触发事件来回调 提交数据给父
+    // 官方文档地址：https://cn.vuejs.org/v2/api/#vm-emit
+
+    // 局部注册
+    // 1: 先定义局部组件
+    // 2: 在你需要用的地方(父组件)进行注册，然后使用。
+
+    // 全局注册 
+    // 官方文档地址：https://cn.vuejs.org/v2/guide/components-registration.html
+    // Vue.component('aa-button', {
+    //   props: ['a','b'],
+    //   data () {
+    //     return {
+         
+    //     }
+    //   },
+    //   methods: {
+    //     hello() {
+    //       this.$emit("father","aa-button 的数据")
+    //     }
+    //   },
+    //   template: `
+    //     <ul> 
+    //       <li @click="hello" v-for="(item,index) in a" :key="index"> {{ item.title }} </li>  
+    //     </ul>
+    //   `
+    // });
+
+
+    // 局部注册
+    var childenComponents = {
+      template: `<h2>{{ msg }}</h2>`,
+      data () {
+        return {
+          msg: "我是局部注册的组件"
+        }
+      },
+      methods: {
+
+      }
+    };
+
+    new Vue({
+      el: '#app',
+      data : {
+        userInput: null,
+        listArray: [],
+        currentIndex: null,
+        list: [
+            { id: 1,title: '哈哈哈哈' },
+            { id: 2,title: '顶顶顶顶' }
+        ],
+        listArr: [
+            { id: 1,title: '哈哈哈哈wwwww' },
+            { id: 2,title: '顶顶顶顶www' }
+        ]
+      },
+      created() {
+        console.log(this.userInput)
+      },
+      methods: {
+        addList() {
+          this.listArray.push(this.userInput)
+          this.userInput = null
+        },
+        deleteTag(key) {
+          console.log(key)
+          this.listArray.splice(key,1)
+        },
+        changeOn (key) {
+          this.currentIndex = key
+        },
+        getChildEvent (key) {
+          console.log("父组件接收到子组件传递过来的数值为：", key)
+        }
+      },
+      components: {
+        'v-jubu': childenComponents
+      },
+    })
+  </script>
+
+</body>
+</html>