vue .prop修饰符

在看vue的compile的代码的时候，在匹配绑定值的时候，除了匹配v- @ :,也匹配了.开头的绑定的方式。由于目前没有用到过这样的绑定方式，所以特地翻看了一下vue的github的feature-requirest，果然有人提相应的fature，目前官网应该还没有更新相应的文档。

附feature链接：github.com/vuejs/vue/i…

.prop的修饰符用来指定绑定的值不应该被props解析，而应该作为dom的属性绑定在元素上。

下面的代码，是直接粘贴尤大大的单元测试的代码。我觉得没有比单元测试代码更能说明这个东西的用法了。

 it('.prop modifier', () => {
    const vm = new Vue({
      template: '
',
      data: {
        foo: 'hello',
        bar: 'qux'
      }
    }).$mount()
    expect(vm.$el.children[0].textContent).toBe('hello')
    expect(vm.$el.children[1].innerHTML).toBe('qux')
  })
复制代码

另外对于这个修饰符，vue应该也提供了一个缩写的形式。即.text-content="foo"。

单元测试代码如下：

  it('.prop modifier shorthand', () => {
  const vm = new Vue({
    template: '
',
    data: {
      foo: 'hello',
      bar: 'qux'
    }
  }).$mount()
  expect(vm.$el.children[0].textContent).toBe('hello')
  expect(vm.$el.children[1].innerHTML).toBe('qux')
})
复制代码

源码中也提供了相应的注释，希望阅读到这段代码的小伙伴能够少些疑惑，因为官网上还没有相应的描述：

 // support .foo shorthand syntax for the .prop modifier
   if (propBindRE.test(name)) {
      (modifiers || (modifiers = {})).prop = true
      name = `.` + name.slice(1).replace(modifierRE, '')
    } else if (modifiers) {
      name = name.replace(modifierRE, '')
    }
   ```
复制代码