first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/陈一航/2020-04-21/index.html
+++ b/历届学生/陈一航/2020-04-21/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <style>
+    .red {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+
+
+  <div id="app">
+    <h2>{{getIndexData}}</h2>
+
+    <input v-model="phone" type="number" placeholder="输入手机号">
+
+    <h2 :class="{ red: isRed }">测试1</h2>
+
+    <h2 :class="isRed ? 'red' : '' ">测试2</h2>
+
+    <h2>仿照微信支付键盘</h2>
+
+    <h-header @dddd="FatherClick" :content="list" title="测试标题1"></h-header>
+
+<!--    <h-header @dddd="FatherClickTwo" title="测试标题2"></h-header>-->
+
+    <!--3 使用局部组件-->
+    <v-jubu ref="hello">
+<!--      <template v-slot:like>-->
+<!--        收藏-->
+<!--      </template>-->
+        <div slot="like" class="like">收藏</div>
+    </v-jubu>
+
+  </div>
+
+
+</body>
+
+<script>
+  // watch 监听数据的变化，可以获得新数值和旧数值
+  // computed 计算属性 作用和 methods类似，计算结果会被缓存（变量没有发生改变）
+  // 组件  实现html的复用，类似于js的function函数
+  // 全局组件
+  // 局部组件
+
+  // 组件间数据传递
+  // 父组件 ---> 子组件
+  // props
+  // 子组件 ---> 父组件
+  // $emit
+
+  // 父子互调(数据的访问和修改，方法) $children $parent $root  ，  $refs
+
+  //
+
+
+  // 全局组件
+  Vue.component('h-header', {
+    // props: ['it'],
+    props: {
+      content: Array,
+      // content: {
+      //   type: Array, // 这个变量 content 能存放的数据类型
+      //   default: []
+      // },
+      title: {
+        type: String,
+        default: ""
+      }
+    },
+    data() {
+      return {
+        message: '我是组件 v-header'
+      }
+    },
+    methods: {
+      submit() {
+        this.$emit("dddd","3")
+      }
+    },
+    template: `
+     <div>
+       <button @click="submit">提交</button>
+       <h2>{{title}}</h2>
+       <ul>
+         <li v-for="(item,index) in content">{{item.id}}</li>
+       </ul>
+     </div>
+    `
+  });
+
+  // 局部组件 1：导入（定义）组件
+  var JuBuZuJian = {
+    data() {
+      return {
+        mesaage: '我是局部注册的组件'
+      }
+    },
+    methods: {
+      setChilder() {
+        return "哈哈哈哈"
+      }
+    },
+    template: `
+     <div>
+       <h2>{{mesaage}}</h2>
+       <h3>
+         <slot name="like"></slot>
+       </h3>
+     </div>
+    `
+  }
+
+  new Vue({
+    el: '#app',
+    data: {
+      message: 'dededede',
+      phone: '',
+      isRed: false,
+      list: [
+        {id:2},
+        {id:3},
+        {id:4}
+      ]
+    },
+    // 局部组件 2： 注册局部组件
+    components: {
+      'v-jubu':JuBuZuJian
+    },
+
+    created() {
+      // this.getIndexData()
+    },
+    mounted() {
+      // console.log(this.message)
+      this.$children[1].$data.mesaage = "sddddd"
+      console.log(this.$children[1].setChilder())
+
+      console.log(this.$refs.hello.setChilder())
+
+    },
+    methods: {
+      FatherClick(it) {
+        alert("登录："+it)
+      },
+      FatherClickTwo(it) {
+        alert("注册："+it)
+      }
+      // 发送ajax请求数据
+      // getIndexData() {
+      //   console.log("发送ajax请求数据")
+      // }
+    },
+    computed: {
+      getIndexData() {
+        return "hello"
+      }
+    },
+    watch: {
+      phone(newVal,oldVal) {
+        console.log("newVal:",newVal)
+        console.log("oldVal:",oldVal)
+      }
+    }
+  })
+
+</script>
+</html>