In Vue integrierte Befehlsmethoden und Ereignisse-js-Tutorial-php.cn

Dieses Mal stelle ich Ihnen die integrierten Befehlsmethoden und Ereignisse von Vue vor. Welche Vorsichtsmaßnahmen gibt es für die Verwendung der integrierten Befehlsmethoden und Ereignisse von Vue? Das Folgende ist ein praktischer Fall.

Direktiven sind spezielle Attribute mit dem Präfix v-. Ihre Aufgabe besteht darin, die zugehörigen Effekte reaktiv auf das DOM anzuwenden, wenn sich der Wert des Ausdrucks ändert.

Eingebaute Anweisungen

1. Auf DOM-Funktionen reagieren und diese aktualisieren; -bind:class v-bind:title usw.

wird hauptsächlich zum Binden von Attributen und zum dynamischen Aktualisieren von Attributen für HTML-Elemente verwendet.

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>
<!-- 缩写 -->
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>
<p :title=&#39;title&#39;>标题</p>
var app = new Vue({
  el: '#app',
  data: { 
    url: 'www.baidu.com',
　　　　title: 'bind'
  },
}）

Nach dem Login kopieren

2 ; zum Beispiel: v -on:click v-on:keyup

Übrigens, lasst uns über Methoden und Ereignisse sprechen

2.1 @ Click-Ausdrücke können JavaScript-Anweisungen direkt verwenden oder es kann ein Funktionsname in der Methodenoption der Vue-Instanz sein. Sie können Parameter in der Methode übergeben

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething()">...</a>　　　　//是一个方法名
<p ng-if=&#39;show&#39;>一段文本</p>
<button @click="show=false">点击隐藏文本</button>　　//直接是一个内联的语句
<button v-on:click="count++">Add 1</button>
var app = new Vue({
  el: '#app',
　　data:{
　　　　show: true，
　　　　counter： 0
　　},
  methods: {
    doSomething: function(){
      console.log(this.title);
    },
  }
}）

Nach dem Login kopieren

2.2 Methoden und Ereignisse:

Vue stellt eine spezielle Variable $event bereit, die Sie verwenden können. Für den Zugriff auf native DOM-Ereignisse können Sie das Blubbern von Ereignissen oder das Öffnen von Links verhindern.

Schreiben Sie ein Beispiel für das Verhindern des Bubblings:

  <p @click="stopClick1(&#39;stop1&#39;,$event)">
      <p @click="stopClick2(&#39;stop2&#39;,$event)">
        <p @click="stopClick3(&#39;stop3&#39;,$event)">阻止冒泡</p>
      </p>
    </p>
　　</p>
methods:{
    stopClick3: function(message, event){
      console.log(message);
      event.stopPropagation();  //阻止冒泡
    },
    stopClick2: function(message, event){
      console.log(message);
    },
    stopClick1: function(message, event){
      console.log(message);
    }
}

Nach dem Login kopieren

2.3 Modifikator:

Einbinden＠ Fügen Sie nach dem Ereignis einen kleinen Punkt „.“ hinzu und folgen Sie ihm dann mit einem Suffix, um den Modifikator zu verwenden.

Das obige Blasenereignis kann als direkter Benutzermodifikator geschrieben werden:

<p @click.stop="stopClick3(&#39;stop3&#39;)">阻止冒泡</p>　　//不用通过$event事件再来写了

Nach dem Login kopieren

Einige häufig verwendete Modifikatoren sind:

• .stop

• .prevent

• .capture

• .self

• .once

＜ ！一阻止单击事件冒泡一〉
<a @click.stop=”handle "></a>
〈！一修饰符可以串联一〉
<a @click.stop.prevent=” handle ” ></a>
〈！一添加事件侦听器时使用事件捕获模式一〉
<p @click . capture=”handle ”> ... </p>
〈！一只当事件在该元素本身（而不是子元素） 触发时触发回调一〉
<p @click.self=” handle ”> ... </p>
＜ ！一只触发一次，组件同样适用一〉
<p @click.once=” handle ”> ... </p>

Nach dem Login kopieren

Auch beim Überwachen von Tastaturereignissen auf Formularelementen können Sie Tastenmodifikatoren verwenden, z Aufruf einer Methode nur, wenn eine bestimmte Taste gedrückt wird:

＜ ！一只有在keyCode 是13 时调用vm.submit()一〉
<input @keyup.13 ＝“ submit ”〉

Nach dem Login kopieren

3. v-model: Zwei-Wege-Bindung von Daten; zum Beispiel: < message">

4. v-show: Bedingte Rendering-Anweisung, CSS-Stilattribut für DOM festlegen

5. v-if: Bedingte Rendering-Anweisung, dynamisch im DOM hinzugefügt Oder DOM löschen Elemente

6. v-else: Bedingte Rendering-Anweisung, muss paarweise mit v-if verwendet werden

7. v-else-if: Mehrschichtige Bedingungen beurteilen, muss gepaart werden mit v -bei paarweiser Verwendung; ; span>{{ msg}} ;

9: Aktualisieren Sie den innerHTML-Namen des Elements.

10. v-for: Schleifenanweisung; zum Beispiel:

<p id= "app ">
    <ul>
      <li v-for="book in books">{ { book.name } }</li>
    </ul>
  </p>
var app =new Vue({
  el: '#app',
  data: {
    books: [
      {name: '<vue.js实战>'},
      {name: '<javascript语言精粹>'},
      {name: '<javascript高级程序设计>'}
    ]
  }
});

Nach dem Login kopieren

10.1 v-for-Ausdruck unterstützt einen optionalen Parameter als Index des aktuellen Elements, zum Beispiel:

  <p id="app">
    <ul>
      <li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
    </ul>
  </p>

Nach dem Login kopieren

10.2 Wenn der Ausdruck von v- for die Objekteigenschaften durchläuft, gibt es zwei optionale Parameter, nämlich Schlüsselname und Index:

  <p id= "app">
    <ul>
      <li v-for="(value , key , index) in user ">
        { { index } } - { { key } } : { { value } }
      </li>
    </ul>
  </p>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Aresn',
    grender: '男',
    age:23
  }
});

