So entwickeln Sie benutzerdefinierte Anweisungen in Vue

In diesem Artikel werden hauptsächlich die relevanten Informationen zur benutzerdefinierten Anweisungsrichtlinie von vue vorgestellt. Im Folgenden finden Sie eine Einführung anhand von Beispielen. Freunde, die sie benötigen, können darauf verweisen Vue-Anpassung für Sie. Der spezifische Inhalt lautet wie folgt:

Offizielles Website-Screenshot-Beispiel

vue mit Ausnahme einiger interner Kerne Definierte Anweisungen (

) Darüber hinaus ermöglicht Vue Benutzern, einige ihrer eigenen Funktionsanweisungen zu registrieren. Zu diesem Zeitpunkt sind benutzerdefinierte Anweisungen am besten geeignet.

Schauen wir uns das Beispiel direkt an: Beim Laden der Seite erhält das Element den Fokus (Autofokus wird in der mobilen Version von Safari nicht unterstützt), d. h. beim Laden der Seite erhält das Formular automatisch den Fokus und der Cursor führt automatisch keine Operationen aus:

Vue.directive('zsqfocus', { // 注册一个全局自定义指令 `v-zsqfocus`，在main.js文件里
 inserted: function (el) { // 当被绑定的元素插入到 DOM 中时自动调用
 el.focus() // 聚焦元素
 }
})

v-model,v-if,v-for,v-show Wenn Sie eine lokale Direktive registrieren möchten, akzeptiert die Komponente auch eine Direktivenoption:

<script>
export default {
 directives: { // 指令的定义
  zsqfocus: {
   inserted: function (el) { // 获得焦点
    el.focus()
   }
  }
  }
 }
</script>

Dann können Sie das neue für jede Komponente in der Vorlage verwenden. Das v-zsqfocus-Attribut lautet wie folgt:

<template>
 <input v-zsqfocus /> //调用 
</template>

gab das gleiche Beispiel wie auf der offiziellen Website an. Anweisungen, Methoden, gemountet usw. sind gleich Ebene und kann gleichzeitig verwendet werden.

PS: Schauen wir uns den Beispielcode der benutzerdefinierten Anweisungsanweisung von vue an. Der spezifische Code lautet wie folgt:

<template>
 <p>
  <input v-model="dir1" v-my-directive1="dir1"/>　　　　 <input v-model="dir2" v-my-directive2="dir2"/>
 </p>
</template>
<script>
 export default {
  data(){
   return {　　　　　　　　　dir1:&#39;&#39;,　　　　　　　　　dir2:&#39;&#39;
　　　　　　　}
  },
  directives:{　　　　　　　//直接绑定函数，作用等同于update,不做准备工作和扫尾工作
   myDirective1(val){
    console.log(val)
   },　　　　　　　myDirective2:{　　　　　　　　　　bind(){　　　　　　　　　　　　　//第一次绑定到元素的准备工作　　　　　　　　　　},　　　　　　　　　　update(val，old){　　　　　　　　　　　　//在绑定到元素后立即以初始值第一次调用，然后每次example2变化都会调用update　　　　　　　　　　　　console.log(val)　　　　　　　　　　},　　　　　　　　　　　　unbind(){　　　　　　　　　　　　//销毁前的清理工作　　　　　　　　　　}　　　　　　　}
  }
 }
</script>

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird. Verwandte Artikel:

So implementieren Sie das Gleiten mit den Fingern in Vue

So kompilieren, verpacken und anzeigen Sie Indexdateien in Vue

So verwenden Sie die Jade-Vorlage in Vue

Übergabe der Vorlage an die Komponente in Angular

Verwenden Sie Async und Await-Funktionen in Node.js

Lösen Sie das Problem, dass Webpack nicht auf 127.0.0.1 zugreifen kann

in webpack-dev-server Implementieren Sie den Fernzugriff Konfigurationsmethode

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie benutzerdefinierte Anweisungen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!