petite vue Basic User Guide Example Summary

Preface

petite-vue is another Vue distribution optimized for progressive enhancement. It provides the same template syntax and reactive mind model as standard Vue.

However, it is optimized specifically for "scattering" a small amount of interactions on existing HTML pages rendered by the server framework.

petite-vue, while providing basic functions of vue, it also provides a lightweight, simple application micro framework, which can also ensure that developers have a good user experience.

Only ~6kb
Vue-compatible template syntax
Based on DOM, on-site change
Powered by @vue/reactivity
No need to build

Introduce a project

CDN introduction

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>
<script
  src="/[email protected]/dist/"
  defer
  init
></script>

Of course, you can also assign all the internal codes of this address to the local js file for use.

deferProperties enable scripts to be executed after the document is parsed

If you do not use defer, you need to initialize it manually.().mount()
initThe attribute will tell petite-vue to automatically query and initialize all elements with v-scope on the page.
v-scopeTag the places on the page where petite-vue is needed to render

Root scope

usecreateAppRegister one on the pageRoot scope, the content is available in html code. It can be understood as exposure to template in Vue

&lt;script type="module"&gt;
  import { createApp } from "../lib/";
  createApp({
    // The exposed data is directly written in createApp. Responsive data    count: 0,
    // getter
    get plusOne() {
      return  + 1;
    },
    // methods
    increment() {
      ++;
    },
  }).mount();
&lt;/script&gt;
&lt;div v-scope&gt;
  &lt;!-- Classic interpolation expressions --&gt;
  &lt;p&gt;{{ count }}&lt;/p&gt;
  &lt;p&gt;{{ plusOne }}&lt;/p&gt;
  &lt;!-- v-onAlso available --&gt;
  &lt;button @click="increment"&gt;increment&lt;/button&gt;
&lt;/div&gt;

Global state management

&lt;script type="module"&gt;
  import { createApp, reactive } from "../lib/";
  // Define a single object to store data. Reactive is required to convert it into reactive data.  const store = reactive({
    count: 1,
  });
  function inc() {
    ++;
  }
  // Execute once  inc();
  createApp({
    store,
    inc,
  }).mount();
&lt;/script&gt;
&lt;div v-scope="{ localCount: 0 }"&gt;
  &lt;p&gt;Global {{  }}&lt;/p&gt;
  &lt;button @click="inc"&gt;Add global data&lt;/button&gt;
  &lt;p&gt;Local {{ localCount }}&lt;/p&gt;
  &lt;button @click="localCount++"&gt;Add local variables&lt;/button&gt;
&lt;/div&gt;

life cycle

Can listen for mount and uninstall events

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

Components

Use components to reuse logic, but petite-vue components are not that easy to use

According to Vue's habit, you can also use a js file as a component

// 
// Can pass propsexport default function (props) {
  return {
    // Component template    $template: `&lt;footer&gt;Footer Component&lt;/footer&gt;`,
    msg: "A message",
    print() {
      (props);
    },
  };
}

If a standalone js file is created as a component, the template can only be in string form

In the official README templates aretemplateThe usage of elements. However, the components written in the html file can not be reused. Therefore, they will not be displayed here

&lt;!--  --&gt;
&lt;!-- Usage Components Pass parameters200 And trigger method when mount --&gt;
&lt;div v-scope="footer(200)" @vue:mounted="print"&gt;&lt;/div&gt;
&lt;script type="module" src="src/lib/" defer int&gt;&lt;/script&gt;
&lt;script type="module"&gt;
  import { createApp } from "../lib/";
  // Introduce components  import footer from "../components/";
  createApp({
    footer, // Inject component  }).mount();
&lt;/script&gt;

It should be noted that@vue:mounted="print"thisprintThe scope of the method is within the componentprint

Basic examples

&lt;!-- Execute functions when page loads --&gt;
&lt;body v-scope @vue:mounted="loadArticle()"&gt;
  &lt;!-- v-show Display control --&gt;
  &lt;ul v-show="!('#4')"&gt;
    &lt;li v-show="('#1-')"&gt;
      &lt;a href="javascript:;" rel="external nofollow"  class="nav-header"&gt;Navigation bar&lt;/a&gt;
      &lt;dl&gt;
        &lt;!-- v-on and class Binding of --&gt;
        &lt;dd :class="{'layui-this': === '#1-1'}"&gt;
          &lt;a href="#1-1" rel="external nofollow" &gt;1-1&lt;/a&gt;
        &lt;/dd&gt;
      &lt;/dl&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;script type="module" src="src/lib/" defer int&gt;&lt;/script&gt;
  &lt;script type="module"&gt;
    import "../lib/layui/";
    import { createApp, reactive } from "../lib/";
    // Global responsive data    const store = reactive({
      currentHash: "",
    });
    function loadArticle() {
      // do ...
    }
    // Execute the action when the page hash changes     = () =&gt; loadArticle();
    // Create root scope    createApp({
      store,
      loadArticle,
    }).mount();
  &lt;/script&gt;
&lt;/body&gt;

Reference link

/vuejs/petite-vue

This is the end of this article about the basic guide to using petite vue. For more related content on using petite vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!