阅读 387

VueJS 的模板引擎

概述

VueJS作为一个前端框架,少不了模板引擎的功能,为了优化模板引擎,Vue会在编译阶段把template转化为render函数,在编译阶段之前(预编译阶段)我们可以定制一些模板引擎的行为,比如文本插入分隔符指令过滤器

模板引擎

通过Vue的官方文档,我们知道Vue提供的模板引擎的语法有:

  1. 插值 1.1. HTML标签的文本内容 1.2. HTML标签的纯HTML内容 1.3. HTML标签的属性内容
  2. 指令 2.1. 内置的指令有: 2.2. 指令可以带上修饰符
  3. 过滤器

Vue给了我们很大的灵活性,比如我们可以定义文本插入分隔符指令过滤器

1. 文本插入分隔符

定义文本插入分隔符很简单,只需要在实例化Vue的时候,在options.delimiters设置自定义的分隔符就行了:

new Vue({
  delimiters: ['${', '}']
})
复制代码

2. 指令

自定义指令的方式如下:

directives: {
  focus: {
    // 指令的定义---
  }
}
复制代码

Vue为指令定义函数提供了几个钩子函数:

  1. bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  2. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  3. update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
  4. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  5. unbind: 只调用一次, 指令与元素解绑时调用。

钩子函数的参数:

  1. el: 指令所绑定的元素,可以用来直接操作 DOM 。
  2. binding: 一个对象,包含以下属性: 2.1. name: 指令名,不包括 v- 前缀。 2.2. value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2。 2.3. oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 2.4. expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。 2.5. arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。 2.6. modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  3. vnode: Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
  4. oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

3. 过滤器

过滤器可以用在两个地方:mustache 插值v-bind 表达式

自定义过滤器的一个案例:

new Vue({
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
复制代码

可以看出,过滤器函数的第一个参数是“管道符"前面的数值,并返回经过处理的数值,可以作为下一个过滤器的入参。

模板引擎执行时机

通过render函数生成的vnode,会带有跟模板引擎执行相关的配置,比如directives等。

所以在挂载阶段执行patch函数的时候,会把vnode转换为真实DOM,这时模板引擎将会读取相关配置并执行。

参考

自定义指令 过滤器

关注下面的标签,发现更多相似文章
评论