Petite-vue is an alternative release to VUE optimized for progressive enhancement. It provides the same template syntax and reactive thinking model as standard Vue. However, it is specifically optimized to “spray” a small amount of interaction on existing HTML pages rendered by the server framework.

  • Only 5.8 KB
  • Vue compatible template syntax
  • DOM based, in place mutation
  • By driving @vue/reactivity

status

  • It’s quite new. Errors may exist, and API changes may still exist, so use at your own risk. But will it work? Very much. See an example to see what it does.
  • The problem list is deliberately disabled because I now have higher priorities to focus on and don’t want to be distracted. If you find an error, you must either fix it or submit PR to fix it yourself. That said, feel free to use the discussion TAB to help each other.
  • It is unlikely that functional requests will be accepted at this time – the scope of the project is deliberately kept to a minimum.

usage

Petite-vue can be used without construction steps. Simply load it from the CDN:

< script SRC =" https://unpkg.com/petite-vue "lazy initialization > </ script ><! -- Anywhere in the page --> 
< div  v-scope =" { count: 0 } " >
  {{ 数数 }}
  < button  @click =" count++ " > inc </ button > 
</ div >
Copy the code
  • usev-scopeThe logo area should be controlled on the pagepetite-vue.
  • thedeferProperty causes the script to execute after parsing the HTML content.
  • theinitAttribute tells thepetite-vueAutomatic query and initializationv-scopeAll the elements on the page.

Manual initialization

If you don’t want automatic initialization, remove the init property and move the script to end of :

< script SRC =" https://unpkg.com/petite-vue "> </ script > < script > PetiteVue. Create an application (). Mount () </ script >Copy the code

Or, build with the ES module:

< script type =" module "> import {createApp} from 'https://unpkg.com/petite-vue?module' createApp (). Mount () </ script >Copy the code

Production of CDN urls

Short CDN urls are used for prototyping. For production use, use a fully parsed CDN URL to avoid parsing and redirection costs:

  • Global build:https://unpkg.com/[email protected]/dist/petite-vue.iife.js
  • Public PetiteVue global, support automatic initialization
  • ESM construction:https://unpkg.com/[email protected]/dist/petite-vue.es.js
  • Must be connected to<script type="module">

Root range

The createApp function accepts a data object as the root scope for all expressions. This can be used to boot a simple one-off application:

<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>
Copy the code

Note V-scope does not need to have a value here and is only used as a hint for petite-Vue processing elements.

Petite vue is a warehouse in Utah