mirror of https://github.com/vuejs/vue.git
feat: move v-bind.prop shorthand behind flag
This commit is contained in:
parent
44a17ba2cd
commit
64f863bbb9
|
@ -1,3 +1,4 @@
|
|||
module.exports = {
|
||||
NEW_SLOT_SYNTAX: true
|
||||
NEW_SLOT_SYNTAX: true,
|
||||
VBIND_PROP_SHORTHAND: false
|
||||
}
|
||||
|
|
|
@ -22,7 +22,9 @@ import {
|
|||
} from '../helpers'
|
||||
|
||||
export const onRE = /^@|^v-on:/
|
||||
export const dirRE = /^v-|^@|^:|^\./
|
||||
export const dirRE = process.env.VBIND_PROP_SHORTHAND
|
||||
? /^v-|^@|^:|^\./
|
||||
: /^v-|^@|^:/
|
||||
export const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
|
||||
export const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
|
||||
const stripParensRE = /^\(|\)$/g
|
||||
|
@ -753,7 +755,7 @@ function processAttrs (el) {
|
|||
// modifiers
|
||||
modifiers = parseModifiers(name.replace(dirRE, ''))
|
||||
// support .foo shorthand syntax for the .prop modifier
|
||||
if (propBindRE.test(name)) {
|
||||
if (process.env.VBIND_PROP_SHORTHAND && propBindRE.test(name)) {
|
||||
(modifiers || (modifiers = {})).prop = true
|
||||
name = `.` + name.slice(1).replace(modifierRE, '')
|
||||
} else if (modifiers) {
|
||||
|
|
|
@ -133,17 +133,19 @@ describe('Directive v-bind', () => {
|
|||
expect(vm.$el.getAttribute('id')).toBe(null)
|
||||
})
|
||||
|
||||
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>')
|
||||
})
|
||||
if (process.env.VBIND_PROP_SHORTHAND) {
|
||||
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>')
|
||||
})
|
||||
}
|
||||
|
||||
it('.camel modifier', () => {
|
||||
const vm = new Vue({
|
||||
|
@ -529,20 +531,22 @@ describe('Directive v-bind', () => {
|
|||
}).then(done)
|
||||
})
|
||||
|
||||
it('.prop shorthand', done => {
|
||||
const vm = new Vue({
|
||||
template: `<div .[key]="value"></div>`,
|
||||
data: {
|
||||
key: 'id',
|
||||
value: 'hello'
|
||||
}
|
||||
}).$mount()
|
||||
expect(vm.$el.id).toBe('hello')
|
||||
vm.key = 'textContent'
|
||||
waitForUpdate(() => {
|
||||
expect(vm.$el.textContent).toBe('hello')
|
||||
}).then(done)
|
||||
})
|
||||
if (process.env.VBIND_PROP_SHORTHAND) {
|
||||
it('.prop shorthand', done => {
|
||||
const vm = new Vue({
|
||||
template: `<div .[key]="value"></div>`,
|
||||
data: {
|
||||
key: 'id',
|
||||
value: 'hello'
|
||||
}
|
||||
}).$mount()
|
||||
expect(vm.$el.id).toBe('hello')
|
||||
vm.key = 'textContent'
|
||||
waitForUpdate(() => {
|
||||
expect(vm.$el.textContent).toBe('hello')
|
||||
}).then(done)
|
||||
})
|
||||
}
|
||||
|
||||
it('handle class and style', () => {
|
||||
const vm = new Vue({
|
||||
|
|
|
@ -535,20 +535,22 @@ describe('parser', () => {
|
|||
expect('The value for a v-bind expression cannot be empty. Found in "v-bind:empty-msg"').toHaveBeenWarned()
|
||||
})
|
||||
|
||||
it('v-bind.prop shorthand syntax', () => {
|
||||
const ast = parse('<div .id="foo"></div>', baseOptions)
|
||||
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
|
||||
})
|
||||
if (process.env.VBIND_PROP_SHORTHAND) {
|
||||
it('v-bind.prop shorthand syntax', () => {
|
||||
const ast = parse('<div .id="foo"></div>', baseOptions)
|
||||
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
|
||||
})
|
||||
|
||||
it('v-bind.prop shorthand syntax w/ modifiers', () => {
|
||||
const ast = parse('<div .id.mod="foo"></div>', baseOptions)
|
||||
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
|
||||
})
|
||||
it('v-bind.prop shorthand syntax w/ modifiers', () => {
|
||||
const ast = parse('<div .id.mod="foo"></div>', baseOptions)
|
||||
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
|
||||
})
|
||||
|
||||
it('v-bind dynamic argument', () => {
|
||||
const ast = parse('<div .[id]="foo"></div>', baseOptions)
|
||||
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: true }])
|
||||
})
|
||||
it('v-bind.prop shorthand dynamic argument', () => {
|
||||
const ast = parse('<div .[id]="foo"></div>', baseOptions)
|
||||
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: true }])
|
||||
})
|
||||
}
|
||||
|
||||
// This only works for string templates.
|
||||
// In-DOM templates will be malformed before Vue can parse it.
|
||||
|
|
Loading…
Reference in New Issue