Nach dem Login kopieren

10.3 Der Ausdruck von v- for kann auch ganze Zahlen iterieren:

 <p id="app">
    <span v-for="n in 10">{{n}}</span>
  </p>

Nach dem Login kopieren

10.4 Array-Aktualisierung

Wenn wir das Array ändern, erkennt Vue die Datenänderung, sodass die mit v-for gerenderte Ansicht ebenfalls sofort aktualisiert wird.

• push()

• pop()

• shift()
• unshit()
• splice()
• sort()
• reverse ()

Diese Methoden ändern das von diesen Methoden aufgerufene ursprüngliche Array

Zum Beispiel fügen wir den Datenbüchern des vorherigen Beispiels ein Element hinzu:

app.books.push({
  name: '《css世界》'
});

Nach dem Login kopieren

Einige Methoden ändern das ursprüngliche Array nicht, zum Beispiel:

• filter()

• concat()

• Slice()

Was sie zurückgeben, ist ein neues Array Verwenden dieser Nicht-Mutationsmethoden Wenn Vue Änderungen im Array erkennt, rendert es nicht direkt die gesamte Liste neu, sondern maximiert die Wiederverwendung von DOM-Elementen.

Im ersetzten Array werden Elemente, die dieselben Elemente enthalten, nicht erneut gerendert, sodass Sie das alte Array problemlos durch ein neues Array ersetzen können, ohne sich Gedanken über Leistungsprobleme machen zu müssen.

10.5 Filtern und Sortieren

Wenn Sie das ursprüngliche Array nicht ändern möchten und die Anzeige durch eine Kopie des Arrays filtern oder sortieren möchten, können Sie berechnete Eigenschaften verwenden, um das gefilterte zurückzugeben oder sortiertes Array, zum Beispiel:

  <p id="app">
    <ul>
      <template v-for="book in filterBooks">
        <li>书名：{{book.name}}</li>
        <li>作者：{{book.author}}</li>
      </template>
    </ul>
  </p>
var app= new Vue({
  el: '#app',
  computed: {
    filterBooks: function(){
      return this.books.filter(function (book) {
        return book.name.match(/JavaScript/);
      })
    },
  }
});

Nach dem Login kopieren

11、v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译； v-cloak 是一个解决初始化慢导致页面闪动的最佳实践；

12、v-once：也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。

首次渲染后，不再随数据的变化重新渲染，将被视为静态内容； v-once 在业务中也很少使用，当你需要进一步优化性能时，可能会用到。

13、v-pre：不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；例如： < span v-pre>{{ this will not be compiled }} </ span>；

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！