信息卡片
    名称 petite
    更新日期
    官网/豆瓣/Github https://github.com/vuejs/petite-vue
    出版社/出品人 尤雨溪
    相关链接



    petite 是一个新东西，从直观上来看，它更像是对标 sevelte ：体积小小巧、没有虚拟dom、即插即用。

    其他的背景，和一些使用我贴个别人的文章
    指引：

    petite-vue初探 - 图1
    复制下面的内容，新建html 打开

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>petite-vue</title>
    8.   </head>
    9.   <body>
    10.     <script src="https://unpkg.com/petite-vue" defer init></script>
    12.     <!-- anywhere on the page -->
    13.     <!-- PetiteVue -->
    14.     <div v-scope="{ count: 0 }">
    15.       {{ count }}
    16.       <button @click="count++">inc</button>
    17.     </div>
    18.   </body>
    19. </html>

    上面的核心代码是这几行：

    1. <div v-scope="{ count: 0 }">
    2.   {{ count }}
    3.   <button @click="count++">inc</button>
    4. </div>

    注意：

    • v-scope 包裹了一个data对象，说明嵌套内容的数据
    • 自带模板语法，使用data
    • vue语法一样使用 @cilick

    scirpt 标签使用了：

    • defer，详细可见 JS加载一本通。说到底就是延迟执行，显然页面中的html解析完
    • init 是自定义内容，让 petite-vue 自动初始化，也可以不用init，手动来做。
      1. <script>
      2. PetiteVue.createApp().mount()
      3. </script>
      先体验到这里吧。