Personalización y uso de instrucciones globales Vue e instrucciones privadas

1. Personalizar instrucciones globales

Abre la puerta y levanta una castaña:

<label>
    搜索
    <input type="text" id="search">
</label>

En este momento, obtener el evento de enfoque de este cuadro de entrada en el método nativo es así:

document.getElementById("search").focus();

En Vue, use instrucciones personalizadas para lograr este efecto. Las
instrucciones son como v-model v-text, pero Vue las proporciona de manera predeterminada
y las instrucciones personalizadas son personalizadas ( sin sentido)

Todas las instrucciones en Vue v-comienzan con

Personalice un comando personalizado llamado v-focus:
agréguelo a la etiqueta

<label>
    搜索
    <input type="text" id="search" v-focus>
</label>

Luego use Vue.directive () para definir la instrucción global.
Sintaxis: El Vue.directive(指令名称,对象)
primer parámetro es el nombre de la instrucción. Cuando se define la instrucción, no necesita tener el prefijo v-, pero el
segundo parámetro debe agregarse al llamar. Es un objeto. Hay algunas funciones de enlace relacionadas con instrucciones que pueden realizar operaciones relacionadas en etapas específicas

Cada función de enlace en el primer parámetro siempre está obligado elementos EL que indican la instrucción ( el EMENT) [por supuesto libre de tomar el nombre del parámetro]
Es un objeto de js dom tanto, puede disfrutar de la nativos utilizados al respecto método js

Las funciones de enlace de uso común se insertan y actualizan en enlace:

• bind se ejecutará la función bind inmediatamente cuando una instrucción sobre los elementos unidos a
  él sólo una vez a causa de un elemento de mando se puede unir a la vez
• insertado cuando el elemento en el DOM cuando se inserta realiza la función
  es también sólo una vez
• actualizado es cuando se actualiza el nodo DOM (componente VNode), la función de carga se ejecutará y
  se puede activar varias veces

Vue.directive("focus",{
            // 钩子函数
            
            // 在bind刚绑定的时候 元素还并没有被放到dom中去 因此此时调用focus()方法没作用 不会生效 因为一个元素只有在插入dom之后才能获取焦点
            bind:function(el)
            {
                // el.focus();
            },
            
            // 元素插入到DOM中的时候会执行该inserted函数
            // 【只会执行一次】
            inserted:function(el)
            {
                el.focus();
            },
            
            // 当DOM节点(VNode组件)更新的时候 会执行该upload函数
            // 【可能会触发多次】
            updated:function(el)
            {
            
            }
        })

Además de esto:

• componentUpdated: el nodo DOM (componente VNode) del componente donde se encuentra la instrucción y sus nodos DOM secundarios (componente VNode) se actualizan
• desvincular: se llama
  solo cuando la instrucción y el elemento no están vinculados

Para que pueda implementar instrucciones personalizadas

---

Por supuesto, hay una diferencia entre estilo y comportamiento: ¿qué
es el estilo? El estilo es como establecer colores
y el comportamiento es como el comportamiento js como focus ()

Tome la instrucción de color de fuente personalizada como una castaña:

Vue.directive("color",{
            bind:function(el)
            {
                el.style.color="aqua";
            }
        })

Descubrimos que el estilo se puede establecer en enlace.
Esto se debe a que, siempre que se analice el estilo , se mostrará un
estilo de color en la página. Siempre que esté vinculado al elemento a través de las instrucciones, ya sea que el elemento se inserte en la página El elemento definitivamente tendrá un estilo en línea.
Después de eso, el elemento definitivamente se mostrará en la página. En este momento, el motor de representación del navegador analizará el estilo y lo aplicará al elemento.

Pero un método como focus () es una acción. La acción debe agregarse al DOM para obtener el foco. Cuando se vincula, solo está en la memoria y no se agrega al DOM.
El comportamiento invocado en la memoria se representa naturalmente en la página. Inválido
e insertar solo se llama después de llegar a la página, por lo que el comportamiento será efectivo

