Vue.js refs
In Vue.js, refs are references to DOM elements or other components. This occurs programmatically.
A large use case for refs is direct DOM manipulation and integration with DOM-based libraries (that usually take a DOM node they should mount to).
Refs are defined using ref="name" on a native element or child component in the template. In the following instance, the input will be stored in a theInput ref:
<template> Â Â <div id="app"> Â Â Â Â <input ref="theInput" /> Â Â </div> </template>
Refs can be accessed from the Vue.js component instance through this.$refs[name]. So, in the previous example, where we had a ref defined as ref="theInput", we can access it through this.$refs.theInput.
To focus the input when a button is clicked, we could write the following:
<template> Â Â <div id="app"> Â Â Â Â <input...