So verwenden Sie Setup- und benutzerdefinierte Anweisungen in Vue3
Syntaktischer Zucker einrichten
Der größte Vorteil besteht darin, dass alle Deklarationsteile direkt ohne Rückgabe verwendet werden können
Hinweis: Einige Funktionen wie Name und Render sind noch nicht vollständig, und Skript-Tags müssen separat hinzugefügt und in die CompositionAPI geschrieben werden method
// setup Sie können auch
setup syntax Sugar Unique anhängen individuelle Anleitung
creat ed:at Wird aufgerufen, bevor das Attribut oder der Ereignis-Listener des gebundenen Elements angewendet wird. Dies ist nützlich, wenn eine Direktive an einen Ereignis-Listener angehängt werden muss, bevor der normale v-on-Ereignis-Listener aufgerufen wird.
beforeMount: Wird aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird und bevor die übergeordnete Komponente gemountet wird.
- mount: Wird aufgerufen, nachdem die übergeordnete Komponente des gebundenen Elements gemountet wurde. Die meisten benutzerdefinierten Anweisungen werden hier geschrieben.
- beforeUpdate: Wird vor dem Aktualisieren des VNode aufgerufen, der die Komponente enthält.
- aktualisiert: Wird aufgerufen, nachdem der VNode der enthaltenden Komponente und die VNodes ihrer Unterkomponenten aktualisiert wurden.
- beforeUnmount: Wird vor dem Aufheben der Bereitstellung der übergeordneten Komponente des gebundenen Elements aufgerufen.
- unmount: Wird nur einmal aufgerufen, wenn die Direktive vom Element getrennt wird und die übergeordnete Komponente aufgehoben wurde.
-
<script setup> import { ref ,reactive,toRefs } from 'vue' const a = 1; const num = ref(99) // 基本数据类型 const user = reactive({ // 引用数据类型 age:11 }) // 解构能获取响应式属性 {}解构 toRefs保留响应式 const { age } = toRefs(user) // 导出 defineExpose({ a }) // props const props = defineProps({ foo: String }) // 事件 const emit = defineEmits(['change', 'delete']) // 自定义指令 const vMyDirective = { created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 console.log('创建了') }, } </script>
Nach dem Login kopieren el
: Das Element, an das die Direktive gebunden ist. Dies kann verwendet werden, um das DOM direkt zu manipulieren.binding
: Ein Objekt, das die folgenden Eigenschaften enthält.el
:指令绑定到的元素。这可以用于直接操作 DOM。binding
:一个对象,包含以下属性。value
:传递给指令的值。例如在v-my-directive="1 + 1"
中,值是2
。oldValue
:之前的值,仅在beforeUpdate
和updated
中可用。无论值是否更改,它都可用。arg
:传递给指令的参数 (如果有的话)。例如在v-my-directive:foo
中,参数是"foo"
。modifiers
:一个包含修饰符的对象 (如果有的话)。例如在v-my-directive.foo.bar
中,修饰符对象是{ foo: true, bar: true }
。instance
:使用该指令的组件实例。dir
:指令的定义对象。vnode
:代表绑定元素的底层 VNode。prevNode
:之前的渲染中代表指令所绑定元素的 VNode。仅在beforeUpdate
和updated
oldValue
: Der vorherige Wert, nur verfügbar inbeforeUpdate
undupdated
. Es ist verfügbar, unabhängig davon, ob sich der Wert ändert oder nicht.
value
: Der an die Direktive übergebene Wert. Beispielsweise ist in v-my-directive="1 + 1"
der Wert 2
. arg
: Die an den Befehl übergebenen Argumente (falls vorhanden). In v-my-directive:foo
lautet der Parameter beispielsweise "foo"
.
modifikatoren
: Ein Objekt, das Modifikatoren enthält (falls vorhanden). Beispielsweise ist in v-my-directive.foo.bar
das Modifikatorobjekt { foo: true, bar: true
.
instance
: Die Komponenteninstanz, die diese Direktive verwendet. dir
: Das Definitionsobjekt der Direktive. 🎜🎜🎜🎜🎜vnode
: Stellt den zugrunde liegenden VNode des gebundenen Elements dar. 🎜🎜🎜🎜prevNode
: Der VNode, der das Element darstellt, an das die Anweisung im vorherigen Rendering gebunden ist. Nur in den Hooks beforeUpdate
und updated
verfügbar. 🎜🎜🎜🎜🎜Anwendung🎜🎜// 子组件 <template> <div class="hello"> <h2>{{ msg }}</h2> <slot name="btn"> </slot> <button @click="chickMe"></button> </div> </template> <script setup> import { useSlots, useAttrs } from 'vue'; const slots = useSlots() const attrs = useAttrs() const props = defineProps({ msg: String }) const emit = defineEmits(['change']) console.log(slots, attrs) const chickMe = ()=>{ emit('change','abc') } </script> // 父组件 <template> <div class="home" > <HelloWorld msg="hello" atr="attrs" @change="changeP "> <template #btn> <div>我是 btn:{{ obj.text }}</div> </template> </HelloWorld> </div> </template> <script setup> import HelloWorld from '../components/HelloWorld.vue'; import { ref ,reactive,toRefs } from 'vue' const obj = reactive({ id: 0, text: '小红' }) const changeP=(e)=>{ console.log(e) } </script> 、
// 子组件 <template> <div class="hello"> 123 </div> </template> <script setup> const testPose =()=>{ console.log('子组件暴露方法') } defineExpose({ testPose }) </script> // 父组件 <template> <div class="home" v-test> <HelloWorld ref="helloSon"></HelloWorld> <button @click="testEpose"></button> </div> </template> <script setup> import HelloWorld from '../components/HelloWorld.vue'; import { ref } from 'vue' // setup函数的话可以从context上查找 const helloSon = ref(null); const testEpose = () => { helloSon.value.testPose(); } </script>
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Setup- und benutzerdefinierte Anweisungen in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

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)

Heiße Themen



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

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

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

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

Nachdem das vue3-Projekt gepackt und auf dem Server veröffentlicht wurde, wird auf der Zugriffsseite eine leere 1 angezeigt. Der publicPath in der Datei vue.config.js wird wie folgt verarbeitet: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='produktion'?'./':'/&

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&

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

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(