En resumen, las operaciones relacionadas con el comportamiento js se realizan mejor en inserción para evitar que el comportamiento js surta efecto
, y las operaciones relacionadas con el estilo generalmente se pueden realizar en enlace

---

Obtenga el valor pasado en la instrucción personalizada

Agregue comillas en el momento de la definición porque se pasa una cadena.
Sin comillas, se reconocerá como una variable

<input type="text" id="search" v-color="'blue'">

Primero mire los parámetros compartidos por la función de enlace:

• el: El elemento vinculado por la instrucción se puede usar para manipular directamente el DOM
• binding: Un objeto contiene los siguientes atributos:
  nombre : el nombre de la instrucción (excluyendo el prefijo v)
  valor : el valor
  de enlace de la instrucción Ejemplo: el valor de enlace en v-my-directive = "1 + 1" es 2, es decir: el valor es El resultado después del análisis de cadena
  oldValue: el valor anterior vinculado por la instrucción
  solo está disponible en los ganchos de actualización y componente actualizado. Se puede usar
  independientemente de si el valor cambia.
  Expresión : expresión de instrucción en forma de cadena
  Ejemplo: en v-my-directive = "1 La expresión en "+1" es "1 + 1", es decir: la expresión es el resultado original sin análisis de cadena
  arg : el parámetro pasado a la instrucción
  Ejemplo: el parámetro es "foo" en v-my-directive: foo
  modificadores : un objeto que contiene modificadores. Por ejemplo: en v-my-directive.foo.bar, el objeto modificador es {foo: true, bar: true}
• vnode: Nodo virtual generado por la compilación Vue
• oldVnode: El último nodo virtual
  solo está disponible en la actualización y el componente.

Obtenga el valor pasado
Ejemplo:

// 自定义设置字体颜色指令
Vue.directive("color",{
    bind:function(el,binding) // 此处的el和binding可任意命名
    {
        console.log(binding.value);
        el.style.color=binding.value;
    }
})

---

Segundo, instrucciones privadas personalizadas

Al igual que los filtros, no solo hay comandos comunes sino también comandos privados.
Los comandos privados personalizados son similares a los filtros privados personalizados. Se
establecen en el objeto de propiedad de la instancia de Vue.

<div id="app2">
	<h3 v-fontWeight="1000">{{date | dateFormat}}</h3>
</div>

<script>
	var vm2=new Vue({
	            el:'#app2',
	            data:{
	                date:new Date()
	            },
	            methods:{},
	            filters:{},
	            // 自定义私有指令
	            directives:{
	                "fontweight":{
	                    bind:function(el,binding)
	                    {
	                        el.style.fontWeight=binding.value;
	                    }
	                }
	            }
	        })
</script>

---

Tercero, la abreviatura de la instrucción.

Los comandos personalizados de Vue también admiten taquigrafía

Si sólo se desea bindy la updateacción sobre estos dos ganchos para repetir
y no se preocupa por la otra función de enlace

Luego puede seguir el método directamente después del nombre de la instrucción

Ejemplo:

<div id="app2">
	<h3 v-fontWeight="1000" v-fontsize="'50'">{{date | dateFormat}}</h3>
</div>

<script>
	var vm2=new Vue({
	            el:'#app2',
	            data:{
	                date:new Date()
	            },
	            methods:{},
	            filters:{},
	            // 自定义私有指令
	            directives:{
	                // 字体粗细
	                "fontweight":{
	                    bind:function(el,binding)
	                    {
	                        el.style.fontWeight=binding.value;
	                    }
	                },
	                // 字体大小
	                "fontsize":function(el,binding) // 该function就相当于将里面的代码写到【且只写到】bind和update钩子上去了
	                {
	                    el.style.fontSize=parseInt(binding.value)+"px";
	                }
	            }
	        })
</script>

---