Petite-Vue编译丢失on-click、响应式属性提示未定义问题求助

问题根源 #

你的代码核心问题是Petite-Vue实例配置错误，导致响应式状态和事件方法没有正确绑定到模板，从而引发点击无效、状态未定义的报错。

具体问题分析 #

1. a/div点击无反应：Petite-Vue未正确解析@click指令，本质是实例配置错误导致指令未被编译，点击事件根本没绑定到元素上。
2. showText is not defined：你将状态和方法拆分到外部app对象，又重复在createApp中配置data和methods，导致函数上下文混乱，响应式状态没有正确暴露给模板。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Petite-Vue Example</title>
</head>
<body>
  <div id="app">
    <!-- a标签正常使用，添加prevent阻止默认跳转 -->
    <a href="#" @click.prevent="toggleText">click to toggle</a>
    <!-- div可点击，添加cursor样式提示 -->
    <div @click="toggleText" style="cursor: pointer; margin: 10px 0;">Click this div</div>
    <button @click="toggleText">Click me!</button>
    <!-- v-if直接控制显示，无需额外hidden类 -->
    <div v-if="showText">Hidden text revealed!</div>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js?module'

    createApp({
      // 直接定义响应式状态
      showText: false,
      // 直接绑定方法，this自动指向实例
      toggleText() {
        this.showText = !this.showText;
      }
    }).mount('#app');
  </script>
</body>
</html>

关键修复点 #

• 去掉冗余的外部app对象，将状态和方法直接写入createApp配置：Petite-Vue会自动将顶层属性转为响应式，方法的this自动绑定到实例，确保修改状态后模板能实时更新。
• a标签添加@click.prevent：阻止默认的锚点跳转行为，避免页面刷新。
• 删除多余的.hidden-text类：v-if指令会直接控制元素的DOM渲染，不需要额外CSS隐藏。

可选拆分写法（如果需要分离状态和方法） #

如果非要拆分状态与方法，直接引用状态对象避免this指向问题：

const appState = {
  showText: false
};

const appMethods = {
  toggleText() {
    appState.showText = !appState.showText;
  }
};

createApp({
  ...appState,
  ...appMethods
}).mount('#app');

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