petite-vue 基本使用指南

前言

petite-vue 是为渐进增强而优化的另一种 Vue 发行版。它提供与标准 Vue 相同的模板语法和反应性心智模型。

不过,它专门针对在由服务器框架呈现的现有 HTML 页面上“散布”少量交互进行了优化。

petite-vue,它在提供 vue 基本功能的同时,还能一个轻量级,简单应用的微框架,这样也能保证开发者有一个不错的使用体验。

  • 只有 ~6kb
  • 兼容 Vue 的模板语法
  • 基于 DOM,就地变化
  • 由 @vue/reactivity 驱动
  • 无需构建

引入项目

CDN 引入

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>

<script
  src="https://unpkg.com/[email protected]/dist/petite-vue.iife.js"
  defer
  init
></script>

当然也可以把该地址内部代码全部赋值到本地 js 文件中使用

  • defer 属性可使脚本在文档被解析后执行

    如不使用 defer 则需手动初始化 PetiteVue.createApp().mount()

  • init 属性会告诉 petite-vue 自动查询和初始化页面上所有具有 v-scope 的元素

  • v-scope 标记页面上需要使用 petite-vue 渲染的地方

根作用域

使用 createApp 在页面上注册一个根作用域, 内容在 html 代码中可用. 可以理解为在 Vue 中的暴露至 template

<script type="module">
  import { createApp } from "../lib/petite-vue.js";
  createApp({
    // 暴露出的数据
    count: 0,
    // getter
    get plusOne() {
      return this.count + 1;
    },
    // methods
    increment() {
      this.count++;
    },
  }).mount();
</script>
<div v-scope>
  <!-- 经典的插值表达式 -->
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <!-- v-on也是可用的 -->
  <button @click="increment">increment</button>
</div>

全局状态管理

<script type="module">
  import { createApp, reactive } from "../lib/petite-vue.js";
  const store = reactive({
    count: 1,
  });
  function inc() {
    store.count++;
  }
  // 执行一次
  inc();
  createApp({
    store,
    inc,
  }).mount();
</script>

<div v-scope="{ localCount: 0 }">
  <p>Global {{ store.count }}</p>
  <button @click="inc">增加全局数据</button>

  <p>Local {{ localCount }}</p>
  <button @click="localCount++">增加局部变量</button>
</div>

生命周期

可以监听挂载与卸载事件

<div
  v-if="show"
  @vue:mounted="console.log('mounted on: ', $el)"
  @vue:unmounted="console.log('unmounted: ', $el)"
></div>

示例

<!-- 在页面载入时执行函数 -->
<body v-scope @vue:mounted="loadArticle()">
  <!-- v-show 显示控制 -->
  <ul v-show="!store.currentHash.includes('#4')">
    <li v-show="store.currentHash.includes('#1-')">
      <a href="javascript:;" class="nav-header">导航栏</a>
      <dl>
        <!-- v-on 与 class 的绑定 -->
        <dd :class="{'layui-this':store.currentHash === '#1-1'}">
          <a href="#1-1">1-1</a>
        </dd>
      </dl>
    </li>
  </ul>
  <script type="module" src="src/lib/petite-vue.js" defer int></script>
  <script type="module">
    import "../lib/layui/layui.js";
    import { createApp, reactive } from "../lib/petite-vue.js";
    // 全局响应式数据
    const store = reactive({
      currentHash: "",
    });
    function loadArticle() {
      // do ...
    }
    // 当页面哈希改变时执行操作
    window.onhashchange = () => loadArticle();
    // 创建根作用域
    createApp({
      store,
      loadArticle,
    }).mount();
  </script>
</body>

参考链接

https://github.com/vuejs/petite-vue

热门相关:国民女神:重生王牌千金   神秘复苏   别吃那个鬼   我的爱情,从不返航   嫡女谋:逆天三小姐