// 假设有一个简单的Vue实例
new Vue({
  data: {
    message: 'Hello Vue!'
  },
  template: `<div>{{ message }}</div>`
}).$mount('#app');

// 响应式系统的核心函数示例
function defineReactive(obj, key, val) {
  const dep = new Dep(); // 创建一个依赖收集器

  // 使用ES5的Object.defineProperty
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      dep.addSub(Dep.target); // 添加订阅者到依赖收集器
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // 通知所有订阅者
    }
  });
}

// Watcher类示例
class Watcher {
  constructor(vm, expOrFn, cb) {
    Dep.target = this; // 设置当前Watcher为目标订阅者
    this.cb = cb;
    this.value = expOrFn(vm); // 触发属性访问，创建依赖
    Dep.target = null; // 访问结束后清除目标订阅者
  }

  update() {
    const oldValue = this.value;
    this.value = this.get(); // 重新获取最新值，建立新的依赖
    if (oldValue !== this.value) {
      this.cb(this.value); // 值有变化时执行回调
    }
  }

  get() {
    // 触发属性访问，创建依赖
  }
}

// 依赖收集器Dep的示例
class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    this.subs.forEach(sub => sub.update()); // 通知所有订阅者执行更新
  }
}

<template>
  <div id="app">
    <div class="chat-container">
      <div class="chat-message" v-for="(message, index) in messages" :key="index">
        <span class="chat-message-content">{{ message }}</span>
      </div>
    </div>
    <input v-model="userInput" @input="type" type="text" placeholder="请输入您的消息" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      messages: [],
      userInput: '',
      typingSpeed: 100, // 打字速度，单位毫秒
    };
  },
  methods: {
    type() {
      if (this.userInput.length === 0) {
        return;
      }
      const message = this.userInput.substring(0, this.messages.length + 1);
      this.messages.push(message);
      setTimeout(() => {
        this.userInput = '';
      }, this.typingSpeed);
    },
  },
};
</script>

<style>
.chat-container {
  height: 400px;
  overflow-y: scroll;
}
.chat-message {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.chat-message-content {
  white-space: pre-wrap;
}
input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
}
</style>

<a href="https://www.example.com">访问Example网站</a>

<router-link to="/about">关于我们</router-link>

<router-link to="/about" @click="handleClick">关于我们</router-link>

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <el-form :model="scope.row" :rules="rules" ref="editForm" inline>
          <el-form-item prop="name">
            <el-input
              v-model="scope.row.name"
              v-if="scope.row.edit"
              @blur="handleSubmit(scope.row)"
            ></el-input>
            <span v-else>{{ scope.row.name }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          v-if="!scope.row.edit"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          v-if="scope.row.edit"
          type="success"
          size="small"
          @click="handleSubmit(scope.row)"
          >确认</el-button
        >
        <el-button
          v-if="scope.row.edit"
          size="small"
          @click="handleCancel(scope.row)"
          >取消</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          edit: false,
        },
        // ... 更多数据
      ],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '姓名长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      row.edit = true;
      this.$set(this.tableData, index, row);
    },
    handleSubmit(row) {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          row.edit = false;
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    handleCancel(row) {
      row.edit = false;
    },
  },
};
</script>

npm install element-plus --save

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>卡片名称</span>
      </div>
    </template>
    <div v-for="o in 3" :key="o" class="text item">
      列表内容 {{ o }}
    </div>
  </el-card>
</template>

<script>
import { ElCard } from 'element-plus';
export default {
  components: {
    ElCard
  }
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>

<template>
  <div>
    <el-input
      type="textarea"
      v-model="clipboardData"
      @paste="handlePaste"
      placeholder="在这里粘贴Excel数据"
    />
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clipboardData: '',
      tableData: []
    };
  },
  methods: {
    handlePaste(event) {
      const clipboardData = event.clipboardData || window.clipboardData;
      const pastedData = clipboardData.getData('Text');
      const parsedData = this.parseCSV(pastedData);
      this.tableData = parsedData;
    },
    parseCSV(text) {
      const lines = text.split('\n');
      const result = [];
      lines.forEach(line => {
        const columns = line.split(','); // 假设逗号分隔
        result.push({
          date: columns[0],
          name: columns[1],
          address: columns[2]
        });
      });
      return result;
    }
  }
};
</script>

<template>
  <div>
    <textarea v-model="text" @paste="handlePaste"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  methods: {
    handlePaste(event) {
      // 获取剪切板中的数据
      const clipboardData = event.clipboardData || window.clipboardData;
      const pastedText = clipboardData.getData('text');

      // 处理粘贴的文本
      // 例如：可以在这里将粘贴的文本添加到v-model绑定的变量中
      this.text += pastedText;

      // 阻止默认粘贴行为，如果需要的话
      event.preventDefault();
    }
  }
};
</script>

// 导入Vue
import Vue from 'vue';

// 定义防抖指令
Vue.directive('debounce', {
  // 当绑定元素 attribute 被插入到 DOM 中
  bind(el, binding, vnode) {
    let timeout = null;
    el.addEventListener(binding.arg, e => {
      if (timeout !== null) clearTimeout(timeout);
      timeout = setTimeout(() => {
        binding.value(e);
      }, binding.value.delay || 300);
    });
  }
});

// 在组件中使用
export default {
  methods: {
    // 防抖函数
    onInputDebounced(event) {
      console.log('输入内容变更:', event.target.value);
    }
  }
};

// 在模板中
<template>
  <input v-debounce:input="onInputDebounced" />
</template>

<template>
  <div id="app">
    <h1 v-if="message">Hello App!</h1>
    <p v-else>{{ message }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: null,
      items: [
        { id: 1, text: 'Learn JavaScript' },
        { id: 2, text: 'Learn Vue' },
        { id: 3, text: 'Build something awesome' }
      ]
    }
  },
  mounted() {
    // DOM 操作示例：在这里可以进行DOM操作
    // 比如，我们可以在这里通过 this.$el 访问到 div#app 元素
    console.log(this.$el);
  }
}
</script>

npm install element-ui --save

<template>
  <div>
    <el-upload
      ref="upload"
      action="#"
      :on-change="handleFileChange"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
    <el-table :data="fileList" style="width: 100%;">
      <el-table-column prop="name" label="文件名"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handlePreview(scope.row)" size="small">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleFileChange(file, fileList) {
        this.fileList = fileList.map(item => ({
          id: item.uid,
          name: item.name
        }));
      },
      handlePreview(file) {
        // 这里可以使用第三方库如xlsx来解析Excel文件并展示
        console.log('Preview file:', file);
        // 模拟文件预览，实际应用中可能需要使用其他方式展示Excel内容
      }
    }
  };
</script>