Personnalisation et utilisation des instructions globales et des instructions privées de Vue

1. Personnalisez les instructions globales

Ouvrez la porte et soulevez un châtaignier:

<label>
    搜索
    <input type="text" id="search">
</label>

Pour le moment, obtenir l'événement focus de cette zone de saisie dans la méthode native est comme ceci:

document.getElementById("search").focus();

Dans Vue, utilisez des instructions personnalisées pour obtenir cet effet. Les
instructions sont comme le v-modèle de v-text, mais elles sont fournies par Vue par défaut,
et les instructions personnalisées sont personnalisées ( non-sens)

Toutes les instructions dans Vue v-commencent par

Personnalisez une commande personnalisée appelée v-focus:
ajoutez à l'étiquette

<label>
    搜索
    <input type="text" id="search" v-focus>
</label>

Utilisez ensuite Vue.directive () pour définir l'instruction globale.
Syntaxe: Le Vue.directive(指令名称,对象)
premier paramètre est le nom de l'instruction. Lorsque l'instruction est définie, elle n'a pas besoin d'être préfixée avec v-, mais le
deuxième paramètre doit être ajouté lors de l'appel. Il s'agit d'un objet. Il existe des fonctions de raccordement liées aux instructions qui peuvent effectuer des opérations connexes à des étapes spécifiques

Le premier paramètre de chaque fonction de crochet est toujours el, ce qui signifie que l'élément auquel l'instruction est liée ( el ement) [Bien sûr, le nom du paramètre peut être pris à volonté]
C'est un objet natif js dom, il peut donc être utilisé dessus méthode js

Les fonctions de hook couramment utilisées sont liées, insérées et mises à jour:

• bind il exécute la fonction de liaison immédiatement si une instruction sur les éléments liés à
  ce qu'une seule fois en raison d'un élément de commande peut être lié à un temps
• inséré lorsque l'élément dans le DOM lorsqu'il est inséré remplit la fonction ,
  il est également qu'une seule fois
• mis à jour est lorsque le nœud DOM (composant VNode) est mis à jour, la fonction de téléchargement sera exécutée et
  peut être déclenchée plusieurs fois

Vue.directive("focus",{
            // 钩子函数
            
            // 在bind刚绑定的时候 元素还并没有被放到dom中去 因此此时调用focus()方法没作用 不会生效 因为一个元素只有在插入dom之后才能获取焦点
            bind:function(el)
            {
                // el.focus();
            },
            
            // 元素插入到DOM中的时候会执行该inserted函数
            // 【只会执行一次】
            inserted:function(el)
            {
                el.focus();
            },
            
            // 当DOM节点(VNode组件)更新的时候 会执行该upload函数
            // 【可能会触发多次】
            updated:function(el)
            {
            
            }
        })

En plus de cela:

• componentUpdated: le nœud DOM (composant VNode) du composant où se trouve l'instruction et ses nœuds DOM enfants (composant VNode) sont après tout mis à jour
• unbind: appelé
  uniquement lorsque l'instruction et l'élément ne sont pas liés

Vous pouvez donc implémenter des instructions personnalisées

---

Bien sûr, il y a une différence entre le style et le comportement: qu'est
- ce que le style? Le style est comme définir des couleurs
et le comportement est comme le comportement js comme focus ()

Prenez l'instruction de couleur de police personnalisée comme un châtaigne:

Vue.directive("color",{
            bind:function(el)
            {
                el.style.color="aqua";
            }
        })

Nous avons constaté que le style peut être défini dans bind.
En effet, tant que le style est analysé, un
style de couleur s'affiche sur la page. Tant qu'il est lié à l'élément via l'instruction, que l'élément soit inséré dans la page ou non. L'élément aura définitivement un style en ligne.
Après cela, l'élément sera définitivement affiché sur la page. À ce stade, le moteur de rendu du navigateur analysera le style et l'appliquera à l'élément.

Mais une méthode comme focus () est une action. L' action doit être ajoutée au DOM pour obtenir le focus. Lors de la liaison, elle est uniquement en mémoire et non ajoutée au DOM.
Le comportement appelé en mémoire est alors naturellement rendu sur la page. Invalide
et l'insertion n'est appelée qu'après avoir atteint la page afin que le comportement soit efficace

