如何在普通html中使用petite vue

在普通的 HTML 页面中使用 `petite-vue`，需要先引入 `petite-vue` 库，可以通过以下方式引入：

<script src="https://unpkg.com/petite-vue@next"></script>

然后，可以在 HTML 页面中使用 `pv-*` 作为自定义指令来使用 `petite-vue` 提供的功能。例如，可以使用 `pv-text` 指令来实现文本插值：

<div pv-text="message"></div>

在上面的示例中，`pv-text` 指令将 `message` 变量的值插入到 `div` 元素中。

此外，还可以使用 `pv-model` 指令来实现双向数据绑定：

<input type="text" pv-model="message">
<div pv-text="message"></div>

在上面的示例中，`pv-model` 指令将 `input` 元素的值绑定到 `message` 变量上，同时 `pv-text` 指令将 `message` 变量的值插入到 `div` 元素中，这样当 `input` 元素的值发生变化时，`div` 元素的内容也会随之更新。

需要注意的是，`petite-vue` 只支持简单的数据绑定，不支持复杂的计算属性和侦听器等高级特性。如果需要更丰富的功能，可以考虑使用 `Vue.js`。

相关问题

如何在普通html页面中使用petite vue，并使用setup，mounted方法

要在普通的 HTML 页面中使用 Petite Vue，需要先引入 Petite Vue 库和 Vue 库。可以在 head 标签中添加以下代码：

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/petite-vue@next"></script>

接下来，可以在 body 标签中添加一个容器元素来渲染 Petite Vue 实例：

<div id="app"></div>

然后，在一个 script 标签中定义 Petite Vue 实例。在这个实例中，可以使用 `setup()` 函数来定义组件的行为，使用 `mounted()` 方法来在组件挂载时执行一些代码。

<script>
  const app = {
    setup() {
      // 定义组件行为
    },
    mounted() {
      // 组件挂载时执行的代码
    }
  };
  PetiteVue.createApp(app).mount('#app');
</script>

在 `setup()` 函数中，可以使用 Vue 3 的 Composition API 来定义组件行为。例如，可以使用 `ref` 函数来定义响应式变量：

<script>
  const app = {
    setup() {
      const count = Vue.ref(0);
      return {
        count
      };
    },
    mounted() {
      console.log('Component mounted');
    }
  };
  PetiteVue.createApp(app).mount('#app');
</script>

在这个例子中，定义了一个名为 `count` 的响应式变量，初始值为 0。在组件挂载时，会打印一条消息到控制台。

注意，Petite Vue 目前还处于 beta 阶段，API 可能会有所变化。

petite-vue中如何使用computed计算属性

在 `petite-vue` 中，你可以使用 `computed` 函数来创建计算属性。计算属性是一种依赖于其它数据属性而动态计算得到的属性，其值通常是通过某种运算逻辑计算得到的。

下面是一个示例，展示如何在 `petite-vue` 中使用 `computed` 函数创建计算属性：

<div id="app">
  <p>原始值：{{ value }}</p>
  <p>计算值：{{ computedValue }}</p>
</div>

const app = {
  data() {
    return {
      value: 10
    }
  },
  computed: {
    computedValue() {
      return this.value * 2
    }
  }
}

createApp(app).mount('#app')

在上面的示例中，我们在 `computed` 对象中定义了一个名为 `computedValue` 的计算属性，它的值是 `this.value * 2`，其中 `this` 指向当前 `app` 对象，因此可以访问 `data` 对象中的 `value` 属性。

在模板中，我们可以像访问普通数据属性一样访问计算属性，即 `{{ computedValue }}`。每当 `value` 发生变化时，`computedValue` 也会自动更新。

注意，计算属性是基于其它数据属性动态计算得到的，因此计算属性的值是惰性求值的，只有在其依赖的数据属性发生变化时才会重新计算。