Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use petite-vue". In daily operation, I believe many people have doubts about how to use petite-vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use petite-vue". Next, please follow the editor to study!

Preface

Open Youda's GitHub and find that there is something called petite-vue. Boy, Vue3 and Vite haven't finished yet, so they start to fix new things again? In line with the attitude of learning if you can't die, let's take a look at what this is. Who makes him our grandfather?

Brief introduction

From the name, we can see that petite-vue is a mini version of vue, the size is only 5.8kb, it can be said to be very small. According to Youda, petite-vue is an alternative release of Vue and is optimized for incremental enhancements. It provides the same template syntax and responsive model as the standard Vue:

The size is only 5.8kb

Vue compatible template syntax

Based on DOM, local conversion

Responsive drive

Go to work

Here is some introduction to the use of petite-vue.

Easy to use

-{{count}} +

A simple counter is implemented by adding init at the same time through the introduction of the script tag, and then binding data using v-scope.

Students who have learned about the framework of Alpine.js may look a little familiar here, and the two grammars are very similar.

Open Dropdown Dropdown Body

In addition to using init, you can also use the following ways:

-{count}} + PetiteVue.createApp () .mount ()

Or how to use ES module:

Import {createApp} from "https://unpkg.com/petite-vue?module" createApp (). Mount ()-{{count}} + root scope

The createApp function can accept an object, just like we usually use data and methods, where v-scope does not need to be bound.

Import {createApp} from "https://unpkg.com/petite-vue?module" createApp ({count: 0, increment () {this.count++}, decrement () {this.count--}}) .mount ()-{{count}} + specifies the mount element

Import {createApp} from "https://unpkg.com/petite-vue?module" createApp ({count: 0}). Mount (" # app ") {{count}} Lifecycle

You can listen for lifecycle events for each element.

Import {createApp} from "https://unpkg.com/petite-vue?module" createApp ({onMounted1 (el) {console.log (el) / / 1}, onMounted2 (el) {console.log (el) / / 2}}) .mount (" # app ") 1 2 components

In petite-vue, components can be created using functions, and reuse can be achieved through template.

Import {createApp} from "https://unpkg.com/petite-vue?module" function Counter (props) {return {$template:" # counter-template ", count: props.initialCount, increment () {this.count++}, decrement () {this.count++} createApp ({Counter}). Mount ()-{{count}} + Global State Management

Global state management can be easily created with reactive responsive API.

Import {createApp, reactive} from "https://unpkg.com/petite-vue?module" const store = reactive ({count: 0, increment () {this.count++}}) / / add count to 1 store.increment () createApp ({store}). Mount () {{store.count}} + custom instruction

Here is a simple implementation of an input box autofocus instruction.

Import {createApp} from "https://unpkg.com/petite-vue?module" const autoFocus = (ctx) = > {ctx.el.focus ()} createApp (). Directive (" auto-focus ", autoFocus). Mount () built-in instruction

V-model

V-if / v-else / v-else-if

V-for

V-show

V-html

V-text

V-pre

V-once

V-cloak

Note: v-for does not require key, and v-for does not support deep deconstruction

Import {createApp} from "https://unpkg.com/petite-vue?module" createApp ({userList: [{name:" Zhang San ", age: {a: 23, b: 24}}, {name:" Li Si ", age: {a: 23, b: 24}}, {name:" Wang Wu ", age: {a: 23) B: 24}}]}) .mount () {{age.a}} {{a}} is not supported

To be more lightweight and compact, petite-vue does not support the following features:

Ref (), computed

Render function, because petite-vue does not have a virtual DOM

Map, Set and other response types are not supported

Transition, KeepAlive, Teleport, Suspense

Vmuron = "object"

V-is &

V-bind:style auto-prefixing

At this point, the study on "how to use petite-vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.