超实用petite-vue代码片段：10个提升开发效率的响应式组件

超实用petite-vue代码片段：10个提升开发效率的响应式组件

【免费下载链接】petite-vue 6kb subset of Vue optimized for progressive enhancement 项目地址: https://gitcode.com/gh_mirrors/pe/petite-vue

在现代Web开发中，构建高效、响应式的用户界面是提升用户体验的关键。petite-vue作为Vue的轻量级子集，以其6kb的超小体积和渐进式增强的特性，成为开发者快速构建交互界面的理想选择。本文将从examples/todomvc.html、examples/tree.html等官方示例中提取10个实用代码片段，帮助你在项目中快速实现常见交互功能，提升开发效率。

1. 响应式待办事项列表（TodoMVC）

待办事项列表是展示响应式数据绑定的经典案例。petite-vue的双向绑定和事件处理能力让这一功能实现变得异常简单。

核心功能实现位于examples/todomvc.html的132-133行，通过createApp初始化应用并挂载到DOM节点：

createApp({
  // 待办事项数据和方法定义
}).mount('#app')

待办事项的添加功能通过v-model绑定输入框与数据，并监听回车键事件触发添加方法：

<input
  class="new-todo"
  placeholder="What needs to be done?"
  v-model="newTodo"
  @keyup.enter="addTodo"
/>

而待办事项的展示与状态切换则利用v-for遍历数据和v-model绑定复选框状态：

<li v-for="todo in filteredTodos" :class="{ completed: todo.completed }">
  <input class="toggle" type="checkbox" v-model="todo.completed" />
  <label>{{ todo.title }}</label>
</li>

2. 可折叠树形结构组件

树形结构在文件浏览器、分类导航等场景中广泛应用。petite-vue的组件化能力和条件渲染可以轻松实现这一复杂交互。

树形组件的核心逻辑定义在examples/tree.html的27-53行，通过函数式组件TreeItem封装节点功能：

function TreeItem(model) {
  return {
    $template: '#item-template',
    model,
    open: false,
    get isFolder() {
      return model.children && model.children.length
    },
    toggle() {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    // 其他方法...
  }
}

模板部分使用v-if和v-show控制节点展开状态，并通过递归调用自身实现树形结构渲染：

<template id="item-template">
  <div @click="toggle" @dblclick="changeType">
    <span>{{ model.name }}</span>
    <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  </div>
  <ul v-show="open" v-if="isFolder">
    <li v-for="model in model.children" v-scope="TreeItem(model)"></li>
  </ul>
</template>

3. 实时Markdown编辑器

实时预览功能需要频繁处理用户输入并更新视图，petite-vue的计算属性和事件处理机制为此提供了高效支持。

Markdown编辑器的实现位于examples/markdown.html，核心在于使用计算属性compiledMarkdown实时转换输入内容：

createApp({
  input: '# hello',
  get compiledMarkdown() {
    return marked(this.input)
  },
  update: _.debounce(function (e) {
    this.input = e.target.value
  }, 100)
}).mount('#editor')

视图部分通过v-model绑定文本输入框，使用v-html指令渲染转换后的HTML：

<div id="editor">
  <textarea class="input" :value="input" @input="update"></textarea>
  <div class="output" v-html="compiledMarkdown"></div>
</div>

4. 可排序、可筛选的数据表格

数据表格是后台管理系统的核心组件，petite-vue的计算属性和事件处理可以轻松实现排序、筛选等复杂功能。

表格组件的实现位于examples/grid.html，核心是通过计算属性filteredData处理数据筛选和排序：

get filteredData() {
  const sortKey = this.sortKey
  const filterKey = this.query && this.query.toLowerCase()
  let data = this.data
  
  // 数据筛选逻辑
  if (filterKey) {
    data = data.filter((row) => {
      return Object.keys(row).some((key) => {
        return String(row[key]).toLowerCase().indexOf(filterKey) > -1
      })
    })
  }
  
  // 数据排序逻辑
  if (sortKey) {
    data = data.slice().sort((a, b) => {
      a = a[sortKey]
      b = b[sortKey]
      return (a === b ? 0 : a > b ? 1 : -1) * order
    })
  }
  
  return data
}

表格头部点击事件实现排序功能：

<th v-for="key in columns" @click="sortBy(key)" :class="{ active: sortKey == key }">
  {{ capitalize(key) }}
  <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
</th>

5. 响应式表单验证

表单验证是提升用户体验的重要环节。petite-vue的双向绑定和计算属性可以实现实时表单验证反馈。

虽然示例中没有直接提供完整的表单验证实现，但我们可以基于petite-vue的核心功能快速构建。通过v-model绑定表单输入，结合计算属性实现实时验证：

createApp({
  email: '',
  password: '',
  get emailValid() {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email)
  },
  get passwordValid() {
    return this.password.length >= 6
  },
  get formValid() {
    return this.emailValid && this.passwordValid
  }
}).mount('#form')

