尤雨溪的新作品 - petite-vue

1,492 阅读2分钟

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 具体各位去尤大仓库看