Verwendung der integrierten Vue-Anweisungen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung der integrierten Anweisungen von Vue vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an. Die

-Direktive ist eine der am häufigsten verwendeten Funktionen in Vue-Vorlagen. Ihr ist v- vorangestellt. Ihre Hauptaufgabe besteht darin, bestimmte Verhaltensweisen entsprechend auf das DOM anzuwenden, wenn sich der Wert seines Ausdrucks ändert. In diesem Artikel werden hauptsächlich die integrierten Anweisungen von Vue vorgestellt.

Direktiven sind spezielle Attribute mit dem Präfix v- Die daraus resultierenden damit verbundenen Effekte wirken reaktiv auf das DOM.

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'
  },
}）

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

Übrigens, reden wir über Methoden und Ereignisse

2.1 Der Ausdruck von @click kann direkt eine

JavaScript-Anweisung sein oder ein Funktionsname in der Methodenoption der Vue-Instanz sein. Sie können Parameter in der Methode

2.2 Methoden und Ereignisse:

<!-- 完整语法 -->
<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);
    },
  }
}）

Vue stellt eine spezielle Variable $event bereit, die für den Zugriff auf native DOM-Ereignisse verwendet wird, wodurch das Sprudeln von Ereignissen oder das Öffnen von Links verhindert werden kann

Schreiben Sie ein Beispiel dafür Blasenbildung verhindern:

2.3 Modifikationssymbol:

  <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);
    }
}

Fügen Sie nach dem durch @ gebundenen Ereignis einen kleinen Punkt hinzu und folgen Sie ihm mit einem Suffix, um den Modifikator zu verwenden.

Das obige Blasenereignis kann als direkter Benutzermodifikator geschrieben werden:

Einige häufig verwendete Modifikatoren sind:

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

• .stop

• .prevent

• .capture

• .self

• .once

Überwachen Sie die Tastatur auf Formularelementen. Während Ereignissen können Sie auch verwenden Tastenmodifikatoren, wie z. B. das Aufrufen einer Methode nur, wenn eine bestimmte Taste gedrückt wird:

＜ ！一阻止单击事件冒泡一〉
<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>

3. V-Modell: Zwei-Wege-Bindung von Daten, zum Beispiel: < ; input v-model= "message">

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

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

5. Fügen Sie DOM-Elemente dynamisch hinzu oder löschen Sie sie Ebenenbedingungen müssen paarweise mit v-if

8 verwendet werden: Aktualisieren Sie den Textinhalt des Elements, zum Beispiel: {{msg}} ;

9: Der Tag-Name wird ebenfalls einbezogen.

10. v-for: Schleifenanweisung; zum Beispiel:

10.1 v-for-Ausdruck

unterstützt einen optionalen Parameter als aktuelles Element beim Durchlaufen des Arrays

Der Index von >

10.3 v- Der Ausdruck für for kann auch ganze Zahlen iterieren:

<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高级程序设计>'}
    ]
  }
});

10.4 Array-AktualisierungWenn wir das Array ändern, erkennt Vue die Datenänderung. Verwenden Sie daher v. Die von -for gerenderte Ansicht wird ebenfalls sofort aktualisiert.

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

• push()

• pop() • shift() • unshit()

• splice()

  <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
  }
});

• sort()

• reverse ()

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

Diese Methoden ändern das ursprüngliche Array, das von diesen Methoden aufgerufen wird

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

Einige Methoden Das ursprüngliche Array wird nicht geändert, zum Beispiel:

• filter()
• concat()
• Slice()

Sie geben ein neues Array zurück. Wenn Sie diese nicht verwenden, können Sie bei Verwendung der Mutationsmethode das ursprüngliche Array durch ein neues Array ersetzen, z. B.:

Wenn Vue Änderungen im Array erkennt, wird das Array nicht direkt neu gerendert gesamte Liste, maximiert aber die Wiederverwendung von DOM-Elementen.

替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。

10.5 过滤与排序

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时， 可以使用计算属性来返回过滤或排序后的数组 ，例如： 

  <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/);
      })
    },
  }
});

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

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

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

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

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

推荐阅读：

Vue中slot插槽使用详解

Vue文件阅读器组件FileReader API

Das obige ist der detaillierte Inhalt vonVerwendung der integrierten Vue-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!