vue las instrucciones del envase

Instrucción de definición debe ser colocado en el nuevo Vue ({}) antes del código, de lo contrario un error y no válida;
cuando la instrucción de registro, sin necesidad de incluir este prefijo v-;
cuando se utiliza en elemento DOM, hay que añadir el prefijo V- ;

función de enlace comando personalizado

Un objeto de definición de comando puede proporcionar la función de gancho varios (todo opcional):

aprieto: se llama una sola vez, los primeros elementos de instrucción con destino a la llamada, donde los ajustes iniciales pueden llevar a cabo de una vez;

insertado: Llamado cuando se inserta el elemento de unión en el nodo padre;

cambio: la primera llamada al valor inicial inmediatamente después de los parámetros se unen, se unen los valores después de la llamada cuando se produzcan cambios, el nuevo valor del parámetro y el valor de edad;

componentUpdated: instrucción, donde los componentes y sub-VNode VNode después de todo la llamada de actualización;

unbind: se llama sólo una vez, cuando la instrucción de llamada y solución de elementos lazo;

parámetros de la función de gancho

EL: instrucción elemento enlazado, puede ser utilizado para operar directamente el DOM;
Encuadernación: un objeto que contiene los siguientes atributos:
　　Nombre: nombre del comando, no el v- prefijo;
　　valor: instrucciones de valor consolidados, como: V-mis = "2", el valor de la unión de 2;
　　oldValue: instrucción valor previo obligado, y sólo está disponible en la actualización componentUpdated ganchos. Independientemente de si los cambios de valor están disponibles;
　　la expresión El: una expresión de cadena de instrucciones. Por ejemplo, v-mi-directivo = "1 + 1", la expresión de "1 + 1";
　　Arg: pasan los parámetros de comando, opcional. Por ejemplo v-mi-directiva: foo, el parámetro de "foo";
　　modificadores: modificador comprende un objeto. Por ejemplo: v-my-directive.foo.bar, el foo objeto modificador {: true, bar: a true};
　　la vnode: compilar el nodo virtual generada Vue. API VNode lugar para más detalles;
　　oldVnode: un nodo virtual, disponible sólo en la actualización y componentUpdated ganchos;

Vue.directive ( 'Focus' , { 
  la bind: función () {
     // Este comando lógica 
    // se puede utilizar para obtener el elemento actual this.el objeto instrucción se encuentra 
    el este .el.style.color = 'rojo' ; 
  } 
});

// // definir un comando personalizado con los parámetros 
    Vue.directive ( 'Color' , { 
        las params: [ 'Colorname' ], 
        el aprieto: función () {
             // 1,0 Colorname valor adquirido 
            var CNAME = The Esta .params .colorname; 

            // 2,0 eL adquiridos después impartir un patrón para que 
            el este .el.style.color = CNAME; 
        } 
    }); 

    uso:
     <input type = "text" = V-Model "ProductID" V-color = colorName "blue"> ----- hecho, this.el.style.color = CNAME = colorname = "blue ",

instrucciones personalizadas dentro del componente de definición

<Plantilla> 
  <div class = "Hola"> 
      <div V-Test = 'nombre'> </ div> 
  </ div> 
</ Plantilla> 
<script> 
Exportación predeterminado { 
  Datos () { 
    retorno { 
     nombre: 'Yo nombre ' , 
    } 
  }, 
  directivas: { 
      Prueba: { 
        insertan el: función (eL, vinculante) { // definición de comandos 
           / / eL es el elemento de unión, la operación puede ser dom 
           la console.log (unión) // objeto , contiene muchas propiedades 
        }, 
        el enlace: función (eL, Encuadernación, el vnode) { 
            eL.innerHTML =binding.value 
          } 
      } 
  }, 
  creado: función () { 
  }, 
  montado: función () { 
  }, 
  métodos: { 
  } 
}
 </ script>

comando global definida personalizada

<div id = "caja"> 
    hola <span v-rojo> bienvenidos </ span> 
</ div> 
<script type = "text / javascript"> 
    Vue.directive ( 'rojo' , { 
        insertada: la función (el) { 
            el.style.background = 'rojo' ; 
        } 
    }); 
    var vm = nuevos Vue ({ 
        datos: { 
        
        }, 
    }) $ montaje (. '#box' ); 
</ script>

Ejemplos

Antes de que la imagen no se carga, el fondo de color al azar marcador de posición, la carga de imágenes se ha completado antes de renderizar directamente.

valor; 
      img.onload = función


      () { 
        El.style.backgroundImage = 'url (' + binding.value + ')' 
      } 
    } 
  }); 
  nueva Vue ({ 
    EL: '#app' , 
    de datos: { 
      lista: [ 
        { 
          url: 'http://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/Billboard/img/tan04.jpg' 
        } , 
        { 
          url: 'http://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/Billboard/img/tan03.jpg' 
        }, 
        { 
          url: 'http://i0.jrjimg.cn/zqt -red-1000 / enfoque / focus2017YMZ / cartelera / img / tan04.jpg'
</ Script>

 

Original: https://www.jianshu.com/p/dfdfb9e2b501