Petite-vue中v-for循环无法渲染数据，求优质学习资源

一、v-for无法渲染的原因及修复 #

你的代码同时使用了两种Petite-vue初始化方式，导致实例冲突，最终v-for无法正常工作：

1. 头部的<script src="https://unpkg.com/petite-vue" defer init>是全局自动初始化模式，init属性会让Petite-vue自动扫描页面指令并初始化，但这和你后续用createApp手动挂载的逻辑冲突。
2. 两种模式混用会导致手动挂载的实例无法正常接管DOM，数据绑定失效。

修复方案（二选一） #

方案1：保留手动挂载模式

移除头部带init属性的script标签，仅保留模块导入的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1> show data here:</h1>
  <div id="app">
    <div v-for="(item, index) in items" :key="index">
      <h2>{{ item.title }}</h2>
    </div>
  </div>
  <script type="module">
  import { createApp } from 'https://cdn.skypack.dev/petite-vue'
  const jsonData = [
    { title: 'Title 1'},
    { title: 'Title 2'},
    { title: 'Title 3'}
  ]
  createApp({
    data() {
      return {
        items: []
      }
    },
    mounted() {
      this.items = jsonData
    }
  }).mount('#app')
  </script>
</body>
</html>

方案2：使用全局自动初始化模式

无需手动创建实例，直接通过v-scope在DOM上绑定数据：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/petite-vue" defer init></script>
</head>
<body>
  <h1> show data here:</h1>
  <div id="app" v-scope="{ items: [{ title: 'Title 1'}, { title: 'Title 2'}, { title: 'Title 3'}] }">
    <div v-for="(item, index) in items" :key="index">
      <h2>{{ item.title }}</h2>
    </div>
  </div>
</body>
</html>

二、优质Petite-vue学习资源 #

• 官方文档：最权威的核心资料，覆盖基础语法、API详解、绑定规则等所有知识点，附带快速上手指引。
• 官方仓库示例：Petite-vue的代码仓库中设有examples目录，包含表单处理、组件复用、状态管理等多种实用场景的代码案例，适合边看边实操。
• 前端社区实战教程：国内前端技术平台上有不少开发者分享的实战文章，比如小型交互组件开发、静态页面动态化改造等内容，能快速掌握实际应用技巧。
• 视频实战演示：部分前端博主会发布Petite-vue快速上手视频，直观展示从0到1实现功能的完整流程，适合视觉型学习者。

内容的提问来源于stack exchange，提问作者SrSbSd