Vue 事件绑定机制详解
Vue 事件绑定机制详解
一、核心概念
Vue 的事件绑定系统是其交互功能的核心，通过 v-on 指令（简写 @）实现。下面我将详细解释 Vue 事件绑定的各个方面。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 事件绑定详解</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #2c3e50;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 30px 0;margin-bottom: 30px;}h1 {font-size: 2.8rem;margin-bottom: 15px;color: #34495e;}.subtitle {color: #7f8c8d;font-size: 1.3rem;max-width: 800px;margin: 0 auto;}.content {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px;margin-bottom: 40px;}.card {background: white;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);padding: 30px;transition: transform 0.3s ease, box-shadow 0.3s ease;}.card:hover {transform: translateY(-5px);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);}.card-header {margin-bottom: 20px;padding-bottom: 15px;border-bottom: 2px solid #f0f4f8;display: flex;align-items: center;gap: 15px;}.card-header h2 {font-size: 1.8rem;color: #2c3e50;}.icon {font-size: 2rem;color: #42b983;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;background: #e8f5e9;border-radius: 50%;}.explanation {margin-bottom: 25px;}.explanation p {margin-bottom: 15px;line-height: 1.7;}.code-block {background: #2d2d2d;color: #f8f8f2;padding: 20px;border-radius: 8px;font-family: 'Fira Code', monospace;font-size: 15px;overflow-x: auto;margin: 20px 0;position: relative;}.code-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;color: #a9b7c6;}.code-keyword {color: #cc7832;}.code-function {color: #ffc66d;}.code-string {color: #6a8759;}.code-comment {color: #808080;}.demo-area {background: #f8fafc;padding: 25px;border-radius: 8px;margin-top: 20px;border: 1px solid #e2e8f0;}.demo-area h3 {margin-bottom: 20px;color: #2c3e50;font-size: 1.4rem;display: flex;align-items: center;gap: 10px;}.demo-area h3 i {color: #42b983;font-size: 1.8rem;}.control-group {margin-bottom: 20px;padding: 15px;background: white;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);}.control-group label {display: block;margin-bottom: 8px;font-weight: 600;color: #2c3e50;}input[type="text"], input[type="number"], textarea {width: 100%;padding: 14px;border: 1px solid #ddd;border-radius: 8px;font-size: 16px;transition: border-color 0.3s, box-shadow 0.3s;}input:focus, textarea:focus {outline: none;border-color: #42b983;box-shadow: 0 0 0 3px rgba(66, 185, 131, 0.2);}button {background: #42b983;color: white;border: none;padding: 14px 24px;border-radius: 8px;cursor: pointer;font-size: 16px;font-weight: 600;transition: background 0.3s, transform 0.2s;display: inline-flex;align-items: center;gap: 8px;margin-right: 10px;margin-bottom: 10px;}button:hover {background: #3aa776;transform: translateY(-2px);}button.secondary {background: #3498db;}button.secondary:hover {background: #2980b9;}button.warning {background: #e74c3c;}button.warning:hover {background: #c0392b;}.output {margin-top: 20px;padding: 20px;background: white;border-radius: 8px;border-left: 4px solid #42b983;font-family: 'Fira Code', monospace;min-height: 60px;white-space: pre-wrap;}.event-log {background: #1e1e1e;color: #d4d4d4;padding: 20px;border-radius: 8px;margin-top: 20px;font-family: 'Fira Code', monospace;max-height: 300px;overflow-y: auto;font-size: 14px;}.log-entry {margin-bottom: 8px;padding-bottom: 8px;border-bottom: 1px solid #333;display: flex;gap: 10px;}.log-time {color: #6a9955;flex-shrink: 0;}.log-content {flex-grow: 1;}.highlight {background-color: #fff9c4;padding: 2px 4px;border-radius: 3px;color: #333;}.note {background: #e3f2fd;border-left: 4px solid #2196f3;padding: 20px;margin: 25px 0;border-radius: 0 8px 8px 0;}.warning {background: #fff3cd;border-left: 4px solid #ffc107;padding: 20px;margin: 25px 0;border-radius: 0 8px 8px 0;}.summary-table {width: 100%;border-collapse: collapse;margin: 25px 0;background: white;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);}.summary-table th, .summary-table td {border: 1px solid #e2e8f0;padding: 16px;text-align: left;}.summary-table th {background-color: #f8fafc;font-weight: 600;color: #2c3e50;}.summary-table tr:nth-child(even) {background-color: #f8fafc;}.summary-table tr:hover {background-color: #f0f4f8;}@media (max-width: 768px) {.content {grid-template-columns: 1fr;}h1 {font-size: 2.2rem;}}</