Vue de entrada a avanzado: directiva personalizada, paquete de complemento y mixins mixtos (siete): https://segmentfault.com/a/1190000012827871
1. Directiva personalizada
Además de los comandos ( v-model y v-show) integrados en las funciones principales de forma predeterminada , Vue también le permite registrar comandos personalizados. Tenga en cuenta que Vue2.0 , en , la forma principal de reutilización y abstracción de código son componentes. Sin embargo, en algunos casos, aún necesita realizar operaciones de bajo nivel en elementos DOM ordinarios, esta vez utilizará instrucciones personalizadas.
Aquí hay un ejemplo, cuando se carga la página, el elemento de entrada obtendrá el foco:
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })Si desea registrar una directiva local, el componente también acepta una directives opción:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}Luego puede usar el nuevo atributo v-focus en cualquier elemento de la plantilla, de la siguiente manera:
<input v-focus>Función de gancho
Un objeto de definición de instrucciones puede proporcionar las siguientes funciones de enlace (todas opcionales):
bind: Se llama solo una vez, se llama cuando la instrucción está vinculada al elemento por primera vez. Aquí puede realizar una configuración de inicialización única.inserted: Se llama cuando el elemento enlazado se inserta en el nodo primario (solo se garantiza que existe el nodo primario, pero no necesariamente se inserta en el documento).update: Se llama cuando se actualiza el VNode del componente, pero puede ocurrir antes de la actualización de su VNode secundario. El valor de la instrucción puede o no haber cambiado. Pero puede ignorar las actualizaciones innecesarias de plantillas comparando los valores antes y después de la actualización (consulte los parámetros de la función de enlace a continuación para obtener más detalles).componentUpdated: Llamado después de que el VNode y su VNode hijo del componente donde se encuentra la instrucción se actualizan todos.unbind: Se llama solo una vez, se llama cuando la instrucción y el elemento no están vinculados.
A continuación nos fijamos en los parámetros de la función de enlace (es decir el, binding, vnode y oldVnode).
Parámetros de la función de gancho
La función de enlace de instrucciones pasará los siguientes parámetros:
el: El elemento vinculado por la instrucción se puede utilizar para manipular directamente el DOM.-
binding: Un objeto que contiene los siguientes atributos:name: Nombre de la instrucción, excluyendo el prefijo v-.value: El valor de enlace de la instrucción, por ejemplo:v-my-directive="1 + 1"medio, el valor de enlace2.oldValue: El valor anterior vinculado por la instrucción, solo disponible enupdateycomponentUpdatedganchos. Disponible independientemente de si el valor cambia.expression: Expresión de instrucción en forma de cadena. Por ejemplov-my-directive="1 + 1", la expresión es"1 + 1".arg: Los parámetros pasados a la instrucción son opcionales. Por ejemplov-my-directive:foo, el parámetro es"foo".modifiers: Un objeto que contiene modificadores. Por ejemplo:v-my-directive.foo.baren, el objeto modificador es{ foo: true, bar: true }.
vnode:VueNodo virtual generado por compilación. Vaya a la API de VNode para obtener más detalles.oldVnode: Último nodo virtual, solo disponible enupdateycomponentUpdatedganchos.
Excepto por
el
esto, todos los demás parámetros deben ser de solo lectura y no deben modificarse. Si necesita compartir datos entre ganchos, se recomienda proceder a través del
conjunto
de datos del elemento .
Este es un ejemplo de un enlace personalizado que utiliza estos atributos:
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>Vue.directive('demo', {
bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#hook-arguments-example', data: { message: 'hello!' } })El resultado:
name: "demo"
value: "hello!"
expression: "message" argument: "foo" modifiers: {"a":true,"b":true} vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholderEn muchos casos, es posible que desee activar el mismo comportamiento durante el enlace y la actualización sin preocuparse por otros enlaces. Por ejemplo, escriba:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})Objeto literal
Si la instrucción requiere múltiples valores, puede pasar un objeto literal de JavaScript. Recuerde, la función de comando puede aceptar todas las expresiones legales de JavaScript.
<div v-demo="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" })2. Complementos
Los complementos generalmente agregan funcionalidad global a Vue. No hay límite para el alcance de los complementos, generalmente hay lo siguiente:
- 1. Agregue métodos o atributos globales, como: vue-custom-element
- 2. Agregue recursos globales: instrucciones / filtros / transiciones, etc., como vue-touch
- 3. Agregue algunas opciones de componentes a través del método de combinación global, como: vue-router
- 4. Agregue métodos de instancia de Vue agregándolos a Vue.prototype.
- 5. Una biblioteca que proporciona su propia API, al tiempo que proporciona una o más funciones mencionadas anteriormente, como vue-router
Los complementos de Vue.js deberían tener un método público install . El primer parámetro de este método es el Vue constructor, y el segundo parámetro es un objeto de opciones opcionales:
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... } }Cómo usar el complemento
Vue.use() Use el complemento a través del método global :
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)También puede pasar un objeto de opción:
Vue.use(MyPlugin, { someOption: true })Vue.use Evitará automáticamente múltiples registros del mismo complemento, y el complemento solo se registrará una vez.
Vue.js Algunos complementos proporcionados oficialmente (como vue-router) se llamarán automáticamente cuando detecten que Vue es una variable global accesible Vue.use(). Sin embargo, en un entorno de módulo como CommonJS, siempre debe llamar explícitamente Vue.use():
// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router') // 不要忘了调用此方法 Vue.use(VueRouter)Ejemplo simple
Encapsule un complemento global de la siguiente manera:
cree una nueva carpeta de cuenta regresiva en la carpeta de componentes en src y cree un nuevo archivo countdown.vue:
<template>
<div>封装一个最简单的插件</div> </template> <script> export default{ name:'count-down' } </script>Cree un nuevo index.js en el mismo directorio que countdown.vue:
import countDown from './countdown';
countDown.install = function(Vue){ Vue.component(countDown.name,countDown) }; export default countDown;En main.js:
import countDown from './components/countdown/index.js'
Vue.use(countDown)Se puede usar en componentes como este:
<count-down></count-down>3. Mixins mixtos
Hybrid ( mixins) es una forma muy flexible de distribuir funciones reutilizables en componentes Vue. Los objetos mixtos pueden contener cualquier opción de componente. Cuando un componente usa un objeto mixto, todas las opciones del objeto mixto se mezclarán con las opciones del propio componente.
// 定义一个混合对象
var myMixin = {
created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // 定义一个使用混合对象的组件 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!"Opción de fusión
Cuando los componentes y los objetos mixtos contienen opciones con el mismo nombre, estas opciones se mezclarán de manera adecuada. Por ejemplo, las funciones de enlace del mismo nombre se mezclarán en una matriz, por lo que se llamarán todas. Además, el gancho del objeto mixto se llamará antes que el gancho del componente mismo:
var mixin = {
created: function () { console.log('混合对象的钩子被调用') } } new Vue({ mixins: [mixin], created: function () { console.log('组件钩子被调用') } }) // => "混合对象的钩子被调用" // => "组件钩子被调用"Las opciones cuyos valores son objetos, por ejemplo methods, components y directives, se mezclarán en el mismo objeto. Cuando los nombres clave de los dos objetos entran en conflicto, se toman los pares clave-valor de los objetos componentes.
var mixin = {
methods: {
foo: function () { console.log('foo') }, conflicting: function () { console.log('from mixin') } } } var vm = new Vue({ mixins: [mixin], methods: { bar: function () { console.log('bar') }, conflicting: function () { console.log('from self') } } }) vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"
Nota: La
Vue.extend()
misma estrategia también se usa para fusionar.
Mezcla global
Los objetos mixtos también se pueden registrar globalmente. ¡Presta atención al uso! Una vez que se utiliza el objeto mixto global, afectará a todas las instancias de Vue creadas más tarde. Cuando se usa correctamente, puede inyectar lógica de procesamiento para objetos personalizados.
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) // => "hello!"
谨慎使用全局混合对象
, Porque afecta cada instancia de Vue creada individualmente (incluidas las plantillas de terceros). En la mayoría de los casos, solo debe aplicarse a las opciones personalizadas, como en el ejemplo anterior. También se puede usar como complementos para evitar aplicaciones duplicadas
Estrategia de combinación de opciones personalizadas
Las opciones personalizadas utilizarán la estrategia predeterminada, que es simplemente sobrescribir los valores existentes. Si desea combinar opciones personalizadas con lógica personalizada, puede Vue.config.optionMergeStrategies agregar una función para:
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal }Para la mayoría de las opciones de objetos, puede usar la estrategia de combinación de métodos:
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods