Apprentissage et compréhension des instructions personnalisées Vue (exemples de code)

Le contenu de cet article concerne l'apprentissage et la compréhension des instructions personnalisées de Vue (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

J'ai récemment terminé un projet et j'avais besoin de mettre en œuvre une scène. Cliquez sur une zone et une zone d'édition apparaîtra. Lorsque vous cliquerez ailleurs sur la page, la zone d'édition sera masquée. de la même manière que j'ai écrit la boîte modale auparavant. En cherchant une méthode, j'ai soudainement senti que je pouvais essayer d'utiliser des éléments liés à vue pour résoudre ce problème avec élégance, puis j'ai appris les instructions personnalisées suivantes.

Instructions personnalisées 1 Vue

Définition 1.1

Il suffit de lire l'introduction sur le site officiel (je pense que le document officiel est très clair, donc je en gros, ils ont tous été copiés sur lui).

En plus des directives intégrées par défaut (v-model et v-show) des fonctions principales, Vue permet également l'enregistrement de directives personnalisées. Notez que dans Vue2.0, la principale forme de réutilisation et d'abstraction de code concerne les composants. Cependant, dans certains cas, vous devez toujours effectuer des opérations de bas niveau sur des éléments DOM ordinaires, auquel cas des directives personnalisées sont utilisées.

1.2 Implémentation de base

Cela peut être divisé en deux situations Si vous souhaitez définir un composant personnalisé global, définissez-le dans main.js dans le projet, par exemple, définissez un site Web officiel Auto-. instructions de focus

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

Si vous souhaitez simplement définir une instruction locale à utiliser à l'intérieur d'un certain composant, définissez-la dans le composant correspondant

// 跟 data(),methods:{} 那些同级写了
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

Définition terminée Ensuite, nous pouvons l'utiliser heureusement

<input v-focus>

1.2 Fonction Hook

Bien sûr, cette instruction personnalisée ne sera pas seulement cette petite chose Afin de résoudre certains scénarios réels, Vue nous propose un Le tas hook. La fonction est utilisée pour implémenter certaines de nos opérations sophistiquées. Les détails sont les suivants (tous sont facultatifs) :

bind : appelé une seule fois, lorsque l'instruction est liée à l'élément pour la première fois. Les paramètres d'initialisation uniques peuvent être effectués ici.

inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (seul le nœud parent est garanti d'exister, mais pas nécessairement inséré dans le document).

update : Appelé lorsque le VNode du composant est mis à jour, mais peut se produire avant que son VNode enfant ne soit mis à jour. La valeur de la directive peut avoir changé ou non. Mais vous pouvez ignorer les mises à jour inutiles du modèle en comparant les valeurs avant et après la mise à jour (voir ci-dessous pour les paramètres détaillés de la fonction hook).

componentUpdated : Appelé après que tous les VNode du composant où se trouve l'instruction et ses sous-VNodes aient été mis à jour.

unbind : Appelé une seule fois, lorsque l'instruction n'est pas liée à l'élément.

Jetons ensuite un coup d'œil aux paramètres de la fonction hook (c'est-à-dire el, liaison, vnode et oldVnode).

Bien sûr, si vous souhaitez faire bon usage de cette fonction hook, vous devez savoir utiliser les paramètres suivants

1.3 Paramètres de la fonction Hook

La fonction hook de commande sera passé dans les paramètres suivants :

el : L'élément lié à l'instruction peut être utilisé pour manipuler directement le DOM.

binding : Un objet contenant les propriétés suivantes :

name : Nom de l'instruction, à l'exclusion du préfixe v-.

value : La valeur de liaison de la directive, par exemple : - v-my-directive="1 + 1", la valeur de liaison est 2.

oldValue : la valeur précédente de la liaison d'instruction, disponible uniquement dans les hooks update et componentUpdated. Disponible même si la valeur a changé.

expression : expression d'instruction sous forme de chaîne. Par exemple, dans v-my-directive="1 + 1", l'expression est "1 + 1".

arg : paramètres passés à la commande, facultatif. Par exemple, dans v-my-directive:foo, le paramètre est « foo ».

modificateurs : Un objet contenant des modificateurs. Par exemple : dans v-my-directive.foo.bar, l'objet modificateur est { - foo : true, bar : true }.

vnode : Le nœud virtuel généré par la compilation Vue. Passez à l’API VNode pour en savoir plus.

oldVnode : nœud virtuel précédent, disponible uniquement dans les hooks update et componentUpdated.

Ensuite, le site officiel a déclaré

À l'exception de el, tous les autres paramètres doivent être en lecture seule et ne doivent pas être modifiés. Si vous devez partager des données entre des hooks, il est recommandé de le faire via l'ensemble de données de l'élément.

Donnons ensuite un exemple simple ci-dessous

// 在组件内部定义一个局部指令
directives:{
  demo:{
    bind: function (el, binding, vnode) {
      var s = JSON.stringify;
      el.innerHTML = 
        `name: ${s(binding.name)} <br>
        value: ${s(binding.value)} <br>
        expression: ${s(binding.expression)} <br>
        argument: ${s(binding.arg)} <br>
        modifiers: ${s(binding.modifiers)} <br>
        vnode keys: ${Object.keys(vnode).join(', ')}`
    }
  }
}
 // 绑定到组件中的一个 div 中
<div v-demo:foo.a.b="message"></div>

Ensuite, nous pouvons voir un tel tas de texte sur la page Web (bien sûr, les commentaires ci-dessous sont écrits par moi-même)

name: "demo" 
// 指定名称
value: "Welcome to Your Vue.js App" 
// 指令绑定值
expression: "message" 
// 字符串形式的指令表达式
argument: "foo" 
// 传给指令的参数
modifiers: {"a":true,"b":true} 
// 修饰符的对象
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
// Vue 编译生成的虚拟节点

1.4 Abréviation de fonction

Dans de nombreux cas, vous souhaiterez peut-être déclencher le même comportement lors de la liaison et de la mise à jour sans vous soucier des autres hooks. Par exemple, écrivez comme ceci :

colorSwatch: function colorSwitch(el, binding) {
  el.style.backgroundColor = binding.value
},

1.5 Littéral d'objet

Si l'instruction nécessite plusieurs valeurs, vous pouvez transmettre un littéral d'objet JavaScript. N'oubliez pas que les fonctions de directive acceptent toutes les expressions JavaScript légales.

<div v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

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!