petite-vue 快速上手

最新推荐文章于 2024-05-11 09:31:45 发布

AI画手小王

最新推荐文章于 2024-05-11 09:31:45 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53225741/article/details/125165417

版权

petite-vue 是 Vue.js 的轻量级版本，适用于无构建步骤的场景，提供自动和手动初始化，支持响应式驱动、组件和自定义指令等功能。它简化了组件和全局状态管理，大小仅为5.8kb，兼容 Vue 的部分模板语法。

摘要由CSDN通过智能技术生成

Vue 可以作为独立的脚本文件使用，无需构建步骤！如果你有一个后端框架，并且它已经渲染了大部分的 HTML，或者你的前端逻辑并不复杂，不需要构建步骤。

所以，Vue 也提供了另一个适用于此类无构建步骤场景的替代版 petite-vue，主要为渐进式增强已有的 HTML 作了特别的优化。功能更加精简，十分轻量。

大小只有5.8kb
Vue 兼容模版语法
基于DOM，就地转换
响应式驱动

官方地址：github.com/vuejs/petit…

快速上手

自动初始化

petite-vue 无需构建流程即可使用。只需从 CDN 加载它：

<script src="https://unpkg.com/petite-vue" defer init></script>

<!-- 页面任意位置 --> 
<div v-scope="{ count: 0 }">
  {
  { count }}
  <button @click="count++">inc</button>
</div>

用 v-scope 标记页面上应由 petite-vue 控制的区域。
该 defer 属性使脚本在 HTML 内容被解析后执行。
该 init 属性告诉 petite-vue 自动查找和初始化页面上的所有包含 v-scope 的元素。

手动初始化

如果您不想要自动初始化，请删除该 init 属性并将脚本移动到 <body> 末尾：

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

或者，使用 ES 模块构建：

<script type="module"> import { createApp } from 'https://

最低0.47元/天解锁文章

AI画手小王

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
petite-vue 快速上手

Vue 可以作为独立的脚本文件使用，无需构建步骤！如果你有一个后端框架，并且它已经渲染了大部分的 HTML，或者你的前端逻辑并不复杂，不需要构建步骤。所以，Vue 也提供了另一个适用于此类无构建步骤场景的替代版 petite-vue，主要为渐进式增强已有的 HTML 作了特别的优化。功能更加精简，十分轻量。自动初始化petite-vue 无需构建流程即可使用。只需从 CDN 加载它：用 v-scope 标记页面上应由 petite-vue 控制的区域。该 defer 属性使脚本在 HTML 内容被解析
复制链接

扫一扫