Skip to content

Instantly share code, notes, and snippets.

@nickmessing
Last active July 18, 2017 09:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nickmessing/27b10c32925645416c5b4c3bc26df797 to your computer and use it in GitHub Desktop.
Save nickmessing/27b10c32925645416c5b4c3bc26df797 to your computer and use it in GitHub Desktop.

Added support for event modifiers.

Added babel-plugin-jsx-event-modifier for event modifiers.

Example:

Vue.component('hello-world', {
  methods: {
    method () {
      console.log('clicked')
    }
  },
  render () {
    return (
      <div>
        <a href="/" onClick:prevent={this.method} />
      </div>
    )
  }
})

More information available on plugin's github page.

Added support for functional components.

Added babel-plugin-jsx-vue-functional for functional components.

Example:

const A = ({ props }) => <h1>{props.msg}</h1>
const B = ({ listeners }) => (
  <div onClick={listeners.click}>
    <A msg="Hello World!">
  </div>
)

More information available on plugin's github page.

Added support for v-model.

Added babel-plugin-jsx-v-model for two-way data binding with form elements.

Example:

Vue.component('hello-world', {
  data: () => ({
    text: 'Hello World!'
  }),
  render () {
    return (
      <div>
        <input type="text" v-model={this.text} />
        {this.text}
      </div>
    )
  }
})

More information available on plugin's github page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment