Utilisation des instructions intégrées de vue

Cette fois, je vais vous présenter l'utilisation des instructions intégrées de Vue. Quelles sont les précautions lors de l'utilisation des instructions intégrées de Vue. Ce qui suit est un cas pratique, jetons un coup d'œil. La directive

est l'une des fonctions les plus couramment utilisées dans les modèles Vue. Elle est préfixée par v-. Sa principale responsabilité est d'appliquer certains comportements au DOM en conséquence lorsque la valeur de son expression change. Cet article présente principalement l'explication détaillée des instructions intégrées de Vue. Les amis qui en ont besoin peuvent s'y référer

Les directives sont des attributs spéciaux avec le préfixe v-. Leur responsabilité est de changer la valeur de l'expression lorsqu'elle est utilisée. Les effets associés qui en résultent agissent sur le DOM de manière réactive.

Instructions intégrées

1. v-bind : répondre et mettre à jour les fonctionnalités du DOM par exemple : v-bind:href v ; -bind:class v-bind:title etc.

est principalement utilisé pour lier des attributs et mettre à jour dynamiquement les attributs sur les éléments HTML

<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. Événements DOM;Par exemple：v-on:click v-on:keyup

Au fait, parlons des méthodes et des événements

2.1 L'expression de @click peut être directement une instruction Utiliser JavaScript , ou il peut s'agir d'un nom de fonction dans l'option méthodes de l'instance Vue. Vous pouvez transmettre des paramètres dans la méthode

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

2.2 Méthodes et événements :

Vue fournit une variable spéciale $event, qui est utilisée pour accéder aux événements natifs du DOM, qui peut empêcher les événements de bouillonner ou empêcher les liens de s'ouvrir

Écrivez un exemple de empêcher le bouillonnement :

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

2.3 Symbole de modification :

Ajoutez un petit point "." après l'événement lié par @, puis suivez-le d'un suffixe pour utiliser le modificateur.

L'événement bouillonnant ci-dessus peut être écrit comme un modificateur utilisateur direct :

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

Certains modificateurs couramment utilisés sont :

• .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>

Surveiller le clavier sur les éléments du formulaire Lors d'événements, vous pouvez également utiliser modificateurs de touches, comme appeler une méthode uniquement lorsqu'une touche spécifique est enfoncée :

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

3. v-model : liaison bidirectionnelle des données utilisée pour la saisie du formulaire, etc. ; ; input v-model= "message">

4. v-show : instruction de rendu conditionnel, définissez l'attribut de style CSS pour DOM

5. ajouter ou supprimer dynamiquement des éléments DOM dans le DOM

6. v-else : instructions de rendu conditionnel, doit être utilisé par paires avec v-if

7. Les conditions de couche doivent être utilisées par paires avec v-if;

8. v-text : Mettez à jour le contenu du texte de l'élément ; par exemple : {{msg}} ;

9. v-html : Mettez à jour le nom de la balise ;

10. v-for : instruction de boucle ; par exemple :

<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.1 L'expression v-for

prend en charge un paramètre facultatif comme élément actuel lors de la traversée du tableau L'index de >10.3 v- L'expression for for peut également itérer des entiers :

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

10.4 Mise à jour du tableauLorsque nous modifions le tableau, Vue détectera le changement de données, alors utilisez v La vue rendue par -for est également mise à jour immédiatement.

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

• push()

• pop()

• shift()

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

• unshit()

• splice()

• sort()

• reverse ()

Ces méthodes modifieront le tableau d'origine appelé par ces méthodes

Par exemple, nous ajouterons un élément aux livres de données de l'exemple précédent :


Certaines méthodes Le tableau d'origine ne sera pas modifié, par exemple :

• filter()

• concat()

• slice()

Ils renvoient un nouveau tableau. Lorsque vous utilisez ces non- Lorsque vous utilisez la méthode de mutation, vous pouvez remplacer le tableau d'origine par un nouveau tableau, tel que :

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

Lorsque Vue détecte des changements dans le tableau, il ne restitue pas directement le liste entière, mais maximise la réutilisation des éléments DOM.

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!