专栏首页前端一会Vue 2.x 文档阅读笔记三 (可复用性)
原创

Vue 2.x 文档阅读笔记三 (可复用性)

混入 mixin

混入(mixin)可用来分发组件中的复用功能。一个混入对象可以包含任意组件选项。

当组件使用混入对象时,所有混入对象的选项将被"混合"进行该组件本身的选项中。这个"混合"操作会遵循以下几条规则:

  1. data数据对象在内部会进行递归合并,并在发生冲突时以组件数据为优化。
  2. 同名钩子函数将合并为一个数组,因此都将被调用。但是混入对象的钩子将在组件自身钩子之前调用。
  3. 值为对象的选项,例如methodscomponentsdirectives,将被合并为同一个对象。如果两个对象的键名冲突,则取组件对象的键值对。
  4. Vue.extend() 也使用同样的策略进行合并。
  5. 示例代码请点击这里参考。

自定义指令

vue除了有默认内置指令如v-modelv-show等之外,还支持开发者注册自定义指令。

①.自定义指令注册

可以注册全局自定义指令和局部自定义指令。以下示例以自动聚焦输入框为例。

注册全局自定义指令:

// 注册一个全局自定义指令 v-focus
Vue.directives( "focus", {
    inserted: function( el ){
        // 聚焦元素
        el.focus();
    }
} )

注册局部自定义指令:

export default {
    data(){ return {} }
    // 在directives选项中
    directives: {
        focus: {
            // 指令的定义
            inserted: function( el ){
                el.focus();
            }
        }
    }
}

②.自定义指令注册时的钩子函数

一个自定义指令对象在注册时可以使用以下几个可选的钩子函数:

  1. bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  2. inserted: 当被绑定的元素插入到 DOM 中时调用
  3. update:所在组件的虚拟节点(VNode)更新时调用,但是可能发生在其子虚拟节点更新之前
  4. componentUpdated:指令所在组件的虚拟节点及其子虚拟节点全部更新后调用。
  5. unbind:只调用一次,指令与元素解绑时调用。

③.钩子函数参数

自定义指令钩子函数会被传入这些参数:

  • el,指令所绑定的元素,可以用来直接操作 DOM
  • binding,包含一些属性的对象,属性有指令名、指令绑定值等,具体可以自己打印看下或者点击这里查看官方文档
  • vnode,Vue编译生成的虚拟节点
  • oldVnode,指上一个虚拟节点,仅在updatecomponentUpdated钩子中可用。

注意除了参数el外,其他参数应都只是只读,不要修改。如需在钩子之间共享数据,应通过元素的dataset来进行。

如果指令需要多个值,可以传入一个js对象字面量,如

<div v-demo="{color: 'red', text: 'hello'}"></div>

渲染函数 & JSX

点击这里查看官方文档。

使用插件与开发插件

点击这里查看官方文档。

过滤器

vue中可以自定义过滤器,常被用于一些常见的文本格式化。

①.定义过滤器

  1. 在一个组件的选项中定义本地过滤器
<template>
    <div class="wrap">
        <div>
            <p><input type="text" v-model="text"></p>
            首字母大写过滤后的值:<span>{{text | capitalize}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            text: ''
        }
    },
    filters: {
        capitalize( value ){
            if( !value ) return ''
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        }
    }
}
</script>Vue.filter( "capitalize", function( value ){
    if( !value ) return ''
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
} )

new Vue({
    // ...
})
  1. 在创建Vue实例之前全局定义过滤器

②.过滤器的应用

过滤器可以被应用在两种地方:双花括号插值、v-bind表达式。其中过滤器应被添加在js表达式尾部,由"管道"符号表示:

// 在双花括号插值中,capitalize是过滤器
{{ msg | capitalize }}

// 在v-bind中,formatId是过滤器
<div v-bind:id="rawId | formatId"></div>

过滤器函数总是接收表达式的值作为第一个参数。

过滤器函数还可以串联应用:{{ msg | filterA | filterB }},这里值msg作为参数被传递给过滤器函数filterA,然后再将filterA的结果传递到过滤器函数filterB中。

过滤器函数还可以接收别的参数:{{ msg | filterA('arg1', arg2) }}filterA 被定义为接收三个参数的过滤器函数。其中 msg 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 2.x 文档阅读笔记三 (可复用性)

    当组件使用混入对象时,所有混入对象的选项将被"混合"进行该组件本身的选项中。这个"混合"操作会遵循以下几条规则:

    前端_AWhile
  • 《你不知道的JavaScript》:弄清生成器与迭代器的区别

    这篇将整理下生成器与迭代器的区别。这两个东西初学的时候我是混淆的,尤其《你不知道的Javascript》书中没有进行基础的介绍,我看了之后还特地翻了下其他资料才...

    前端_AWhile
  • javascript设计模式一: 单例模式

    作为一个半路出家的前端,随着项目经验的积累,也越来越意识到原生js的博大精深,最近正在研究js设计模式,接下来每学一个设计模式就是写篇文章做笔记,其实主要还是代...

    前端_AWhile
  • Vue 2.x 文档阅读笔记三 (可复用性)

    当组件使用混入对象时,所有混入对象的选项将被"混合"进行该组件本身的选项中。这个"混合"操作会遵循以下几条规则:

    前端_AWhile
  • 网页超过一屏时自动浮动在网页最上方的图层特效

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>adsorpti...

    欢醉
  • Web前端-Vue.js必备框架(四)

    v-if和v-show,v-if为销毁和重建,只有为真才渲染,v-show会渲染,频繁切换使用v-show。

    达达前端
  • iview 下拉刷新loadTop报错解决

    蓓蕾心晴
  • POI NoClassDefFoundError: org.openxmlformats.schemas.

    java.lang.NoClassDefFoundError: Cloud not initialize class org.openxmlformats.sc...

    兜兜毛毛
  • JDK 10 源码之String类

    城市中的游牧民族
  • Openjdk 安装 on centos7

    备注: 安装openjdk,在使用Jhipster-Registry的加解密功能时,会简化一点工作,我在相关文章中会整理说明。

    羽客

扫码关注云+社区

领取腾讯云代金券