Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue Component Instance


Objects

Vue has a set of objects in the component instance.

Object Description
$attrs Represents the fallthrough attributes and event listeners set on the component tag.
$data Represents the properties stored in the data part of the Vue instance.
$el Represents the root DOM node of the Vue component.
$parent Represents the Vue instance of the parent component.
$props Represents the props declared in the receiving component.
$refs Represents the DOM elements marked with the built-in 'ref' attribute.
$root Represents the Vue instance of the root component of the total Vue application.
$slots Represents the slots provided by the parent component.

Methods

Vue has a set of methods in the component instance that can be reached with the with the 'this' keyword.

Method Description
$emit() triggers a custom event that is used to communicate up to the parent component
$forceUpdate() forces a re-render of the Vue application
$nextTick() waits for the DOM update cycle of the current Vue component to finish before executing
$watch() is used to create watchers, and returns a stop function we can use to stop the watcher