Analyse détaillée des instructions personnalisées Vue et des fonctions de définition d'instructions (code)

Les instructions personnalisées Vue peuvent être définies globalement ou localement. Les composants Vue sont la réutilisation du HTML et du code, tandis que les instructions Vue sont une réutilisation étendue du DOM. Examinons de plus près la personnalisation dans l'analyse des instructions.

1. Instructions personnalisées Vue : utilisez Vue.directive(id,definition) pour enregistrer les instructions personnalisées globales et utilisez l'option directives du composant pour enregistrer les instructions personnalisées locales.

2. Fonction hook Vue :

La fonction de définition d'instruction fournit plusieurs fonctions hook (facultatif) :

bind : appelée une seule fois, l'instruction est liée pour la première fois. Appelée lorsqu'un élément est atteint, cette fonction hook peut être utilisée pour définir une action d'initialisation qui est exécutée une fois lors de la liaison.

inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (il peut être appelé tant que le nœud parent existe et n'a pas besoin d'exister dans le document).

mise à jour : la première fois qu'il est appelé immédiatement après la liaison, le paramètre obtenu est la valeur initiale de la liaison, et il est appelé plus tard lorsque le modèle où se trouve l'élément lié est mis à jour, que le changements de valeur de liaison. En comparant les valeurs de liaison avant et après la mise à jour, les mises à jour inutiles du modèle peuvent être ignorées (voir ci-dessous pour les paramètres détaillés de la fonction hook).

componentUpdated : appelé lorsque le modèle où se trouve l'élément lié termine un cycle de mise à jour.

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

3. Paramètres de la fonction hook Vue : (el, bind, vnode, oldVnode)

el : L'élément lié par l'instruction peut être utilisé pour faire fonctionner directement le DOM.

binding : un objet contenant les attributs suivants

name : le nom de l'instruction, excluant le préfixe de v- ;

value : la valeur de liaison de l'instruction par exemple ; : v- my-directive="1+1", la valeur de value est 2 ;

oldValue : la valeur précédente liée par l'instruction, disponible uniquement dans les fonctions hook update et componentUpdated, que le changements de valeur ;

expression : la forme de chaîne de la valeur de liaison ; par exemple : v-my-directive="1+1", la valeur de l'expression est '1+1' ; > arg : passé à l'instruction Paramètres ; par exemple : v-my-directive:foo, la valeur de arg est 'foo' ;

modificateurs : un objet contenant des modificateurs par exemple : v-my-directive ; .a.b, la valeur des modificateurs est {'a':true,'b':true>

vnode : nœud virtuel généré compilé par Vue

oldVnode : le dernier nœud virtuel, uniquement ; dans les fonctions de hook update et composantUpdated Disponible.

4. Abréviation de fonction : dans la plupart des cas, nous souhaitons peut-être effectuer des actions répétées sur les hooks de liaison et de mise à jour, et ne voulons pas nous soucier des autres fonctions du hook. Vous pouvez l'écrire comme ceci :

<p id="app" v-demo:foo.a.b="message"></p>

Vue.directive(&#39;demo&#39;, {
  bind: function (el, binding, vnode) {
      console.log(&#39;bind&#39;);
    var s = JSON.stringify
    el.innerHTML =
      &#39;name: &#39;       + s(binding.name) + &#39;<br>&#39; +
      &#39;value: &#39;      + s(binding.value) + &#39;<br>&#39; +
      &#39;expression: &#39; + s(binding.expression) + &#39;<br>&#39; +
      &#39;argument: &#39;   + s(binding.arg) + &#39;<br>&#39; +
      &#39;modifiers: &#39;  + s(binding.modifiers) + &#39;<br>&#39; +
      &#39;vnode keys: &#39; + Object.keys(vnode).join(&#39;, &#39;)
  }
});
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;hello!&#39;
  }
});

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 tous les types légaux d'expressions Javascript.

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

Exemple d'analyse :

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

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

a. Lors du chargement de la page : liaison insérée

<p id="app">
    <my-comp v-if="msg" :msg="msg"></my-comp>
    <button @click="update">更新</button>
    <button @click="uninstall">卸载</button>
    <button @click="install">安装</button>
</p>
<script type="text/javascript">
    Vue.directive(&#39;hello&#39;, {
        bind: function (el){
            console.log(&#39;bind&#39;);
        },
        inserted: function (el){
            console.log(&#39;inserted&#39;);
        },
        update: function (el){
            console.log(&#39;update&#39;);
        },
        componentUpdated: function (el){
            console.log(&#39;componentUpdated&#39;);
        },
        unbind: function (el){
            console.log(&#39;unbind&#39;);
        }
    });

    var myComp = {
        template: &#39;<h1 v-hello>{{msg}}</h1>&#39;,
        props: {
            msg: String
        }
    }

    new Vue({
        el: &#39;#app&#39;,
        data: {
            msg: &#39;Hello&#39;
        },
        components: {
            myComp: myComp
        },
        methods: {
            update: function (){
                this.msg = &#39;Hi&#39;;
            },
            uninstall: function (){
                this.msg = &#39;&#39;;
            },
            install: function (){
                this.msg = &#39;Hello&#39;;
            }
        }
    })
</script>

b. . Désinstallez le composant : unbind

d. Réinstallez le composant : bind insert

Notez la différence : bind et insert : lors de la liaison, le nœud parent est nul, lorsqu'il est inséré, le nœud parent existe. ; update et composantUpdated : la mise à jour est avant la mise à jour des données, composantUpdated est après la mise à jour des données.

Enfin, la dernière implémentation d'encapsulation d'instructions réellement développée

Idée de base

Exposer l'API au monde extérieur

import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.state.permission.pagePermission
    if (value && typeof value === 'string' && value.length > 0) {
      const hasPermission = roles.some(role => {
        return role.permission == value
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="'button'"`)
    }
  }
}

Recommandations associées :

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install) // eslint-disable-line
}

permission.install = install
export default permission

Les instructions personnalisées de Vue implémentent le plug-in v-tap

Comment utiliser les instructions personnalisées de Vue pour compléter un menu déroulant

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!