MindMap Gallery Vue3
It introduces the syntax and common extension plug-ins of vue3 in detail, which is convenient for learning and query. It is full of useful information. Interested friends can refer to it!
Edited at 2024-02-04 00:46:16Mappa mentale per l’analisi del controllo della gestione del portata di progetto. Tre sezioni principali: 1. WBS Scope Breakdown – scomposizione gerarchica del lavoro con dettaglio dello Scopo del progetto. 2. Scope Boundary / Exclusions – definizione chiara dei confini del progetto e di ciò che è escluso per evitare scope creep. Strumento ideale per project manager e team di controllo per mantenere allineamento e ridurre rischi.
Questo template, ideato con EdrawMind, è un modello completo per il miglioramento continuo del sistema di gestione della qualità, con una descrizione di circa 500 parole. È strutturato come un diagramma a lisca di pesce, strumento efficace per analizzare le cause principali dei problemi di qualità e definire le leve di controllo necessarie per risolverli. Il processo è organizzato in quattro fasi chiave: la prima è lo standard e la pianificazione, dove si definiscono gli obiettivi di qualità, i criteri di accettazione, i requisiti di prova e le porte di qualità (Quality Gate). La seconda fase analizza i processi e le porte di controllo, per garantire che ogni passaggio del lavoro segua i standard stabiliti. La terza fase riguarda l’esecuzione QA/QC, con la definizione di metodi di prova e ispezione, nonché regole per la gestione dei difetti e delle non conformità. L’ultima fase è il miglioramento e le azioni correttive e preventive (CAPA), insieme a una catena di audit per monitorare l’efficacia delle misure adottate. In basso, una tabella "Quality Gate" permette di tracciare ogni punto di controllo, con criteri specifici, metodi di prova, proprietario e stato di avanzamento. Grazie alla visualizzazione chiara e intuitiva di EdrawMind, questo strumento aiuta il team a identificare le cause root dei problemi di qualità, implementare azioni efficaci e mantenere un ciclo di miglioramento continuo, garantendo la qualità finale del prodotto o servizio.
Questo template, creato con EdrawMind, è un modello di piano di comunicazione ottimizzato, con una descrizione di circa 500 parole. È uno strumento chiave per evitare incomprensioni tra stakeholder, garantire la trasparenza e mantenere il team allineato agli obiettivi del progetto. Il modello è composto da tre elementi fondamentali e interconnessi: la matrice di comunicazione, la cadenza timeline e le regole di comunicazione/SLA. La matrice di comunicazione è una tabella dettagliata dove per ogni pubblico o stakeholder, si definisce il tipo di informazioni da condividere, lo scopo della comunicazione, il canale da utilizzare (email, riunioni, piattaforme di progetto), la frequenza, il proprietario responsabile, il formato e il percorso di escalazione in caso di problemi. La cadenza timeline è una linea temporale che definisce le scadenze delle comunicazioni chiave, garantendo che le informazioni siano condivise in momento opportuno e non si verifichino ritardi o omissioni. Le regole di comunicazione e gli accordi sul livello di servizio (SLA) definiscono le norme formali della comunicazione, come i tempi di risposta, il tono da adottare e le responsabilità di ciascun membro del team. Grazie alla struttura visuale di EdrawMind, questo template permette di pianificare la comunicazione in modo strategico, trasparente e efficiente, riducendo i rischi di cattiva informazione, migliorando la collaborazione e garantendo che tutti gli stakeholder siano informati e coinvolti nel progetto.
Mappa mentale per l’analisi del controllo della gestione del portata di progetto. Tre sezioni principali: 1. WBS Scope Breakdown – scomposizione gerarchica del lavoro con dettaglio dello Scopo del progetto. 2. Scope Boundary / Exclusions – definizione chiara dei confini del progetto e di ciò che è escluso per evitare scope creep. Strumento ideale per project manager e team di controllo per mantenere allineamento e ridurre rischi.
Questo template, ideato con EdrawMind, è un modello completo per il miglioramento continuo del sistema di gestione della qualità, con una descrizione di circa 500 parole. È strutturato come un diagramma a lisca di pesce, strumento efficace per analizzare le cause principali dei problemi di qualità e definire le leve di controllo necessarie per risolverli. Il processo è organizzato in quattro fasi chiave: la prima è lo standard e la pianificazione, dove si definiscono gli obiettivi di qualità, i criteri di accettazione, i requisiti di prova e le porte di qualità (Quality Gate). La seconda fase analizza i processi e le porte di controllo, per garantire che ogni passaggio del lavoro segua i standard stabiliti. La terza fase riguarda l’esecuzione QA/QC, con la definizione di metodi di prova e ispezione, nonché regole per la gestione dei difetti e delle non conformità. L’ultima fase è il miglioramento e le azioni correttive e preventive (CAPA), insieme a una catena di audit per monitorare l’efficacia delle misure adottate. In basso, una tabella "Quality Gate" permette di tracciare ogni punto di controllo, con criteri specifici, metodi di prova, proprietario e stato di avanzamento. Grazie alla visualizzazione chiara e intuitiva di EdrawMind, questo strumento aiuta il team a identificare le cause root dei problemi di qualità, implementare azioni efficaci e mantenere un ciclo di miglioramento continuo, garantendo la qualità finale del prodotto o servizio.
Questo template, creato con EdrawMind, è un modello di piano di comunicazione ottimizzato, con una descrizione di circa 500 parole. È uno strumento chiave per evitare incomprensioni tra stakeholder, garantire la trasparenza e mantenere il team allineato agli obiettivi del progetto. Il modello è composto da tre elementi fondamentali e interconnessi: la matrice di comunicazione, la cadenza timeline e le regole di comunicazione/SLA. La matrice di comunicazione è una tabella dettagliata dove per ogni pubblico o stakeholder, si definisce il tipo di informazioni da condividere, lo scopo della comunicazione, il canale da utilizzare (email, riunioni, piattaforme di progetto), la frequenza, il proprietario responsabile, il formato e il percorso di escalazione in caso di problemi. La cadenza timeline è una linea temporale che definisce le scadenze delle comunicazioni chiave, garantendo che le informazioni siano condivise in momento opportuno e non si verifichino ritardi o omissioni. Le regole di comunicazione e gli accordi sul livello di servizio (SLA) definiscono le norme formali della comunicazione, come i tempi di risposta, il tono da adottare e le responsabilità di ciascun membro del team. Grazie alla struttura visuale di EdrawMind, questo template permette di pianificare la comunicazione in modo strategico, trasparente e efficiente, riducendo i rischi di cattiva informazione, migliorando la collaborazione e garantendo che tutti gli stakeholder siano informati e coinvolti nel progetto.
Vue3
Create project
vue create A
Template syntax
text
{{ msg }}
Anywhere
Equivalent to $A.text() in JS
Generally, it is used to set data with data() in js.
Old version
export default { name: '123', data(){ return{ msg: "Message prompt" } } }
new version
ref defines a variable, which can be reassigned using the .value attribute. ref is a repackage of reactive
reactive defines objects, cannot define basic data types, and cannot be reassigned
Raw HTML
When dynamically representing HTML with variables, double curly braces will interpret the data as normal text, not HTML
v-html=""
Equivalent to $A.html() in JS
Attributes
Use variables to dynamically represent attr
v-bind:id=""
Equivalent to $('div').attr('id', 'ID') in JS
v-bind:id can be abbreviated as:id
When we want B in A="B" to be a variable, just add: in front of A.
Simple js expressions can be supported in templates
Can
{{ number 1 }}
{{ ok ? 'YES' : 'NO'}}
{{ message.split( ' ').reverse().join( ' ')}}
no
{{ var a = 1 }}
This is a statement, not an expression
{{ if (ok) {return message} }}
Process control will not take effect, please use ternary expressions
Conditional rendering
v-if
Will only be rendered if the value is true
v-else
v-show
Will render but not display
List rendering
v-for
(x,index) in items
This command will loop len(items) times, and each time the x inside is used to get the value in items
:key="item.id"
Update in place to improve efficiency
event handling
Add event
Write directly
@click="counter = 1"
Call functions
@click="clickHandle(123)"
Old version
methods: { clickHandle(data){ console.log(data); } }
Changing the value of data in methods can be obtained through this.A
new version
You can add a parameter event, which is a native js event.
Notice
click can be triggered on any clicked object, such as <li>
Two-way binding
v-model
Can bidirectionally bind <input>, <textarea>, and <select>
Changing the value in data can change the value in <input>, Changing the value in <input> can also change the value in data
Convert an attribute to a model type
v-model:current-page="nowpage"
v-model.lazy
Will only change when <input> loses focus
v-model.trim
Remove leading and trailing whitespace when retrieving
components
suffix
.vue
content
template
script
export default object properties
name: the name of the component
data: pass data
methods: write functions
components: stores all components used in <template>
props: stores the data passed by the parent component to the child component
watch(): triggered when a certain data changes
computed: dynamically calculate a certain data
setup(props, context): initialize variables and functions
ref defines a variable, which can be reassigned using the .value attribute
Reactive definition object cannot be reassigned
context.emit(): function that triggers parent component binding
return can pass data to child components
style
scoped
If this attribute is present, this style will only take effect in the current component.
load
Introduce components
import A from ./components/A.vue
hanging on component
components:{A}
display component
<A/>
Component interaction
Parent component passed to child component
Pass html
<el-main>List</el-main>
Pass variables
method of delivery
Through props in export default in script
Passing steps
parent component
Write in the tag of the child component in the template
:A=B :C=D
If you want to pass some complex parameter B, you can write it in setup()
Here B is user
Subassembly
script
export default { name : "MyComponent", props: { A:{ type: String, default: "" }, }, }
Generally, choose one of required:true and default:""
Notice
Default values for arrays and objects must be functions
default:function(){ return []; }
default:function(){ return {}; }
In setup, you can reference the information of the parent component through props.
template
{{}} Quote
type passed
String
Number
Boolean
Array
Object
Function
Child component passed to parent component
method of delivery
Pass data through custom events
Passing steps
Subassembly
Write an event A in template
event source
Implement this event A in methods
Old version
this.$emit("B",this.message)
new version
context.emit("B"): function that triggers parent component binding
parent component
Write in the tag of the child component in the template
@B="C"
Implement this event C in methods. The event will have a parameter, which is the passed value.
C(data){}
Component life cycle
When created: beforeCreate, created When rendering: beforeMount, mounted When updating: beforeUpdate, updated When unmounting: beforeUnmount, unmounted
The eight periodic functions are at the same level as data
Introduce third parties
Swiper
carousel
Axios
network request
encapsulation
Create the utils folder in src and create the request.js file in it
Specific usage
https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38
10:16
Network request cross-domain solution
querystring
Convert to string
routing
Page jump
Write the URL that needs to be jumped in the routes in the router
<router-view>
show
<router-link to="...">
Jump
Carrying parameters
path:"/list/:A/:B"
to="/list/Baidu/1"
const route = useRoute(); {{route.params.userID}}
Nested routing
Redirect
{ path: '/:catchAll(.*)/', redirect: "/404", }
refresh
The default is to determine whether to refresh by name.
You can customize the judgment method by rewriting the key value
vuex
composition
state: use content in vuex
Getter: Filter and calculate data in Vuex
Mutation: Modify the state in the Vuex store
Old version
new version
import { useStore } from "vuex";
const store = useStore();
setup(){ store.dispatch("login", {paras}) }
Commit is a method for submitting and executing mutations. Mutations modify data and must be synchronized.
Dispatch is a method that submits and executes actions. Actions submit Mutations, which can be asynchronous operations.
action: similar to Mutation, supports asynchronous operations, but cannot modify the store
modules: submodules that define state
transfer
external
state
store.state.user.access
action
store.dispatch("function name", parameters)
mutation
store.commit("function name", parameters)
internal
mutations adjust state
state.id
call function
Change store to context
JWT
Password public key -> new string. If you have the public key, you can use it to verify whether the password is correct. But if you want to get the password through this new string, you need the private key. New string. Push back.
npm i jwt-decode
import jwt_decode from 'jwt-decode';
Note: There is a space after Bearer
ajax
If you want to use ajax on the vue page, you can write it directly in the setup, and it will be called directly when the page is generated. Of course, it can also be written in a function
If you want to use it in vuex, you need to put it in the function to trigger it.
other
setup()
Fragment without root node
Install element
npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
vue.config.js
const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } })