Vue front-end les notes les plus, les plus et les plus basiques 1 - idées de base, ajustement du style, localStorage

train de pensée

style d'accord

En ce qui concerne l'ajustement du style, vous pouvez sélectionner le type d'élément que vous souhaitez ajuster dans les outils de développement du navigateur et le modifier dans la classe.

Vous pouvez d'abord pré-modifier le style dans l'outil de développement, puis aller dans le compilateur vscode pour le changer.

Si vous ne trouvez pas cette classe dans le fichier, il se peut qu'elle se trouve dans le css public. Afin de ne pas la modifier uniformément, vous pouvez le modifier séparément dans le fichier.

citation

S'il y a quelque chose que vous ne comprenez pas, vérifiez s'il existe un code empaqueté référencé et accédez au fichier référencé pour voir ce qui se passe. S'il y a des citations qui ne peuvent pas être comprises, vous devez passer au niveau de citation suivant.
Ctrl clic gauche permet d'entrer dans la définition du calque supérieur ?

stockage local

this.ruleForm.ip = localStorage.getItem("Ip");

Le contenu de getItem ici peut être vérifié en recherchant setItem("Ip") dans la recherche globale en haut à gauche,

et il s'avère que l'URL ici fournit une adresse IP.

export default {
    
    
  name: "APP",
  created() {
    
    
    axios.get('http://ip-api.com/json/?lang=zh-CN').then(res => {
    
    
      // console.log(res)
      if (!res.data.query.includes('.')) {
    
    
        localStorage.setItem('Ip', '0.0.0.0')
        localStorage.setItem('cityname', '未知')
      } else {
    
    
        localStorage.setItem('Ip', res.data.query)
        localStorage.setItem('cityname', `${
      
      res.data.regionName} ${
      
      res.data.city}`)
      }
    }).catch(() => {
    
    
      localStorage.setItem('Ip', '0.0.0.0')
    }).finally(() => {
    
    
      console.log(localStorage.getItem('Ip'))
    })

Bienvenue dans l'éditeur Markdown

Bonjour! Il s'agit de la page d'accueil qui s'affiche la première fois que vous utilisez l'éditeur Markdown . Si vous souhaitez apprendre à utiliser l'éditeur Markdown, vous pouvez lire attentivement cet article pour comprendre la syntaxe de base de Markdown.

nouveaux changements

Nous avons fait quelques extensions fonctionnelles et un support de syntaxe pour l'éditeur Markdown. En plus des fonctions standard de l'éditeur Markdown, nous avons ajouté les nouvelles fonctionnalités suivantes pour vous aider à écrire des blogs avec :

1. La nouvelle conception de l'interface apportera une nouvelle expérience d'écriture;
2. Définissez votre style de surbrillance de code préféré dans le centre de création, et Markdown affichera le style de surbrillance sélectionné dans l'extrait de code ;
3. Ajout de la fonction de déplacement d'image , vous pouvez directement faire glisser et déposer des images locales dans la zone d'édition pour un affichage direct ;
4. Nouvelle syntaxe de formule mathématique KaTeX ;
5. Ajout de la fonction sirène syntaxe ¹ qui prend en charge les diagrammes de Gantt ;
6. Ajout de la fonction d' édition d'articles Markdown sur plusieurs écrans ;
7. Ajout de fonctions telles que le mode d'écriture ciblée, le mode de prévisualisation, le mode d'écriture concise et les paramètres de roue de synchronisation des zones gauche et droite Le bouton de fonction est situé au milieu de la zone d'édition et de la zone de prévisualisation ;
8. Ajout de la fonctionnalité de liste de contrôle .

Touche de raccourci de fonction

Ctrl/Command+ Annuler : + Z
Rétablir : + Gras : + Italique : + Titre : + + Liste non ordonnée : + + Liste ordonnée : + + Liste de contrôle : + +Insérer un code : + + Insérer un lien : + + Insérer une image : + + Rechercher : + Remplacer : +Ctrl/CommandY
Ctrl/CommandB
Ctrl/CommandI
Ctrl/CommandShiftH
Ctrl/CommandShiftU
Ctrl/CommandShiftO
Ctrl/CommandShiftC
Ctrl/CommandShiftK
Ctrl/CommandShiftL
Ctrl/CommandShiftG
Ctrl/CommandF
Ctrl/CommandG

La création raisonnable du titre est utile pour la génération du catalogue

Entrez 1 fois directement #et appuyez dessus space, et un titre de niveau 1 sera généré.
Après avoir entré 2 fois #et appuyé dessus space, un titre à 2 niveaux sera généré.
Par analogie, nous supportons 6 niveaux de rubriques. TOCAide à générer une table des matières parfaite après avoir utilisé la syntaxe.

Comment changer le style du texte

texte souligné texte souligné

texte en gras texte en gras

texte de balisage

supprimer du texte

texte cité

H2O est un liquide _.

2 ¹⁰ résultat de l'opération est 1024.

Insérer des liens et des images

lien : lien .

image:

Photo avec dimensions :

Image centrée :

Images centrées et dimensionnées :

Bien sûr, afin de le rendre plus pratique pour les utilisateurs, nous avons ajouté la fonction de glisser-déposer des images.

Comment insérer un beau morceau de code

Accédez à la page des paramètres du blog , choisissez un style de surbrillance d'extrait de code que vous aimez, et la même surbrillance est illustrée ci-dessous 代码片.

// An highlighted block
var foo = 'bar';

Générez une liste qui fonctionne pour vous

• projet
  • projet
    • projet

1. objet 1
2. article 2
3. article 3

• Tâches planifiées
• mission accomplie

créer un formulaire

Un tableau simple est créé comme ceci :

projet	Valeur
ordinateur	1600 $
téléphone portable	12 $
cathéter	1 $

Définir le contenu pour qu'il soit centré, à gauche et à droite

Utiliser :---------:le centre
Utiliser :----------la gauche
Utiliser ----------:la droite

première rangée	La deuxième colonne	troisième colonne
Centrer la première colonne de texte	La deuxième colonne de texte est alignée à droite	Texte de la troisième colonne à gauche

SmartyPants

SmartyPants convertit les caractères de ponctuation ASCII en entités HTML de ponctuation typographique "intelligentes". Par exemple:

TAPER	ASCII	HTML
Backticks simples	'Isn't this fun?'	« N'est-ce pas amusant ?
Citations	"Isn't this fun?"	"N'est-ce pas amusant ?"
Tirets	-- is en-dash, --- is em-dash	– est un tiret demi-cadratin, — est un tiret cadratin

créer une liste personnalisée

Réduction

Outil de conversion de texte en HTML

Auteurs

John

Luc

Comment créer une note de bas de page

Un texte avec des notes de bas de page. ²

Les annotations sont également essentielles

Markdown convertit le texte en HTML .

Formule mathématique KaTeX

Vous pouvez rendre des expressions mathématiques LaTeX en utilisant KaTeX :

Infrastructure gamma $C\left(n\right)=(n-1)\; !\forall n\_\in N$ est l'intégrale d'Euler

$$C\left(z\right)={\int }_0^{}{t}^{z-1}{e}^{-t}dt.$$

Vous pouvez trouver plus d'informations sur les expressions mathématiques LaTeX ici .

Nouvelle fonctionnalité de diagramme de Gantt pour enrichir vos articles

• Pour la syntaxe du diagramme de Gantt , reportez-vous ici ,

Diagrammes UML

Peut être rendu à l'aide de diagrammes UML. Sirène Par exemple, un diagramme de séquence généré ci-dessous :

Cela générera un organigramme. :

• Pour la syntaxe Mermaid , reportez-vous ici ,

Organigramme organigramme

Nous prendrons toujours en charge l'organigramme de l'organigramme :

• Pour la syntaxe de l'organigramme Flowchart , reportez-vous ici .

Exporter et importer

exporter

Si vous voulez essayer d'utiliser cet éditeur, vous pouvez modifier cet article librement. Lorsque vous avez fini d'écrire un article, recherchez l'exportation d'article dans la barre d'outils supérieure et générez un fichier .md ou un fichier .html pour le stockage local.

importer

Si vous souhaitez charger un fichier .md que vous avez écrit, vous pouvez sélectionner la fonction d'importation dans la barre d'outils supérieure pour importer le fichier avec l'extension correspondante et
poursuivre votre création.

---

1. description de la syntaxe de la sirène ↩︎

2. Explication des notes de bas de page↩︎