快捷導(dǎo)航

petite vue 基本使用指南示例小結(jié)

更新時(shí)間：2024年07月02日 09:38:45 作者：Yune_Neko

petite-vue 是為漸進(jìn)增強(qiáng)而優(yōu)化的另一種 Vue 發(fā)行版,它提供與標(biāo)準(zhǔn) Vue 相同的模板語法和反應(yīng)性心智模型,這篇文章主要介紹了petite vue 基本使用指南,需要的朋友可以參考下

前言

petite-vue 是為漸進(jìn)增強(qiáng)而優(yōu)化的另一種 Vue 發(fā)行版。它提供與標(biāo)準(zhǔn) Vue 相同的模板語法和反應(yīng)性心智模型。

不過，它專門針對(duì)在由服務(wù)器框架呈現(xiàn)的現(xiàn)有 HTML 頁面上“散布”少量交互進(jìn)行了優(yōu)化。

petite-vue，它在提供 vue 基本功能的同時(shí)，還能一個(gè)輕量級(jí)，簡單應(yīng)用的微框架，這樣也能保證開發(fā)者有一個(gè)不錯(cuò)的使用體驗(yàn)。

只有 ~6kb
兼容 Vue 的模板語法
基于 DOM，就地變化
由 @vue/reactivity 驅(qū)動(dòng)
無需構(gòu)建

引入項(xiàng)目

CDN 引入

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>
<script
  src="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js"
  defer
  init
></script>

當(dāng)然也可以把該地址內(nèi)部代碼全部賦值到本地 js 文件中使用

defer 屬性可使腳本在文檔被解析后執(zhí)行

如不使用 defer 則需手動(dòng)初始化 PetiteVue.createApp().mount()
init 屬性會(huì)告訴 petite-vue 自動(dòng)查詢和初始化頁面上所有具有 v-scope 的元素
v-scope 標(biāo)記頁面上需要使用 petite-vue 渲染的地方

根作用域

使用 createApp 在頁面上注冊一個(gè)根作用域, 內(nèi)容在 html 代碼中可用. 可以理解為在 Vue 中的暴露至 template

<script type="module">
  import { createApp } from "../lib/petite-vue.js";
  createApp({
    // 暴露出的數(shù)據(jù) 直接寫在 createApp 內(nèi)的是響應(yīng)式數(shù)據(jù)
    count: 0,
    // getter
    get plusOne() {
      return this.count + 1;
    },
    // methods
    increment() {
      this.count++;
    },
  }).mount();
</script>
<div v-scope>
  <!-- 經(jīng)典的插值表達(dá)式 -->
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <!-- v-on也是可用的 -->
  <button @click="increment">increment</button>
</div>

全局狀態(tài)管理

<script type="module">
  import { createApp, reactive } from "../lib/petite-vue.js";
  // 定義單獨(dú)一個(gè)對(duì)象存放數(shù)據(jù) 需要 reactive 來轉(zhuǎn)為響應(yīng)式數(shù)據(jù)
  const store = reactive({
    count: 1,
  });
  function inc() {
    store.count++;
  }
  // 執(zhí)行一次
  inc();
  createApp({
    store,
    inc,
  }).mount();
</script>
<div v-scope="{ localCount: 0 }">
  <p>Global {{ store.count }}</p>
  <button @click="inc">增加全局?jǐn)?shù)據(jù)</button>
  <p>Local {{ localCount }}</p>
  <button @click="localCount++">增加局部變量</button>
</div>

生命周期

可以監(jiān)聽掛載與卸載事件

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

組件

使用組件可以復(fù)用邏輯但 petite-vue 的組件并不那么好用

按照 Vue 的習(xí)慣, 也可以使用一個(gè) js 文件作為一個(gè)組件

// footer.js
// 可以傳遞 props
export default function (props) {
  return {
    // 組件模板
    $template: `<footer>頁腳組件</footer>`,
    msg: "A message",
    print() {
      console.log(props);
    },
  };
}

如果創(chuàng)建了一個(gè)獨(dú)立的 js 文件作為組件, 則模板只能為字符串形式

在官方的 README 中模板有template元素的用法. 但那種只能寫在 html 文件中, 而寫在 html 文件內(nèi)的組件無法復(fù)用. 故在此不作展示

<!-- index.html -->
<!-- 使用組件 傳遞參數(shù)200 且在掛載時(shí)觸發(fā)方法 -->
<div v-scope="footer(200)" @vue:mounted="print"></div>
<script type="module" src="src/lib/petite-vue.js" defer int></script>
<script type="module">
  import { createApp } from "../lib/petite-vue.js";
  // 引入組件
  import footer from "../components/footer.js";
  createApp({
    footer, // 注入組件
  }).mount();
</script>

需要注意的是 @vue:mounted="print" 這個(gè)print方法的作用域是組件內(nèi)的print

基本示例

<!-- 在頁面載入時(shí)執(zhí)行函數(shù) -->
<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:;" rel="external nofollow"  class="nav-header">導(dǎo)航欄</a>
      <dl>
        <!-- v-on 與 class 的綁定 -->
        <dd :class="{'layui-this':store.currentHash === '#1-1'}">
          <a href="#1-1" rel="external nofollow" >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";
    // 全局響應(yīng)式數(shù)據(jù)
    const store = reactive({
      currentHash: "",
    });
    function loadArticle() {
      // do ...
    }
    // 當(dāng)頁面哈希改變時(shí)執(zhí)行操作
    window.onhashchange = () => loadArticle();
    // 創(chuàng)建根作用域
    createApp({
      store,
      loadArticle,
    }).mount();
  </script>
</body>