Vue3-Direktiven

Vue-Direktiven sind ein Kernmerkmal von Vue.js. Sie können in HTML-Vorlagen alsv-spezielle Attribute verwendet werden, die mit v- beginnen und dazu dienen, reaktive Daten an DOM-Elemente zu binden oder Operationen an DOM-Elementen auszuführen.

Vue-Direktiven sind mit einem Präfix versehenev-spezielle HTML-Attribute, die HTML-Tags zusätzliche Funktionalität verleihen.

Im Vergleich zu traditionellen JavaScript-Methoden ist die Verwendung von Vue zum Erstellen reaktiver Seiten viel einfacher und erfordert weniger Code.

Im Folgenden finden Sie einige häufig verwendete Vue-Direktiven:

DirektiveBeschreibung
v-bind Wird verwendet, um die Daten einer Vue-Instanz an die Attribute von HTML-Elementen zu binden.
v-if Wird verwendet, um Elemente oder Komponenten basierend auf dem Wert eines Ausdrucks bedingt zu rendern.
v-show v-show ist eine von Vue.js bereitgestellte Direktive, um ein Element basierend auf dem Wert eines Ausdrucks bedingt anzuzeigen oder auszublenden.
v-for Wird verwendet, um Elemente oder Komponenten in einer Schleife basierend auf den Werten eines Arrays oder den Eigenschaften eines Objekts zu rendern.
v-on Wird verwendet, um Ereignis-Listener an HTML-Elemente zu binden, damit sie Methoden oder Funktionen in der Vue-Instanz auslösen können.
v-model Wird verwendet, um eine bidirektionale Datenbindung zwischen Formularsteuerelementen und den Daten der Vue-Instanz zu erstellen.

Zusätzlich zu diesen häufig verwendeten Direktiven bietet Vue auch einige andere Direktiven wie v-text, v-html usw. sowie benutzerdefinierte Direktiven, mit denen Entwickler DOM-Elemente flexibler manipulieren können.

Beispiel

Im Folgenden sind einige Beispiele für die Verwendung von Vue-Direktiven:

Verwendung derv-model-Direktive zur Implementierung der bidirektionalen Datenbindung für Formulardaten:

Beispiel

<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Selbst ausprobieren »

Verwendung derv-bind-Direktive zum Binden der Daten einer Vue-Instanz an die Attribute von HTML-Elementen:

Beispiel

<div id="app" class="demo">
    <img v-bind:src="imageSrc">
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      imageSrc: '/static.jyshare.com/images/code-icon-script.png?v=2'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Selbst ausprobieren »

Verwendung derv-if- undv-else-Direktiven zum bedingten Rendern von Elementen oder Komponenten basierend auf dem Wert eines Ausdrucks:

Beispiel

<div id="app" class="demo">
    <p v-if="showMessage">Hello Vue!</p>
    <p v-else>Auf Wiedersehen Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Selbst ausprobieren »

Verwenden derv-for-Direktive, um Elemente oder Komponenten in einer Schleife gemäß den Eigenschaftswerten eines Arrays zu rendern:

Beispiel

<div id="app" class="demo">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Selbst ausprobieren »

Verwenden Sie die v-on-Direktive, um Ereignis-Listener an HTML-Elemente zu binden:

Beispiel

<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="/static.jyshare.com/images/svg/img_lightBulb.svg?v=2">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Ein/Aus</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      lightOn: false
    }
  }
})
app.mount('#app')
</script>

Selbst ausprobieren »

Das Folgende ist ein Beispiel unter Verwendung derv-showDirektive:

Beispiel

<div id="hello-vue" class="demo">
    <button v-on:click="showMessage = !showMessage">Anzeigen/Verbergen</button>
    <p v-show="showMessage">Hallo Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

Selbst ausprobieren »
Andere Erweiterungen