在模板中根据验证结果提供视觉反馈：

<form id="form">
  <div>
    <input type="email" v-model="email" placeholder="Email">
    <span v-if="email && !emailValid">请输入有效的邮箱地址</span>
  </div>
  <div>
    <input type="password" v-model="password" placeholder="Password">
    <span v-if="password && !passwordValid">密码长度不能少于6位</span>
  </div>
  <button type="submit" :disabled="!formValid">提交</button>
</form>

6. 响应式导航菜单

导航菜单是任何网站的基本组件，petite-vue的条件渲染和事件处理可以轻松实现响应式菜单。

基于petite-vue的核心指令，我们可以实现一个简单的响应式导航菜单：

createApp({
  isMenuOpen: false,
  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen
  }
}).mount('#navbar')

模板部分使用v-if或v-show控制菜单显示状态：

<nav id="navbar">
  <button @click="toggleMenu" class="menu-toggle">菜单</button>
  <ul class="menu" v-show="isMenuOpen">
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

7. 图片懒加载组件

图片懒加载可以显著提升页面加载速度，petite-vue的指令系统可以轻松实现这一功能。

虽然petite-vue没有内置的懒加载指令，但我们可以通过自定义指令实现：

import { createApp } from '../src'

createApp({
  images: [
    { src: 'image1.jpg', alt: '图片1' },
    { src: 'image2.jpg', alt: '图片2' },
    // 更多图片...
  ]
}).directive('lazy', {
  mounted(el) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = el.dataset.src
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
}).mount('#gallery')

模板中使用自定义指令：

<div id="gallery">
  <div v-for="img in images" class="image-item">
    <img v-lazy :data-src="img.src" :alt="img.alt">
  </div>
</div>

8. 倒计时组件

倒计时组件在限时活动、考试系统等场景中非常实用，petite-vue的响应式数据和生命周期方法可以轻松实现。

createApp({
  seconds: 60,
  mounted() {
    this.timer = setInterval(() => {
      if (this.seconds > 0) {
        this.seconds--
      } else {
        clearInterval(this.timer)
      }
    }, 1000)
  },
  unmounted() {
    clearInterval(this.timer)
  }
}).mount('#countdown')

模板部分展示倒计时：

<div id="countdown">
  <p>倒计时: {{ seconds }} 秒</p>
</div>

9. 标签页（Tab）组件

标签页组件可以在有限空间内展示更多内容，是Web界面的常用元素。

createApp({
  activeTab: 'tab1',
  switchTab(tab) {
    this.activeTab = tab
  }
}).mount('#tabs')

模板部分使用v-if或v-show控制标签内容显示：

<div id="tabs">
  <div class="tab-buttons">
    <button @click="switchTab('tab1')" :class="{ active: activeTab === 'tab1' }">标签1</button>
    <button @click="switchTab('tab2')" :class="{ active: activeTab === 'tab2' }">标签2</button>
    <button @click="switchTab('tab3')" :class="{ active: activeTab === 'tab3' }">标签3</button>
  </div>
  
  <div class="tab-content">
    <div v-if="activeTab === 'tab1'">标签1内容</div>
    <div v-if="activeTab === 'tab2'">标签2内容</div>
    <div v-if="activeTab === 'tab3'">标签3内容</div>
  </div>
</div>

10. 响应式计数器组件

计数器看似简单，却是理解响应式数据绑定的绝佳示例。petite-vue的双向绑定能力让计数器实现变得异常简单。

createApp({
  count: 0,
  increment() {
    this.count++
  },
  decrement() {
    this.count--
  },
  reset() {
    this.count = 0
  }
}).mount('#counter')

模板部分绑定数据和事件：

<div id="counter">
  <p>当前计数: {{ count }}</p>
  <button @click="decrement">-</button>
  <button @click="reset">重置</button>
  <button @click="increment">+</button>
</div>

总结

petite-vue以其轻量级、高性能和易用性，为开发者提供了构建响应式界面的强大工具。本文介绍的10个实用代码片段，涵盖了从基础数据绑定到复杂组件的实现，展示了petite-vue在不同场景下的应用。这些代码片段均可在官方示例中找到更完整的实现，如examples/todomvc.html、examples/tree.html等文件。

通过灵活运用petite-vue的核心特性，如响应式数据、指令系统、组件化等，开发者可以快速构建出功能丰富、交互友好的Web应用，同时保持代码的简洁和可维护性。无论你是在构建简单的交互组件还是复杂的单页应用，petite-vue都能成为你提升开发效率的得力助手。

希望这些代码片段能为你的下一个项目提供灵感和帮助。如果你有其他实用的petite-vue代码片段，欢迎在评论区分享！

【免费下载链接】petite-vue 6kb subset of Vue optimized for progressive enhancement 项目地址: https://gitcode.com/gh_mirrors/pe/petite-vue