petite-vue
是针对渐进增强进行优化的 Vue 的替代发行版。它提供了与标准 Vue 相同的模板语法和反应性思维模型。但是,它专门针对在服务器框架呈现的现有 HTML 页面上“喷洒”少量交互进行了优化。
- 仅 ~5.8kb
- Vue 兼容的模板语法
- 基于 DOM,就地变异
- 通过驱动 @vue/reactivity
地位
- 这是很新的。可能存在错误,并且可能仍然存在 API 更改,因此使用风险自负。不过能用吗?非常。查看示例以了解它的功能。
- 问题列表被故意禁用,因为我现在有更高优先级的事情要关注并且不想分心。如果您发现了错误,则必须解决它或提交 PR 以自行修复。也就是说,请随时使用讨论选项卡来互相帮助。
- 目前不太可能接受功能请求 - 该项目的范围有意保持在最低限度。
用法
petite-vue
无需构建步骤即可使用。只需从 CDN 加载它:
< script src =" https://unpkg.com/petite-vue "延迟 初始化> </ script >
<!-- 页面任意位置 -->
< div v-scope =" { count: 0 } " >
{{ 数数 }}
< button @click =" count++ " > inc </ button >
</ div >
- 使用
v-scope
到标志区应当由被控制在页面上petite-vue
。 - 该
defer
属性使脚本在解析 HTML 内容后执行。 - 该
init
属性告诉petite-vue
自动查询和初始化v-scope
页面上的所有元素。
手动初始化
如果您不想要自动初始化,请删除该init属性并将脚本移动到 end of <body>
:
< script src =" https://unpkg.com/petite-vue " > </ script >
< script >
PetiteVue 。创建应用程序()。挂载( )
</脚本>
或者,使用 ES 模块构建:
< script type =" module " >
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp ( ) 。挂载( )
</脚本>
生产 CDN URL
简短的 CDN URL 用于原型设计。对于生产用途,请使用完全解析的 CDN URL 以避免解析和重定向成本:
- 全局构建:
https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js
- 公开PetiteVue全局,支持自动初始化
- ESM 构建:
https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js
- 必须与
<script type="module">
根范围
该createApp
函数接受一个数据对象,作为所有表达式的根作用域。这可用于引导简单的一次性应用程序:
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
// exposed to all expressions
count: 0,
// getters
get plusOne() {
return this.count + 1
},
// methods
increment() {
this.count++
}
}).mount()
</script>
<!-- v-scope value can be omitted -->
<div v-scope>
<p>{{ count }}</p>
<button @click="increment">increment</button>
</div>
Note v-scope
不需要在此处具有值,仅用作petite-vue
处理元素的提示。
原文自 petite-vue 具体各位去尤大仓库看