{{ title }}

{{ subtitle }}

⭐ 核心特性

Vue.js 的核心功能演示

1. 响应式数据绑定

计数器示例

{{ counter }}

双倍值：{{ doubleCount }}

文本输入

输入的内容：{{ inputText }}

字符数：{{ charCount }}

2. 条件渲染

{{ message }}

🎉 欢迎 VIP 用户！

消息已隐藏

3. 列表渲染

任务列表

  • {{ task.text }}

总任务：{{ taskCount }} | 已完成：{{ completedCount }}

4. 事件处理

鼠标事件

悬停状态：{{ isHovered ? '已悬停' : '未悬停' }}

点击事件

5. 计算属性 vs 方法

价格计算

小计：¥{{ subtotal.toFixed(2) }} (使用计算属性)

折扣金额：-¥{{ discountAmount.toFixed(2) }}

总计：¥{{ totalPrice.toFixed(2) }}

💡 计算属性会缓存结果，只有依赖数据变化时才重新计算

💻 语法演示

Vue 指令

{{ syntaxCode }}

实时预览

Class 与 Style 绑定

Class 绑定

当前类名：{{ activeClass }}

Style 绑定

颜色可以动态改变

🔗 组件通信

父组件 ↔ 子组件

从父组件传递数据到子组件（Props）

接收到的消息：{{ parentMessage }}

子组件向父组件发送事件（Emits）

✓ 事件已发送！

🔄 生命周期

当前组件生命周期日志

  • {{ log }}