Vue.js

sync modifier

Custom Events — Vue.js

before

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

this.$emit('update:title', newTitle)

after (Vue 2.3.0+)

<text-document v-bind:title.sync="doc.title"></text-document>

computed property

Computed Properties and Watchers — Vue.js

<div id="example">
  <p>Original message: ""</p>
  <p>Computed reversed message: ""</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Accessing Child Component Instances & Child Elements with refs

Handling Edge Cases — Vue.js

<!-- parent -->
<base-input ref="usernameInput"></base-input>

<!-- child -->
<input ref="input">

methods: {
  // Used to focus the input from the parent
  focus: function () {
    this.$refs.input.focus()
  }
}

// parent
this.$refs.usernameInput.focus()