En bref, les opérations liées au comportement js sont mieux effectuées en inséré pour empêcher le comportement js de prendre effet
, et les opérations liées au style peuvent généralement être effectuées dans bind

---

Obtenez la valeur transmise dans l'instruction personnalisée

Ajoutez des guillemets au moment de la définition car une chaîne est passée.
Sans guillemets, elle sera reconnue comme une variable

<input type="text" id="search" v-color="'blue'">

Regardez d'abord les paramètres partagés par la fonction hook:

• el: L'élément lié par l'instruction peut être utilisé pour manipuler directement le DOM
• binding: Un objet contient les attributs suivants:
  nom : le nom de l' instruction (à l'exclusion du préfixe v)
  valeur : la valeur
  de liaison de l' instruction Exemple: la valeur de liaison dans v-my-directive = "1 + 1" est 2 ie: la valeur est Le résultat après l'analyse de la chaîne
  oldValue: la valeur précédente liée par l'instruction est
  uniquement disponible dans les hooks de mise à jour et de composantUpdated. Elle peut être utilisée
  indépendamment du fait que la valeur change ou non.
  Expression : expression d'instruction sous forme de chaîne
  Exemple: dans v-my-directive = "1 L'expression dans "+1" est "1 + 1", c'est-à-dire: l'expression est le résultat d'origine sans analyse de chaîne
  arg : le paramètre passé à l'instruction
  Exemple: le paramètre est "foo" dans v-my-directive: foo
  modifiers : Un objet contenant des modificateurs. Par exemple: dans v-my-directive.foo.bar, l'objet modificateur est {foo: true, bar: true}
• vnode: Nœud virtuel généré par la compilation Vue
• oldVnode: Le dernier nœud virtuel
  est uniquement disponible dans les crochets de mise à jour et de composant

Obtenez la valeur transmise
Exemple:

// 自定义设置字体颜色指令
Vue.directive("color",{
    bind:function(el,binding) // 此处的el和binding可任意命名
    {
        console.log(binding.value);
        el.style.color=binding.value;
    }
})

---

Deuxièmement, des instructions privées personnalisées

Tout comme les filtres, il existe non seulement des commandes communes mais également des commandes privées.
Les commandes privées personnalisées sont similaires aux filtres privés personnalisés. Elles
sont définies dans l'objet de propriété de l'instance Vue.

<div id="app2">
	<h3 v-fontWeight="1000">{{date | dateFormat}}</h3>
</div>

<script>
	var vm2=new Vue({
	            el:'#app2',
	            data:{
	                date:new Date()
	            },
	            methods:{},
	            filters:{},
	            // 自定义私有指令
	            directives:{
	                "fontweight":{
	                    bind:function(el,binding)
	                    {
	                        el.style.fontWeight=binding.value;
	                    }
	                }
	            }
	        })
</script>

---

Troisièmement, l'abréviation de l'instruction

Les commandes personnalisées de Vue prennent également en charge le raccourci

Si vous ne souhaitez bindet updateagir sur ces deux crochets pour répéter
et ne se soucie pas de l'autre fonction crochet

Ensuite, vous pouvez suivre la méthode directement après le nom de l'instruction

Exemple:

<div id="app2">
	<h3 v-fontWeight="1000" v-fontsize="'50'">{{date | dateFormat}}</h3>
</div>

<script>
	var vm2=new Vue({
	            el:'#app2',
	            data:{
	                date:new Date()
	            },
	            methods:{},
	            filters:{},
	            // 自定义私有指令
	            directives:{
	                // 字体粗细
	                "fontweight":{
	                    bind:function(el,binding)
	                    {
	                        el.style.fontWeight=binding.value;
	                    }
	                },
	                // 字体大小
	                "fontsize":function(el,binding) // 该function就相当于将里面的代码写到【且只写到】bind和update钩子上去了
	                {
	                    el.style.fontSize=parseInt(binding.value)+"px";
	                }
	            }
	        })
</script>

---