vm.$refs Type: Object Read only Details: An object that holds child components that have v-ref registered. See also: Child Component Refs v-ref.

vm.$data Type: Object Details: The data object that the Vue instance is observing. You can swap it with a new object. The Vue instance proxies access to the properties on its data object.

components Type: Object Details: A hash of components to be made available to the Vue instance. See also: Components

v-if Expects: * Usage: Conditionally render the element based on the truthy-ness of the expression value. The element and its contained data bindings / components are destroyed and re-constructed during toggles. If the element is a <template> element, its content will be extracted as the conditional block. See also: Conditional Rendering

Vue.partial( id, [partial] ) Arguments: {String} id {String} [partial] Usage: Register or retrieve a global template partial string. // register Vue.partial('my-partial', '<div>Hi</div>') // retrieve registered partial var myPartial = Vue.partial('my-partial') See also: Special Elements - <partial>.

Vue.extend( options ) Arguments: {Object} options Usage: Create a “subclass” of the base Vue constructor. The argument should be an object containing component options. The special cases to note here are el and data options - they must be functions when used with Vue.extend(). <div id="mount-point"></div> // create reusable constructor var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>' }) // create an instance of Profile var profi

We’ve covered most of the basics - now it’s time to take a deep dive! One of Vue.js’ most distinct features is the unobtrusive reactive system - models are just plain JavaScript objects, modify it and the view updates. It makes state management very simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue.js’ reactivity system. How Changes Are Tracked When you pass a p

Basics Usage You can use the v-model directive to create two-way data bindings on form input elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit me"> Checkbox Single checkbox, boolean v

delimiters Type: Array<String> Default: ["{{", "}}"] Usage: // ES6 template string style Vue.config.delimiters = ['${', '}'] Change the plain text interpolation delimiters.

devtools Type: Boolean Default: true (false in production builds) Usage: // make sure to set this synchronously immediately after loading Vue Vue.config.devtools = true Configure whether to allow vue-devtools inspection. This option’s default value is true in development builds and false in production builds. You can set it to true to enable inspection for production builds.