Petite Vue - 輕量級Vue js框架

petite vue 是輕量化版本的Vue，只有6kb，可直接寫在HTML，並不用透過cli直接載入cdn即可使用。

可以全域啟用Petite Vue

<script src="https://unpkg.com/petite-vue"></script><script>
  PetiteVue.createApp().mount()
</script>

或者是使用module:

<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      $template: '#counter-template',
      count: props.initialCount,
      inc() {
        this.count++
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>

<template id="counter-template">
  My count is {{ count }}
  <button @click="inc">++</button></template>

<!-- reuse it -->
<div v-scope="Counter({ initialCount: 1 })"></div><div v-scope="Counter({ initialCount: 2 })"></div>

甚至是用module來開發component

// ScrollSpy.js
export const ScrollSpy = () => ({
    $template: `<div class="scroll-spy"></div>`,
    get screenWidth(){
      // 相當於computed的用法
    },
    getRwdValue() {
      // 相當於methods的用法
    },
    mounted(){
      // component mounted hook
    }
})

<!-- index.html，使用ScrollSpy component -->
<div v-scope="ScrollSpy({
    threshold: 0.18,
    styles: {
        dot: ['{bg:#2B9B97!}'],
        title: ['{color:#2B9B97!}'],
        container: ['{bg:#28C1BC!}.active_.dot','{color:#28C1BC!}.active_.title','{color:#28C1BC!}:hover_.title','{bg:#28C1BC!}:hover_.dot']
    },
})" @vue:mounted="mounted"></div>