notas de estudio Vue [2]

filtro 1.Vue (el filtro)

1.1 ¿Qué es un filtro?

El procesamiento de la planta como un filtro, el filtro puede filtrar elegible, no eran elegibles para el procesamiento;

1.2 Filtro vue de dónde?

Oficial da: Vue.js le permite personalizar los filtros, se puede utilizar en un texto común formateo.

comprensión personal: El filtro puede ser optimizado para obtener los datos en el formato que desee

1.3 Filtro vue ¿Cómo?

Los filtros pueden ser utilizados en dos lugares: doble interpolación de los apoyos y expresiones v-bind. De la siguiente manera:

<!-- 在双花括号中 -->
{{ message | filterName }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | filterName"></div>

Nota: El filtro puede ser utilizado en serie
{{mensaje | filterA | filterB} } // mensaje filterA por primera vez por el procesado en el resultado del proceso a seguir filterB

2. Filtro personalizado

vue un filtro en dos tipos: filtro filtros globales y locales

Definir filtro global 2.1

No hay parámetros de filtro:

Vue.filter('filterName', function (msg) {
  //如何处理数据
  return msg.replace(/单纯/g, '邪恶') //将msg中的单纯替换成邪恶
})

Hay parámetros de filtro:

Vue.filter('filterName', function (msg,arg1,arg2) {
  //如何处理数据
  return msg.replace(/单纯/g, arg1+arg2) //将msg中的单纯替换成邪恶
})

Ejemplo completo:

<div id="app">
   <p>{{ msg | msgFormat}}</p>   //无参过滤器的使用
   <p>{{ msg | msgFormat2('疯狂','~~')}}</p>   //有参过滤器的使用
</div>
//msg: 我是单纯的少年
<script>
   // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
   Vue.filter('msgFormat', function(msg) {
       // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
       return msg.replace(/单纯/g, '邪恶') //我是邪恶的少年
   })
   Vue.filter('msgFormat2', function(msg，arg1，arg2) {
       // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
       return msg.replace(/单纯/g, arg1+arg2) //我是疯狂~~的少年
   })
</script>

Definir filtro local 2.2

definición de filtro parcial y utilizar el mismo filtro global.
La única diferencia es que los filtros locales se definen en el ejemplo de vue.

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
    el: '#app',
    data: {
        msg: '我是单纯的少年'
    },
    methods: {},
    //定义私用局部过滤器。只能在当前 vue 对象中使用
    filters: {
        dataFormat(msg) {
            return msg.replace(/单纯/g, '邪恶') //我是邪恶的少年
        }，
        dataFormat2(msg，arg1，arg2) {
            return msg.replace(/单纯/g, arg1+arg2) //我是疯狂~~的少年
        }
    }
});

Nota: Cuando hay dos nombres local y global de los mismos filtros cuando la llamada será el principio de proximidad, a saber: la precedencia local sobre filtro global se denomina filtro

3. teclas de modificación

Al escuchar los eventos de teclado, a menudo necesitamos para comprobar botón detallada. Vue permite que los v-en Agregar modificadores de teclado botón cuando los eventos de escucha

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

Vue proporciona modificadores clave:

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up   （上）
.down（下）
.left（左）
.right（右）

4. modificadores de clave personalizada

Clave personalizada modificadores de alias config.keyCodes objetos globales por:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112   //112为f1的键盘码

//F2 键抬起时调用add方法
<input type="text" class="form-control" v-model="name" @keyup.f1="add">

5. comando personalizado (Directiva)

5.1 y la instrucción locales global personalizado

Vue instrucciones utilizadas comúnmente: v-texto, v-html , v-si, v-show, v-bind (:), v-en (@), V-capa, v-modelo
de uso específicos referidos notas de estudio Vue [ 1]

Además de la funcionalidad básica del defecto comando integrado (modelo V y V-show), Vue también permitió registrar comando personalizado.

Por ejemplo el cuadro de entrada de enfoque, cuando se carga la página, de entrada se centrará cuadro de entrada.
Mientras usted no ha hecho clic en cualquiera de los contenidos después de abrir la página, o en el cuadro de entrada debe estar en foco.

globales registro de instrucción

// 注册一个全局自定义指令 `v-focus`
//参数1：指令 的名称，注意，在定义的时候，指令的名称前面不要加 v- 前缀
//在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
//参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数在特定的阶段，执行特定的函数
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

Registro de instrucciones locales, las directivas de montaje también acepta una opción

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

A continuación, puede utilizar el atributo nuevo v-enfoque en cualquier elemento de la plantilla, de la siguiente manera:

<input v-focus>

función de enlace de instrucciones 5.1 personalizada

Vue.directive('focus', {
       //每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
       bind: function (el) {
           //注意在每个函数中，第一个参数永远时el，表示被绑定了指令的那个函数，这个 el 参数时原生的 js 对象
           //在元素刚绑定了指令的时候，还没有插入到 DOM 中去，这时候调用 focus 方法没有作用
           //因为一个元素，只有插入 DOM 之后，才能获取焦点
           // el.focus()
        },
 
       // inserted 表示元素插入到 DOM 中的时候会执行的函数，只执行一次
       inserted: function (el) {
          el.focus()
       },
 
       //当VNode更新的时候，会执行函数，可能会触发多次
       updated: function (el) {
 
       }
})

aprieto: sólo se llama una vez, la primera vez que se une al elemento de mando de la llamada. Aquí se puede establecer una inicialización de una sola vez.

inserta: llama cuando se inserta el nodo padre en el elemento de unión (para asegurar que sólo la presencia del nodo padre, pero no necesariamente tiene que ser insertado en el documento).

actualizar: actualizaciones cuando VNode donde las llamadas de montaje, pero puede ocurrir antes de que sus hijos actualización VNode. El valor de la instrucción puede ser cambiado, o no. Pero puede pasar por alto la actualización plantilla innecesaria mediante la comparación de los valores antes y después de la actualización (parámetros de la función de gancho detallan a continuación).

componentUpdated: instrucción, donde los componentes y sub-VNode VNode todas las llamadas después de la actualización.

unbind: se llama sólo una vez, cuando la solución instrucción de llamada y el elemento de lazo.

Si la función sólo está pasando bind y actualización, se pueden abreviar, dos métodos tienen la función de la taquigrafía

var vm2 = new Vue ({
      el: '#app2',
      data: {
        // dt: new Date(),
      },
      directives: {
        'focus' : function(el, binding) {
          // el.focus()
        }
      },  
})

función de enlace comando de parámetro 5.2 personalizada

web oficial se explica de la siguiente manera:

Nota: Además de la EL, otros parámetros deben ser, no debe ser modificado de sólo lectura.