Directiva
Aunque parece que aunque es similar a la definición en Angular, la directiva es una expansión de las funciones DOM, la directiva de Vue es mucho más débil. Debido a que el componente VUE en realidad contiene operaciones en DOM, la mayoría de las veces cuando escribimos un componente general, es un componente en lugar de una directiva, y en angular, escribimos un componente general, generalmente es una directiva.
Entonces dije que la directiva de Vue es mucho más débil que Angular, o se puede decir que es mucho más puro. Es una expansión de las funciones DOM, no para encapsular la lógica relacionada con DOM. Si está interesado, puede entender comparando estas dos bibliotecas de la interfaz de usuario:
• Vux https://github.com/airyland/vux
• Bootstrap angular https://github.com/angular-ui/bootstrap
En comparación, encontraremos que en Vue, en realidad encapsulamos un componente general (de hecho, ya sea general o no) es un componente, pero en angular es una directiva, porque el controlador en Angular solo puede crear un alcance de $. Se puede pensar simplemente en la directiva VUE = Directiva Angular + Controlador. Como se mencionó anteriormente, muchos diseños de VUE son similares a Angular2. La directiva en Vue puede ser básicamente equivalente a la Directiva en Angular2, pero no se confunda con la Directiva en Angular.
Para evitar engañosos, la directiva angular ya no se comparará más adelante.
ciclo vital
El ciclo de vida se divide en tres pasos:
• Atar los disparadores cuando se unen al elemento DOM por primera vez
• El enlace de actualización se activará inmediatamente después de la finalización, y se activará cuando los parámetros se actualicen en el futuro.
• Descansar los desencadenantes al desapercibir y los elementos doms no sean
La API es muy concisa. . .
Entre ellos, la actualización es lo más importante, es decir, cuando la Directiva recibe una actualización de un valor, se ejecutará el código correspondiente. Los parámetros recibidos por la función de actualización son los valores aprobados por el usuario a través de ATTR.
Implementemos una directiva simple a continuación, que se utiliza para verificar la entrada de contenido de TODO List (verificación de formulario). La estructura básica de la directiva es la siguiente:
Vue.directive ("minLength", {bind: function () {}, update: function (value) {}, sinbind: function () {}});Luego, debemos realizar una verificación cuando el usuario ingrese. Aquí implementamos una verificación simple de MinLength, el código es el siguiente:
Vue.directive ("minLength", {bind: function () {var self = this; var el = this.el; el.adDeventListener ("keydown", function (e) {if (e.keycode ==== 13) {if (el.value.length <Self.minlength) {e.preventDefault ();}}}); El.ParentNode.QuerySelector ("Button, [type = 'Subt']"); función() { }});La lógica básica vincula los eventos durante la etapa de enlace, y luego realiza juicios basados en el valor de MinLength pasados durante la actualización.
En la actualidad, la directiva debería ser lograr funciones similares y, por supuesto, todavía hay muchos detalles de uso, por lo que no entraré en detalles. La directiva no es una parte muy importante en Vue. La gente generalmente escribe componente al escribir código.
Los filtros y las mezclas se ven relativamente simples, omítalo.
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.