[Organisieren und teilen] Mehrere Vue-Befehle, die Ihnen helfen, die Effizienz zu verbessern!

Dieser Artikel hilft Ihnen weiterhin beim Erlernen von Vue und stellt einige Vue-Anweisungen zusammen, um Ihnen bei der Verbesserung der Effizienz zu helfen. Ich hoffe, dass er für alle hilfreich ist!

Viele Schüler, die Vue verwenden, neigen dazu, die Anweisungen am leichtesten zu ignorieren. Da wir der Meinung sind, dass viele Schüler, die neu bei Vue sind, noch nicht einmal mit Vue Kontakt aufgenommen haben, werden wir vor der Einführung von Vue zunächst die gut- Bekanntes V-Modell, das eine kleine Demo schreibt

V-Modell

Ich glaube, jeder ist mit V-Modell vertraut. Einfach ausgedrückt: Es wird verwendet, um Zwei-Wege-Datenbindung für Formularsteuerelemente und -komponenten zu erstellen

Zuerst haben wir Erstellen Sie eine kleine Vue-Umgebung und führen Sie Vue.js in eine HTML-Seite ein. [Verwandte Empfehlungen:
vuejs-Video-Tutorial

,

Web-Front-End-Entwicklung]

Jetzt können wir die wechselseitige Beziehung direkter sehen1 Wir ändern die Daten im Modell in der Konsole

Wir können feststellen, dass sich der Wert in der Ansicht entsprechend ändert, wenn wir den Wert der Nachricht im Modell ändern.

2 Wir überprüfen die Änderungen im Modell, indem wir den Wert in der Ansicht im Textfeld ändern

Wir stellen fest, dass sich, wenn wir den Wert in der Ansicht durch das Textfeld ändern, auch der Wert in unserem Modell entsprechend ändert.

Zusammenfassung

Haben Sie durch das obige Beispiel ein besseres Verständnis für die bidirektionale Bindung von Vue gewonnen? Da wir die Daten der Ansicht nur über die Formularelemente ändern können, können natürlich auch unsere anderen Formularelemente verwendet werden . Wir werden sie nicht einzeln auflisten.

V-Modell-Modifikator

1..lazy

Wenn sich der Wert des Textfelds ändert, wird er auf die Modelldaten aktualisiert. Oftmals implementieren wir möglicherweise kontinuierlich eine bestimmte Funktion, die sich jedoch auf unsere Leistung auswirkt. Daher verwenden wir den Modifikator .lazy Helfen Sie uns, den Wert des Textfelds mit dem Modell zu synchronisieren, wenn unser Textfeld den Fokus verliert /944/529/167888258941947[Organisieren und teilen] Mehrere Vue-Befehle, die Ihnen helfen, die Effizienz zu verbessern!" title="167888258941947[Organisieren und teilen] Mehrere Vue-Befehle, die Ihnen helfen, die Effizienz zu verbessern!" alt="[Organisieren und teilen] Mehrere Vue-Befehle, die Ihnen helfen, die Effizienz zu verbessern!"/>

2..number

Nehmen wir das Textfeld als Beispiel. Oftmals benötigen wir einige Werte, die der Benutzer ausfüllen kann, und dieser Wert kann eine Zahl sein, die wir für Berechnungen verwenden. Derzeit denken viele Schüler über viele Möglichkeiten nach, z. B. über Konvertierung, Eingabe usw., aber tatsächlich Es gibt einen Modifikator, der uns helfen kann, diese Anforderung zu erfüllen.lazy
我们在上面的动图中可以看到通过v-model绑定的文本框只要是文本框的值发生变化了就会更新到Model的数据中，很多时候我们可能连贯实现某种功能但是会影响我们的性能，所以我们用到了.lazy修饰符
他会在我们文本框失去焦点的时候再帮我们将文本框的值同步给Model

  <div>
    <input><br>
    这里是文本框输入的值——{{message}}
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好，几何心凉!&#39;,
    },
  })</script>

来看一下效果

2..number
我们还是拿文本框举例，很多时候我们需要一些值让用户填写而这个值可能希望他是数字我们用于计算，这个时候很多同学想到很多办法，转换呀、输入后去判断等等等，但其实v-model中有一个修饰符就可以帮助我们完成这个需求

我们还是通过一个小栗子来看一下，首先我们希望两个文本框各输入一个数值我们进行求和

可以看一下结果

我们可以看到并不是我们想要的结果，他是作为拼接而不是求和，那么我们添加上.number修饰符来试试看

  <div>
   <h3>我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
    },
  })</script>

再来看看结果

3..trimSchauen wir uns das durch eine kleine Kastanie an. Zuerst möchten wir in jedes der beiden Textfelder einen Wert zum Summieren eingeben

Sie können sich die Ergebnisse ansehen

Wir können sehen dass dies nicht das Ergebnis ist, das wir wollen, es dient eher dem Zusammenfügen als der Summierung, also fügen wir den Modifikator .number hinzu und probieren es aus

  <div>
   <h3>我是求和——{{num1+num2}}</h3>
<input><input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
      num1: &#39;&#39;,
      num2: &#39;&#39;,

    },
  })</script>

Werfen wir einen Blick auf das Ergebnis

3..trim Sie sollten mit diesem relativen Vergleich vertraut sein. Viele dienen dazu, Leerzeichen zu entfernen, aber es werden nur Leerzeichen an beiden Enden des Textfelds entfernt, nicht in der Mitte.

  <div>
   <h3>我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,

    },
  })</script>

Schauen Sie sich den Effekt an

Tipps:

Tatsächlich ist es hier an das Textfeld gebunden. Das V-Modell ist nur syntaktischer Zucker. Es verwendet das Wertattribut und das Eingabeereignis, um die bidirektionale Bindung zu vervollständigen Änderungen lösen wir das Eingabeereignis aus, um den von uns gebundenen Wert und gleichzeitig den Wert unseres Textfelds zu ändern. Der Wert ist auch mit der Nachricht verknüpft

v-cloak

🎜Was genau macht v-cloak Schauen wir uns zunächst den folgenden Code an. Dann stellen wir fest, dass beim Rendern der Seite der folgende Moment eintrifft

Dieses Phänomen tritt während unseres eigentlichen Entwicklungsprozesses auf, insbesondere wenn unser Netzwerkstatus nicht sehr gut ist oder die Back-End-Schnittstelle langsam reagiert. Daher verwenden wir unseren V-Cloak

Tatsächlich ist sein Prinzip display:none . Jeder sollte verstehen, dass das Dom-Element ausgeblendet ist, bevor die in unseren Daten gebundene Variable einen Wert hat, sodass das oben genannte Problem nicht auftritt Programmiervideo
)

Das obige ist der detaillierte Inhalt von[Organisieren und teilen] Mehrere Vue-Befehle, die Ihnen helfen, die Effizienz zu verbessern!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!