Comment développer des directives personnalisées dans vue

Cet article présente principalement les informations pertinentes de la directive d'instruction personnalisée vue. Ce qui suit est une introduction à travers des exemples. Les amis qui en ont besoin peuvent s'y référer

Ce qui suit sera une introduction. personnalisation de la vue pour vous. Directive, le contenu spécifique est le suivant :

Exemple de capture d'écran du site officiel

vue sauf certains noyaux en interne instructions définies (v-model,v-if,v-for,v-show) De plus, vue permet également aux utilisateurs d'enregistrer certaines de leurs propres instructions fonctionnelles. Parfois, vous souhaitez vraiment faire fonctionner le Dom. À ce stade, les instructions personnalisées sont les plus appropriées.

Regardons directement l'exemple : lorsque la page est chargée, l'élément obtient le focus (l'autofocus n'est pas pris en charge dans la version mobile de Safari), c'est-à-dire que lorsque la page est chargée, le formulaire obtient automatiquement le focus et le curseur ne fait aucune opération. Le code placé automatiquement sur un formulaire est le suivant :

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

Si vous souhaitez enregistrer des instructions locales, le composant accepte également une option directives :

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

Ensuite, vous pouvez ajouter n'importe quel composant dans le modèle. Utilisez le nouvel attribut v-zsqfocus comme suit :

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

donne le même exemple que le site officiel. Directives, méthodes, montés, etc. au même niveau et peut être utilisé en même temps.

PS : Jetons un coup d'œil à l'exemple de code de la directive d'instruction personnalisée de Vue. Le code spécifique est le suivant :

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

Ce qui précède est que je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter le glissement avec les doigts dans vue

Comment compiler, empaqueter et afficher des fichiers d'index dans vue

Comment utiliser le modèle Jade dans vue

Passer le modèle au composant dans Angular

Utiliser Async et fonctions Await dans Node.js

Résoudre le problème selon lequel Webpack ne peut pas accéder à 127.0.0.1

dans webpack-dev-server Implémenter l'accès à distance méthode de configuration

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!