Vue的几个机制说明

前言

这里收集几个Vue使用中过程中遇到的问题

watch

watch默认情况下第一绑定不触发,将的immediate属性设置为true可使其触发。

但设置过程中对this不太优化,没有成功,通过mouted+watch连用的方法解决的。

vue的filter

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。都是vue示例的property向模板渲染时候使用

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

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

这种过滤器更像是一个map,或者管道

通过以下

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

来将filter注册进vue

这不应该叫过滤器,应该叫管道。

自定义指令directive

官网

这个是自定义指令,原文:除了核心功能默认内置的指令 (v-modelv-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

几个钩子函数:

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind:只调用一次,指令与元素解绑时调用。

几个参数:el、binding、vnode、oldVnode

关于驼峰与短横线命名

在 JS 中,驼峰式声明是标准,在HTML中,是短横线命名。

html使用组件attrbute用短横线,js组件中的proptity用驼峰

事件:

在发出定制事件时,最好使用短横线命名,这是因为在父组件中,我们使用相同的语法来侦听该事件。

this.$emit('close-window')
// 在父组件中
<popup-window @close-window='handleEvent()' />

props:

<PopupWindow title-text='hello world' /> 
props: { titleText: String }

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×