根据 Vue 的创建者 Evan You 的说法,Vuepetite-vue是一种受 Alpine 启发的替代发行版,它针对渐进增强进行了优化。对于熟悉 Vue 并希望将 Vue 添加到在服务器端呈现的项目的开发人员,petite-vue提供了完美的方法。
在本文中,我们将探讨petite-vue它的作用、工作原理以及与标准 Vue 和 Alpine的比较。我们还将介绍入门petite-vue并查看它的一些用例。
-
什么是渐进增强?
-
的基本特征petite-vue
-
没有构建工具
-
小包尺寸
-
Vue 兼容的模板语法
-
没有虚拟 DOM
-
通过驱动@vue/reactivity
-
-
Vue 兼容功能
-
Vue 独有的功能
-
petite-vue与阿尔卑斯山相比如何
-
petite-vue独家功能
-
v-scope
-
v-effect
-
生命周期事件
-
-
开始使用petite-vue
-
何时使用petite-vue
什么是渐进增强?
渐进增强是一种允许 Web 开发人员开始使用 HTML 编程并根据需要包含其他技术的方法。您可以开始仅使用 HTML 静态构建网站,然后将交互性或客户端状态添加到页面。
petite-vue针对由服务器框架呈现的现有 HTML 页面上的小型交互进行了优化,从而简化了渐进式增强。现在,让我们看看它是如何工作的。
的基本特征petite-vue
要了解其petite-vue工作原理,我们必须考虑其基本特征。
没有构建工具
使用petite-vue,您不必担心构建工具。相反,您可以简单地将其包含在script标签中以在 HTML 页面中获取其功能:
<script src="https://unpkg/petite-vue" defer init></script> <!-- anywhere on the page --> <div v-scope="{ count: 0 }"> {{ count }} <button @click="count++">inc</button> </div>
小包尺寸
在撰写本文时,最新版本的 Vue 和 Alpine 分别具有34.2kB和13.5kB的压缩和 gzip 压缩包大小。petite-vue另一方面,捆绑包大小仅为6. 9 kB,旨在实现轻量级。
Vue 兼容的模板语法
已经熟悉 Vue 模板语法的开发人员会发现在 Vue 和petite-vue. 作为 Vue 本身的一个子集,petite-vue使用与 Vue 大部分相同的语法。例如,petite-vue使用模板插值{{ count }}和模板事件侦听器,如@click.
没有虚拟 DOM
与 Vue、React 和大多数其他前端库和框架不同,petite-vue它不使用虚拟 DOM。相反,它会在原地改变 DOM。因此,petite-vue在网页上运行,不需要编译器,减小了整体大小。
通过驱动@vue/reactivity
该@vue/reactivity包负责处理 Vue 和 Alpine 中的反应性;petite-vue使用相同的反应技术。
petite-vue与标准 Vue 相比如何
petite-vue在很多方面与 Vue 相似。如前所述,它提供了与@vue/reactivity标准 Vue 相同的模板语法和模型。然而,最显着的区别是petite-vue为渐进增强而做出的。
标准 Vue 旨在使用构建步骤来构建具有大量交互的单页应用程序 (SPA)。Vue 使用渲染函数来替换现有的 DOM 模板,而另一方面, petite-vue 遍历现有的 DOM 并对其进行变异,因此不需要构建步骤。
petite-vue独家功能
petite-vue引入了一些标准 Vue 中没有的特性,有助于优化渐进增强。让我们来看看他们吧!
v-scope
其中petite-vue,v-scope是一个指令,用于标记由 控制的页面区域petite-vue。您还可以使用该v-scope指令来传递页面特定区域可以访问的状态。
v-effect
v-effect是一个指令,用于在petite-vue. 在下面的代码片段中,count变量是反应性的,因此v-effect每当计数发生变化时都会重新运行,然后div用当前值更新count:
<div v-scope="{ count: 0 }"> <div v-effect="$el.textContent = count"></div> <button @click="count++">++</button> </div>
生命周期事件
petite-vue`附带两个生命周期事件`@mounted`和,它们允许您在页面上安装或卸载`@unmounted`时监听。`petite-vue
Vue 兼容功能
现在我们已经看到了新特性petite-vue带来的好处,让我们回顾一下它在 Vue 中已经存在的特性:
-
{{ }}: 文本绑定
-
v-bindand :: 类和样式特殊处理
-
v-on和@:事件处理
-
v-model: 表示所有输入类型和非字符串:value绑定
-
v-if// v-else_v-else-if
-
v-for
-
v-show
-
v-html
-
v-pre
-
v-once
-
v-cloak
-
reactive()
-
nextTick()
-
模板参考
Vue 独有的功能
由于它的范围小,petite-vue已经放弃了标准 Vue 中的一些特性:
-
ref()和computed()
-
渲染函数:petite-vue没有虚拟 DOM
-
集合类型的反应性:Map,Set等。
-
Transition, keep-alive, <teleport>, 和<suspense>组件
-
v-for: 深度解构
-
v-on="object"
-
v-is和<component :is="newComponent">
-
v-bind:style自动加前缀
petite-vue与阿尔卑斯山相比如何
尽管petite-vue受到 Alpine 的启发并解决了类似的问题,醉拳影视App,支持IOS和安卓看片追剧神器,免vip看全网影视!但它与 Alpine 的不同之处在于其极简主义和与 Vue 的兼容性。
例如,petite-vue它的大小大约是 Alpine 的一半,并且与 Alpine 不同的是,它没有附带过渡系统。
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →
此外,Alpine 也petite-vue有不同的设计。尽管 Alpine 在某些方面类似于 Vue 的结构,但petite-vue更符合标准 Vue,如果您想在 Vue 和petite-vue.
开始使用petite-vue
要开始使用petite-vue,您需要包含一个script指向petite-vue包的标签。例如,让我们创建一个简单的投票应用程序,由petite-vue.
首先,创建一个index.html文件。在它的正文中,添加以下代码片段:
<script src="https://unpkg/petite-vue" defer init></script> <div v-scope="{ upVotes: 0, downVotes: 0 }"> <p> {{ upVotes }} <button @click="upVotes++">👍</button> </p> <p> {{ downVotes }} <button @click="downVotes++">👎</button> </p> </div>
标签上的defer属性会导致在浏览器解析 HTML 内容后script加载脚本。petite-vue该init属性告诉petite-vue自动查询和初始化所有具有v-scope的元素,AK加速器PC端,每天可免费玩14个小时,为数不多的良心游戏加速器!并且v-scope告诉petite-vue要处理页面的哪个区域。我们还传入upVotes和downVotes状态以对该区域可用。
手动初始化
如果您不想petite-vue自动初始化所有具有该属性的元素v-scope,您可以通过更改脚本手动初始化它们:
<script src="https://unpkg/petite-vue"></script> <script> PetiteVue.createApp().mount() </script>
或者,您可以使用 ES 模块构建petite-vue:
<script type="module"> import { createApp } from 'https://unpkg/petite-vue?module' createApp().mount() </script>
petite-vueCDN 制作网址
在我们的示例中,我们petite-vue使用CDN URL进行访问。我们使用的是简写 URL https://unpkg/petite-vue,这对于原型设计来说很好,但对生产来说不是很好。我们希望避免解析和重定向成本,因此我们将在生产中使用完整的 URL。
全局构建生产 URLhttps://unpkg/petite-vue@0.4.1/dist/petite-vue.iife.js 公开PetiteVue全局并且还支持自动初始化。
ESM 构建生产 URLhttps://unpkg/petite-vue@0.4.1/dist/petite-vue.iife.js 必须在<scripttype="module">块中使用。
何时使用petite-vue
我们已经了解了很多关于哪些功能petite-vue具有哪些功能以及它可以做什么。让我们回顾一下哪种情况petite-vue最适合设计:
-
不需要构建工具时的快速原型设计
-
在 Sails、Laravel 或 Rails 等服务器渲染框架中添加 Vue 功能
-
构建可以静态且交互很少的登录页面或营销页面
-
您通常会使用 Alpine 的任何地方
结论
petite-vue是 Vue 的轻量级版本,为页面添加了高效的交互。在本文中,我们首先petite-vue考虑了它的独有特性、Docsmall图片在线压缩(docsmall),支持图片、GIF、PDF压缩和PDF合并!它与标准 Vue 的相似之处,以及为获得它的轻量级而进行的特性权衡。
在撰写本文时,petite-vue它仍然很新,并且包含针对任何潜在错误的免责声明。但是,petite-vue它已经是一个具有强大潜力和实用性的功能选项。它对于快速原型设计、将 Vue 功能添加到服务器渲染框架以及构建静态页面特别有用。
我希望你喜欢这篇文章!给我们留言,让我们知道您是否打算尝试petite-vue
更多推荐
petite-vue:用于渐进增强的 Alpine 替代方案
发布评论