¿Cómo utilizar las directivas personalizadas de Vue? Investigación del flujo en chorro…
Vue.js le permite registrar directivas personalizadas, lo que esencialmente le permite enseñarle a Vue algunas habilidades nuevas: cómo asignar cambios de datos al comportamiento DOM. Puede utilizar el método Vue.directive(id, definición) para registrar una directiva personalizada global pasando la identificación de la directiva y el objeto de definición. Para definir un objeto es necesario proporcionar algunas funciones de enlace (todas opcionales):
Vincular: solo se llama una vez cuando la instrucción vincula un elemento por primera vez.
La primera llamada se realiza inmediatamente después de update:bind, y el parámetro obtenido es el valor inicial del enlace en el futuro, siempre que cambie el valor del enlace, se llamará para obtener el nuevo valor y; el valor antiguo.
Desvincular: Se llama solo una vez cuando la instrucción desvincula el elemento.
Ejemplo:
Vue. Direccional ('my-direccional ', { bind:function(){//Prepárate para el enlace.
//Como agregar un detector de eventos u otras operaciones complejas que solo deben realizarse una vez.
}, actualizar: función (valor nuevo, valor anterior){// Actualizar en consecuencia según el nuevo valor obtenido
// El valor inicial también se llamará una vez. /p>
}. p>
}, unbind: function () {//Realizar el trabajo de limpieza
//Por ejemplo, eliminar el detector de eventos agregado en bind()
}
}) Una vez registrada la directiva personalizada, se puede usar en la plantilla Vue.js de esta manera (debe agregar el prefijo de directiva Vue.js, el valor predeterminado es v- ):
& ltdiv v-my-directive="someValue " >& lt/div & gt; Si solo necesita actualizar la función, solo puede pasar una función en lugar del objeto de definición:
Vue.directive ('my-directive ', function(value){//Esta función se usará como la función update()}) Todas las funciones de enlace se copiarán en el objeto de directiva real y este objeto de directiva será éste entre todas las funciones de enlace.
Entorno contextual. Algunas propiedades públicas útiles están expuestas en el objeto de directiva:
El: el elemento vinculante de la directiva
Vm: el modelo de vista contextual propietario de la directiva.
Expresión: La expresión de la instrucción, excluyendo parámetros y filtros.
Arg: Parámetros de la directiva
Raw: Expresión cruda sin analizar.
Nombre: nombre del comando sin prefijo.
Estas propiedades son de sólo lectura, no las modifique. También puede adjuntar propiedades personalizadas al objeto de directiva, pero tenga cuidado de no sobrescribir las propiedades internas existentes.
Ejemplo de uso de propiedades de objeto directivo:
& lt! DOCTYPE html & gt& lthtml & gt& lthead lang="en " >>p>
& ltmeta charset="UTF-8 " />
& lttitle & gt& lt/title & gt; p>
& ltscript src = "/Ajax/libs/vue/0.12.16/vue . min . js " & gt; & lt/script & gt; & lt/head & gt; ltdiv id = " demo " v-demo-directive = " LightSlateGray:msg " & gt.
</div><Script>
Vue.directive('demoDirective', {
bind:function(){ this . El . style . color = ' # fff '
este.estilo.color de fondo = este.arg
},
actualización:función(valor){este. . nombre+' & lt;' br & gt'+' raw-'+this . raw+' & lt;' br & gt'+' expresión-'+this expresión+' & lt;' -'+this . arg+' & lt;' br & gt'+'valor- ' +valor
}
});var demo = new Vue({
el:'#demo',
data:{
MSG: '¡Hola!'
}
} )</script></body></html>Varias cláusulas
En el mismo atributo, separadas por comas. Varias cláusulas estarán vinculadas a múltiples instancias de directiva. En el siguiente ejemplo, la directiva se crea y se llama dos veces:
& ltdiv v-demo="color: 'white ', text: 'hello!'" & gt& lt/div & gt; Si desea utilizar una instancia de instrucción para procesar múltiples parámetros, puede utilizar objetos de texto como expresiones:
& ltdiv v-demo="{color: 'white ', text: 'hello!'} " & gt& lt /div & gt;
Vue.directive('demo ', función(valor){ consola . log(valor)//Objeto { color:' blanco ', texto: '¡hola!'} }) Directivas literales
Si se pasa isLiteral: true al crear una directiva personalizada, el valor del atributo se tratará como una cadena literal y se asignará a la expresión de la directiva. La descripción del texto no intenta establecer un seguimiento de los datos.
Ejemplo:
& ltdiv v-literal-dir = " foo " & gt; & lt/div & gt; -dir ', { isLiteral: true, bind:function(){ console . log(this . expresión)//' foo '
}
}) comando de texto dinámico
Sin embargo, en el caso de que una directiva literal contenga una etiqueta Moustache, la directiva se comporta de la siguiente manera:
La instancia de la directiva tendrá un atributo. _ isdynamical se establece en verdadero;
Si no se proporciona ninguna función de actualización, la expresión Moustache solo se evaluará una vez y su valor se asignará a this.expression. Los datos de la expresión no serán monitoreados.
Si se proporciona la función de actualización, la directiva establecerá un monitor de datos para la expresión y llamará a la actualización cuando cambie el resultado del cálculo.
Directiva bidireccional
Si su directiva desea volver a escribir datos en la instancia de Vue, debe pasar bidireccional: verdadero. Esta opción permite usar this.set(value) en directivas.
Vue.
directiva('ejemplo', {twoway: true, bind: function () {this.handler = function(){//Escribir datos en vm.
//Si la directiva es v-example= " a.b.c "Enlaza así,
//Asignarás un valor a vm.a.b.c ' aquí.
this.set(this.el.value)
}.bind(this)this . addevent listener(' input ', this. handler)
}, unbind:function(){ this . this .handler)
}
)Declaración en línea
Pasar AcceptStatement: true puede hacer que las instrucciones personalizadas se acepten como v-on:
& ltdiv v-my-directive = " a++ " & gt; & lt/div & gt;
Vue.directive('my-directive ', { aceptarDeclaración: verdadero, actualización: función (fn) { //El valor pasado es una función,
//La declaración "a++" se ejecutará en la máquina virtual del propietario
//scope p>}
}) Pero utilice esta función con prudencia porque normalmente queremos evitar efectos secundarios en las plantillas.
Observación profunda de datos
Si desea utilizar una directiva personalizada en un objeto y la función de actualización de la directiva también se puede activar cuando las propiedades anidadas en el objeto cambian, entonces debes pasar deep: true en la definición de la directiva.
& ltdiv v-my-directive = " obj " & gt; & lt/div & gt; Directiva ('my-Directive ', {deep: true, update:function(obj){//Esta función también se llamará cuando cambien las propiedades anidadas dentro de obj.
}
})Prioridad del comando
Opcionalmente, puedes darle al comando un número de prioridad (el valor predeterminado es 0). Las instrucciones con mayor prioridad sobre el mismo elemento se procesarán antes que otras instrucciones. Las directivas con la misma prioridad se procesarán en el orden en que aparecen en la lista de atributos del elemento, pero no se garantiza que este orden sea coherente en todos los navegadores.
En términos generales, como usuario, no necesita preocuparse por la prioridad de las instrucciones integradas. Si está interesado, puede consultar el código fuente. Las instrucciones de control lógico V-repeat y V-if se consideran "instrucciones concluyentes" y siempre tienen la máxima prioridad durante la compilación.
Directivas de elementos
A veces, es posible que queramos que nuestras directivas se utilicen como elementos personalizados en lugar de atributos. Esto es muy similar al concepto de directivas de nivel E de Angular. La directiva de elementos puede considerarse como un componente personalizado liviano (que se analiza más adelante). Puede registrar directivas de elementos personalizados como este:
Vue. elementdirective ('my-directive ', {//Igual que la API de instrucciones ordinarias.
Enlazar: función () {//Operación this.el...
}
}) Cuando lo usamos, ya no usamos esto Escrito:
& ltdiv v-my-directive>& lt/div>Dice:
& ltmy-directive>& lt/my-directive& gt;La directiva de elemento no puede aceptar parámetros ni expresiones, pero puede leer las características del elemento para determinar su comportamiento. Es muy diferente de la orientación habitual. Las directivas de elementos son finales, lo que significa que una vez que Vue encuentra una directiva de elemento, omitirá la compilación del elemento y sus subelementos; es decir, solo la directiva de elemento en sí puede operar sobre el elemento y sus subelementos.
Creo que después de leer este caso, dominas el método. Para obtener contenido más interesante, preste atención a otros artículos relacionados en Gxl.
Lectura relacionada:
Cómo interactuar con js en el desarrollo de Android
Editor de texto enriquecido estilo documento en grafito desarrollado con Vue.js 2.
Uso de Video.js para implementar la interfaz de transmisión en vivo H5