Was sind die neuen Funktionen im Vue3-Stil und wie werden sie verwendet?
May 14, 2023 pm 10:52 PM
Neue Stilfunktionen
Vue3.2-Version hat viele Verbesserungen am Stil einzelner Dateikomponenten vorgenommen, wie z. B. lokale Stile, CSS-Variablen und Stile, die für Vorlagen verfügbar gemacht werden. (Lernvideo-Sharing: Vue-Video-Tutorial)
1. Teilweiser Stil
Wenn das <style>-Tag das Attribut scoped hat, ist nur sein CSS vorhanden Auf die Elemente der aktuellen Komponente angewendet: <style> 標(biāo)簽帶有 scoped attribute 的時(shí)候，它的 CSS 只會(huì)應(yīng)用到當(dāng)前組件的元素上：
<template>
<div class="example">hi</div>
</template>
<style scoped>
.example {
color: red;
}
</style>二、深度選擇器
處于 scoped 樣式中的選擇器如果想要做更“深度”的選擇，也即：影響到子組件，可以使用 :deep() 這個(gè)偽類：
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>通過(guò)
v-html創(chuàng)建的 DOM 內(nèi)容不會(huì)被作用域樣式影響，但你仍然可以使用深度選擇器來(lái)設(shè)置其樣式。
三、插槽選擇器
默認(rèn)情況下，作用域樣式不會(huì)影響到 <slot/> 渲染出來(lái)的內(nèi)容，因?yàn)樗鼈儽徽J(rèn)為是父組件所持有并傳遞進(jìn)來(lái)的。使用 :slotted 偽類以確切地將插槽內(nèi)容作為選擇器的目標(biāo)：
<style scoped>
:slotted(div) {
color: red;
}
</style>四、全局選擇器
如果想讓其中一個(gè)樣式規(guī)則應(yīng)用到全局，比起另外創(chuàng)建一個(gè) <style>，可以使用 :global 偽類來(lái)實(shí)現(xiàn)：
<style scoped>
:global(.red) {
color: red;
}
</style>五、混合使用局部與全局樣式
你也可以在同一個(gè)組件中同時(shí)包含作用域樣式和非作用域樣式：
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
六、支持CSS Modules
<style module> 標(biāo)簽會(huì)被編譯為 CSS Modules 并且將生成的 CSS 類鍵暴露給組件：
1、 默認(rèn)以$style 對(duì)象暴露給組件；
<template>
<p :class="$style.red">
This should be red
</p>
</template>
<style module>
.red {
color: red;
}
</style>2、可以自定義注入module名稱
<template>
<p :class="classes.red">red</p>
</template>
<style module="classes">
.red {
color: red;
}
</style>七、與setup一同使用
注入的類可以通過(guò) useCssModule API 在 setup() 和 <script setup> 中使用：
<script setup>
import { useCssModule } from 'vue'
// 默認(rèn), 返回 <style module> 中的類
const defaultStyle = useCssModule()
// 命名, 返回 <style module="classes"> 中的類
const classesStyle = useCssModule('classes')
</script>八、動(dòng)態(tài) CSS
單文件組件的 <style> 標(biāo)簽可以通過(guò) v-bind
<script setup>
const theme = {
color: 'red'
}
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>?? 2. Tiefenselektor ?????? Wenn der Selektor im scoped-Stil eine ?tiefere“ Auswahl treffen m?chte, hei?t das: Einfluss erreichen Unterkomponenten k?nnen Sie die Pseudoklasse :deep() verwenden: ??rrreee??Der über v-html erstellte DOM-Inhalt wird vom Bereichsstil nicht beeinflusst . Sie k?nnen es aber trotzdem mit der Tiefenauswahl stylen. ??????3. Slot-Selektor??????Standardm??ig wirken sich Bereichsstile nicht auf den von <slot/> gerenderten Inhalt aus, da sie als gehalten und übergeben werden die übergeordnete Komponente. Verwenden Sie die Pseudoklasse :slotted, um den Slot-Inhalt genau als Selektor auszuw?hlen: ??rrreee???? Viertens, globaler Selektor ?????? Wenn Sie m?chten, dass eine der Stilregeln global angewendet wird, dann zus?tzlich , erstellen Sie einen <style>, der mit der Pseudoklasse :global implementiert werden kann: ??rrreee????5. Mischen Sie lokale und globale Stile??????Sie k?nnen Au?erdem enth?lt dieselbe Komponente sowohl Stile mit Gültigkeitsbereich als auch Stile ohne Gültigkeitsbereich: ??rrreee????6. Unterstützte CSS-Module??????<style module>-Tags werden in CSS-Module kompiliert und CSS-Klassenschlüssel generiert sind für Komponenten verfügbar: ????1. Standardm??ig werden sie für Komponenten als $style-Objekte verfügbar gemacht. ??rrreee??rrreee??7 es mit setup???? ??Die injizierte Klasse kann in setup() und <script setup> über die useCssModule-API verwendet werden: ??rrreee????8 ??Einzelne Dateikomponente Das <style>-Tag kann CSS-Werte dynamischen Komponentenzust?nden über die CSS-Funktion v-bind zuordnen: ??rrreeeDas obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen im Vue3-Stil und wie werden sie verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
So aktualisieren Sie einen Teilinhalt der Seite in Vue3
May 26, 2023 pm 05:31 PM
Um eine teilweise Aktualisierung der Seite zu erreichen, müssen wir nur das erneute Rendern der lokalen Komponente (dom) implementieren. In Vue l?sst sich dieser Effekt am einfachsten mit der v-if-Direktive erzielen. In Vue2 k?nnen wir zus?tzlich zur Verwendung der v-if-Anweisung zum erneuten Rendern des lokalen Doms auch eine neue leere Komponente erstellen. Wenn wir die lokale Seite aktualisieren müssen, springen wir zu dieser leeren Komponentenseite und springen dann wieder hinein der beforeRouteEnter-Schutz in der leeren Komponente. Wie in der Abbildung unten gezeigt, wie man in Vue3.X auf die Schaltfl?che ?Aktualisieren“ klickt, um das DOM im roten Feld neu zu laden und den entsprechenden Ladestatus anzuzeigen. Da der Guard in der Komponente in der scriptsetup-Syntax in Vue3.X nur o hat
So ?ndern Sie element.style
Nov 24, 2023 am 11:15 AM
Methoden für element.style zum ?ndern der Hintergrundfarbe des Elements; 2. ?ndern der Schriftgr??e des Elements; 4. ?ndern des Schriftstils des Elements; . ?ndern Sie die horizontale Ausrichtung des Elements. Detaillierte Einführung: 1. ?ndern Sie die Hintergrundfarbe des Elements. Die Syntax lautet "document.getElementById("myElement").style.backgroundColor = "red";" 2. ?ndern Sie die Schriftgr??e des Elements usw.
Wie Vue3 Markdown analysiert und Code-Hervorhebung implementiert
May 20, 2023 pm 04:16 PM
Um das Blog-Frontend mit Vue zu implementieren, müssen Sie die Markdown-Analyse implementieren. Wenn Code vorhanden ist, müssen Sie die Code-Hervorhebung implementieren. Es gibt viele Markdown-Parsing-Bibliotheken für Vue, wie z. B. markdown-it, vue-markdown-loader, markiert, vue-markdown usw. Diese Bibliotheken sind alle sehr ?hnlich. Hier wird Markiert verwendet, und highlights.js wird als Code-Hervorhebungsbibliothek verwendet. Die spezifischen Implementierungsschritte lauten wie folgt: 1. Installieren Sie abh?ngige Bibliotheken. ?ffnen Sie das Befehlsfenster unter dem Vue-Projekt und geben Sie den folgenden Befehl ein: npminstallmarked-save//marked, um Markdown in htmlnpmins zu konvertieren
vue3+vite: So beheben Sie den Fehler bei der Verwendung von require zum dynamischen Importieren von Bildern in src
May 21, 2023 pm 03:16 PM
vue3+vite:src verwendet ?require“, um Bilder dynamisch zu importieren, und vue3+vite importiert dynamisch mehrere Bilder. Wenn Sie ?requireisnotdefined“ verwenden, wird eine Fehlermeldung angezeigt like vue2 like imgUrl:require(' .../assets/test.png') wird importiert, da Typescript Require nicht unterstützt, daher wird Import verwendet. So l?sen Sie das Problem: Verwenden Sieawaitimport
So verwenden Sie tinymce im Vue3-Projekt
May 19, 2023 pm 08:40 PM
tinymce ist ein voll funktionsf?higes Rich-Text-Editor-Plug-in, aber die Einführung von tinymce in Vue ist nicht so reibungslos wie bei anderen Vue-Rich-Text-Plug-ins. Tinymce selbst ist nicht für Vue geeignet, und @tinymce/tinymce-vue muss eingeführt werden. und Es handelt sich um ein ausl?ndisches Rich-Text-Plug-in, das die chinesische Version nicht bestanden hat. Sie müssen das übersetzungspaket von der offiziellen Website herunterladen (m?glicherweise müssen Sie die Firewall umgehen). 1. Installieren Sie die zugeh?rigen Abh?ngigkeiten npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 3. Führen Sie den Skin und das chinesische Paket ein. Erstellen Sie einen neuen Tinymce-Ordner im ?ffentlichen Ordner des Projekts und laden Sie ihn herunter
So w?hlen Sie einen Avatar aus und schneiden ihn in Vue3 zu
May 29, 2023 am 10:22 AM
Der letzte Effekt besteht darin, die VueCropper-Komponente ?garnaddvue-cropper@next“ zu installieren. Wenn es sich um Vue3 handelt oder Sie andere Methoden als Referenz verwenden m?chten, besuchen Sie bitte die offizielle npm-Adresse. Es ist auch sehr einfach, es in einer Komponente zu referenzieren und zu verwenden. Sie müssen nur die entsprechende Komponente und ihre Stildatei einführen. Ich verweise hier nicht global, sondern nur auf import{userInfoByRequest}from'../js/api ' in meiner Komponentendatei. import{VueCropper}from'vue-cropper&
So verwenden Sie vue3+ts+axios+pinia, um eine sinnlose Aktualisierung zu erreichen
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia realisiert sinnlose Aktualisierung 1. Laden Sie zuerst aiXos und pinianpmipinia im Projekt herunter--savenpminstallaxios--save2. AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
So verwenden Sie wiederverwendbare Vue3-Komponenten
May 20, 2023 pm 07:25 PM
Vorwort Ob Vue oder React: Wenn wir auf mehrere wiederholte Codes sto?en, werden wir darüber nachdenken, wie wir diese Codes wiederverwenden k?nnen, anstatt eine Datei mit einer Reihe redundanter Codes zu füllen. Tats?chlich k?nnen sowohl Vue als auch React eine Wiederverwendung durch Extrahieren von Komponenten erreichen. Wenn Sie jedoch auf einige kleine Codefragmente sto?en und keine andere Datei extrahieren m?chten, kann React im Vergleich dazu verwendet werden Deklarieren Sie das entsprechende Widget in der Datei , oder implementieren Sie es über die Renderfunktion, wie zum Beispiel: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
