Base
Además de las directivas incorporadas, Vue.js también permite el registro de directivas personalizadas. Las directivas personalizadas proporcionan un mecanismo para mapear los cambios en los datos en el comportamiento DOM.
Se puede registrar una Directiva Global personalizada utilizando el método Vue.Directive (ID, Definición), que recibe dos ID de instrucción de parámetros y objetos de definición. También puede registrar una directiva personalizada local utilizando la opción Directivas del componente.
Función de gancho
Definir un objeto puede proporcionar varias funciones de gancho (todas opcionales):
• Binde: llamado solo una vez, y se llama cuando la instrucción está vinculada al elemento por primera vez.
• Actualización: la primera llamada se llama inmediatamente después del enlace con el valor inicial como parámetro, y luego, cuando el valor límite cambia, los parámetros son el nuevo valor y el valor anterior.
• Descansar: llamado solo una vez, cuando la instrucción no se ha vuelto a la instrucción del elemento.
Ejemplo
Vue.directive ('my-directive', {bind: function () {// Preparation Work // Por ejemplo, agregando un procesador de eventos o una tarea de alto consumo que solo debe ejecutarse una vez}, actualizar: function (newValue, OldValue) {// Work cuando el valor se actualiza // también se llamará una vez con el valor inicial como un parámetro}, UNUSD: function () {) Eliminar el oyente del evento agregado por bind ()}})Después de registrarse, puede usarlo así en la plantilla Vue.js (recuerde agregar el prefijo v-)::
<Div V-My-Directive = "SomeValue"> </div>
Cuando solo se necesita la función de actualización, puede pasar en una función en lugar del objeto de definición:
Vue.directive ('my-directive', function (valor) {// Esta función se usa como update ()})Propiedades de instancia de directiva
Todas las funciones de gancho se copiarán en el objeto directivo real, y esto dentro del gancho apunta a este objeto directivo. Este objeto expone algunas propiedades útiles:
• El: el elemento unido a la directiva.
• VM: el modelado de vista de contexto que posee la instrucción.
• Expresión: la expresión de la directiva, excluyendo parámetros y filtros.
• Arg: Parámetros de la Directiva.
• Nombre: el nombre de la Directiva, sin prefijo.
• Modificadores: un objeto que contiene modificadores para directivas.
• Descriptor: un objeto que contiene los resultados de análisis de una directiva.
Debe tratar estas propiedades como de solo lectura y no las modifica. También puede agregar propiedades personalizadas al objeto Directive, pero tenga cuidado de no sobrescribir las propiedades internas existentes.
Ejemplo:
<div id = "demo" v-demo: hello.ab = "msg"> </div>
Vue.Directive ('Demo', {bind: functer () {console.log ('demos límite!')}, Update: function (value) {this.el.innerhtml = 'name -' + this.name + '<br>' + 'expresión -' + this.expression + '<br>' + 'argumento -' + this.arg + '<r>' + ' +' Modifier Json.stringify (this.modifiers) + '<br>' + 'valor -' + valor}}) var demo = new vue ({el: '#Demo', Data: {Msg: 'Hola!'}})Objeto literal
Si la directiva requiere múltiples valores, puede pasar en un objeto JavaScript literal. Recuerde que las directivas pueden usar cualquier expresión legal de JavaScript:
<div v-demo = "{color: 'blanco', texto: '¡Hola!' } "> </div>
Vue.directive ('demo', function (value) {console.log (value.color) // "White" console.log (value.text) // "¡Hola!"})Modificador literal
Cuando la directiva usa un modificador literal, su valor se procesará como una cadena normal y se pasará al método de actualización. El método de actualización se llamará solo una vez, porque una cadena normal no puede responder a los cambios de datos.
<div v-demo.literal = "foo bar baz">
Vue.directive ('demo', function (valor) {console.log (valor) // "foo bar baz"})Directiva elemental
A veces queremos usar directivas en forma de elementos personalizados, no en forma de características. Esto es muy similar a la directiva "E" de Angular. Las instrucciones de los elementos pueden considerarse como un componente liviano. Puede registrar una directiva de elementos personalizados como la siguiente:
Vue.ElementDirective ('my-directive', {// api bind: functer () {// operación this.el ...}})No escribas así:
<Div V-My-Directive> </div>
Escribe de esta manera:
<my-directive> </directive>
Una instrucción de elemento no puede aceptar parámetros o expresiones, pero puede leer las características de un elemento para determinar su comportamiento.
A diferencia de las instrucciones ordinarias, las instrucciones del elemento son finales, lo que significa que una vez que Vue encuentra una instrucción de elemento, se omitirá el elemento y sus elementos infantiles; solo la instrucción del elemento en sí puede operar en el elemento y sus elementos infantiles.
Opciones avanzadas
parámetros
Las directivas personalizadas pueden recibir una matriz de params, especificando una lista de características, y el compilador VUE extraerá automáticamente estas características de los elementos unidos. Por ejemplo:
<div v-exame a = "hi"> </div>
Vue.directive ('Ejemplo', {params: ['a'], bind: functer () {console.log (this.params.a) // -> "hi"}})Esta API también admite propiedades dinámicas. this.params [clave] se actualizará automáticamente. Además, se puede especificar una devolución de llamada para llamar cuando cambia el valor:
<Div V-Ejemplo V-Bind: a = "SomeValue"> </div>
Vue.directive ('Ejemplo', {params: ['a'], paramWatchers: {a: function (val, Oldval) {console.log ('A cambiado!')}})Similar a los accesorios, el nombre del parámetro de directiva utiliza el estilo CamelCase en JavaScript, y el estilo Kebab-Case corresponde al HTML. Por ejemplo, supongamos que hay un parámetro `desactivado-efecto` en la plantilla, accedir a él en JavaScript con` Disable Effect`.
profundo
Si se usa una directiva personalizada en un objeto y la actualización se activa cuando las propiedades internas del objeto cambian, especifique profundo: true en el objeto de definición de directiva.
<Div V-My-Directive = "obj"> </div>
Vue.directive ('my-directive', {profundo: true, update: function (obj) {// llamado cuando las propiedades anidadas de `obj` cambian}})dos
Si la Directiva desea volver a escribir los datos en la instancia de Vue, especifique Twoway: True en el objeto Definición de la Directiva. Esta opción permite que este.set (valor) se use en directivas:
Vue.Directive ('Ejemplo', {twoway: true, bind: function () {this.handler = function () {// Escribe datos nuevamente a vm // Si la directiva ata v-example = "abc" como este // se establecerá `vm.abc` con el valor dado this.set (this.el.value)} .Bind (this) this.el.adDeventer ('tuting', 'tuting', orto, 'tuting',», orto, orto ', », orto, orto, orto,»,' tuting ',' tuting ',' tuting ', orto, »,», orto, »,», orto,' tuten ', orto, orto,' tuting ', », orto,», orto, orto, ». this.handler)}, no admite: function () {this.el.removeEventListener ('input', this.handler)}})aceptación
Pasar Aceptación de aceptación: True permite que las directivas personalizadas acepten declaraciones en línea, al igual que V-ON:
<Div V-My-Directive = "A ++"> </div>
Vue.directive ('my-directive', {aceptación de aceptación: true, actualización: function (fn) {// El valor entrante es una función // La instrucción "A ++" se calculará dentro del alcance de la instancia de pertenencia cuando se llama}})Use sabiamente porque generalmente desea evitar los efectos secundarios en su plantilla.
Terminal
1.0.19+
Vue compila módulos atravesando recursivamente el árbol DOM. Pero cuando se encuentra con una directiva terminal, deja de atravesar los elementos descendientes de este elemento. Esta directiva se hará cargo de la tarea de compilar este elemento y sus descendientes. V-IF y V-For son directivas terminales.
Escribir directivas terminales personalizadas es un tema de alto nivel y requiere una mejor comprensión del proceso de compilación de VUE, pero esto no significa que sea imposible escribir directivas terminales personalizadas. Use terminal: verdadero para especificar una directiva terminal personalizada, y también puede necesitar usar Vue.FragmentFactory para compilar parcial. Aquí hay una directiva terminal personalizada que compila su plantilla de contenido e inyecta los resultados en otro lugar en la página:
var fragmentFactory = vue.FragmentFactoryVar Remete = vue.util.removevar createAsChor = vue.util.createanchorvue.directive ('inject', {terminal: true, bind: functer () {var contrein contreinter = document.getElementByid (this.arg) this.anchor = createAnchor ('vinject') Contieneer. remove (this.el) var factory = new FragmentFactory (this.vm, this.el) this.frag = factory.create (this._host, this._scope, this._frag) this.frag.before (this.anchor)}, Unbind: function () {this.frag.remove () eliminar (this.anchor)}})<div id = "modal"> </div> ... <div v-inject: modal> <h1> encabezado </h1> <p> cuerpo </p> <p> pie de página </p> </div>
Si desea escribir directivas de terminal personalizadas, se recomienda que lea el código fuente de las directivas terminales incorporadas, como V-IF y V-for, para comprender mejor los mecanismos internos de Vue.
prioridad
Puede asignar una prioridad a la instrucción. Si no se especifica, el valor predeterminado para el comando normal es 1000, y el valor predeterminado para el comando terminal es 2000. Las instrucciones con mayor prioridad en el mismo elemento se procesarán antes que otras instrucciones. Las directivas con la misma prioridad se procesan en el orden en que aparecen en la lista de propiedades de elementos, pero no se puede garantizar que este orden es consistente en diferentes navegadores.
La prioridad de las directivas incorporadas se puede ver en la API. Además, las instrucciones de control del proceso V-IF y V-FOR siempre tienen la más alta prioridad durante el proceso de compilación.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.