vue3 learning record I
Current version 3.2.25, official website address https://v3.cn.vuejs.org/guide
install
Import the latest version in the form of CDN package for development and use
<script src="https://unpkg.com/vue@next"></script>
npm installation
# Latest stable version
$ npm install vue@next
# Single file component compilation plug-in
$ npm ...
Added by s.steele on Sat, 26 Feb 2022 16:24:58 +0200
vue life cycle
Each Vue instance will go through a series of initialization processes when it is created - for example, it needs to set data listening, compile templates, mount the instance to the DOM, and update the DOM when the data changes. At the same time, some functions called life cycle hooks will be run in this process, which gives users the opportuni ...
Added by icaro on Sat, 26 Feb 2022 14:04:48 +0200
Vue3. Seven component communication modes of X
1, Premise
This kind of combination is more specific to the API composition method, which is equivalent to the free writing method vue document Description of two ways.
This article will introduce the following seven component communication modes: ● props ● emit ● v-model ● refs ● provide / inject ● eventBus ● vuex / pinia (status manag ...
Added by NSW42 on Thu, 24 Feb 2022 07:58:49 +0200
[Use and Explanation of vue3 Pinia] The New Generation Store Application of vue3
This article is intended to quickly help you get started with the basic and core parts of Pinia. For a complete understanding, see the official website or follow-up articles (rewrite when available), and Pinia can also be used in SSR. Also: This Chinese name can be called pineapple. It originated from the Spanish language PIA and was translated ...
Added by mahendrakalkura on Wed, 23 Feb 2022 19:28:46 +0200
Build antv data visualization large screen from zero (lightweight vite-react-ts)
Summary
Previously, Ofter detailed how to write visualization screens from scratch using Vue. Today, we'll show you how to write visualization charts using React. Why are we still learning React? Because of its lightweight nature, visualization charts like antv are all in React, although antv has one viser (React/Vue/Angular th ...
Added by brown2005 on Wed, 23 Feb 2022 19:00:59 +0200
[Vue] Vue life cycle and its hook function
Each Vue instance must go through a series of initialization processes before being created. This process is the Vue life cycle.
vue2. Lifecycle hook functions for 0 (10)
beforeCreate:
After instance initializationData observer and event/watcher events have not been configured yet.
created:
Called after the instance has been crea ...
Added by kfir91 on Tue, 22 Feb 2022 06:58:53 +0200
Vue.js, deep monitoring of watch
Because of Xiaobian's marriage and family affairs. I stopped updating for a long time. Today, Xiaobian came back again. Today, let's take you to learn about Vue Use of watch listening events in JS.
Usage of handler and immediate
<div>
<h2>It's a fine day today{{info}}</h2>
<button @click="isHot = !isHot">Po ...
Added by ttroutmpr on Mon, 21 Feb 2022 16:16:01 +0200
Learning note system
Interface documentation: API | Vue.js
$data:
API documentation:
Type: Object Details: The data object on which the component instance is listening. The component instance proxies access to its data object property.
Test code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title ...
Added by bschultz on Mon, 21 Feb 2022 14:00:11 +0200
Introduction to vue -- the use of vue router in vue
preface
Before learning Vue router, we should learn how to install Vue router in IDEA. If you don't understand it, please jump to the blog Installing Vue router in IDEA.
7. Route Vue router
After we install Vue router, we need to import the dependency
<script src="node_modules/vue-router/dist/vue-router.js"></script>
One ...
Added by Braclayrab on Sun, 20 Feb 2022 03:36:26 +0200
Communication mode between vue components (full)
Component communication classification:
Parent child component communicationSibling component communicationGrandson and descendant component communication‘Non relational component communication
8 common communication modes
1. Pass through props
Usage scenario: parent to child Usage: the child component sets and declares the props attr ...
Added by wolfrat on Sun, 20 Feb 2022 00:24:22 +0200