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: '<div><span v-bind:text-content.prop="foo"></span><span :inner-html.prop="bar"></span></div>',
      data: {
        foo: 'hello',
        bar: '<span>qux</span>'
      }
    }).$mount()
    expect(vm.$el.children[0].textContent).toBe('hello')
    expect(vm.$el.children[1].innerHTML).toBe('<span>qux</span>')
  })
复制代码

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

单元测试代码如下：

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

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

 // 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, '')
    }
   ```
复制代码