尤雨溪的新作品 - petite-vue

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