如何在普通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 可能会有所变化。

上面给我的例子，我用的是普通html继承的petite-vue。用PetiteVue.createApp方式，怎么写$computed呢

如果使用PetiteVue.createApp方式创建应用程序，你可以在setup函数中使用响应式函数(ref或reactive)和计算属性(computed)来实现类似的功能。

以下是一个使用PetiteVue.createApp方式实现的例子：

<div id="app">
  <div v-for="item in filteredList" :key="item.id">{{ item.name }}</div>
  <p>符合条件的数据条数为：{{ filteredList.length }}</p>
</div>

<script type="module">
import { createApp, ref, computed } from 'https://cdn.skypack.dev/petite-vue@next'

createApp({
  setup() {
    const list = ref([
      { id: 1, name: 'apple', price: 2 },
      { id: 2, name: 'banana', price: 3 },
      { id: 3, name: 'orange', price: 4 },
      { id: 4, name: 'pear', price: 5 }
    ])
    const priceLimit = ref(3)
    const filteredList = computed(() => {
      return list.value.filter(item => item.price <= priceLimit.value)
    })

    return {
      filteredList
    }
  }
}).mount('#app')
</script>

在这个例子中，我们使用ref函数创建了两个响应式变量list和priceLimit。我们使用computed函数定义了一个计算属性filteredList，该函数返回一个新的列表，其中只包含价格小于等于3的水果。在页面中，我们使用v-for指令循环展示符合条件的水果，并在页面底部展示符合条件的数据条数。

注意，在使用PetiteVue.createApp方式创建应用程序时，我们需要使用mount方法手动挂载应用程序。