slot

slot Attributes: name Usage: <slot> elements serve as content distribution outlets in component templates. The slot element itself will be replaced. A slot with the name attribute is called a named slot. A named slot will distribute content with a slot attribute that matches its name. For detailed usage, see the guide section linked below. See also: Content Distribution with Slots

silent

silent Type: Boolean Default: false Usage: Vue.config.silent = true Suppress all Vue.js logs and warnings.

replace

replace Type: Boolean Default: true Restriction: only respected if the template option is also present. Details: Determines whether to replace the element being mounted on with the template. If set to false, the template will overwrite the element’s inner content without replacing the element itself. If set to true, the template will overwrite the element and merge the element’s attributes with the attributes of the component’s root node. Example: <div id="replace" class="foo">&l

ready

ready Type: Function Details: Called after compilation and the $el is inserted into the document for the first time, i.e. right after the first attached hook. Note this insertion must be executed via Vue (with methods like vm.$appendTo() or as a result of a directive update) to trigger the ready hook. See also: Lifecycle Diagram

Reactivity in Depth

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

propsData

propsData 1.0.22+ Type: Object Restriction: only respected in instance creation via new. Details: Pass props to an instance during its creation. This is primarily intended to make unit testing easier. Example: var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } })

props

props Type: Array | Object Details: A list/hash of attributes that are exposed to accept data from the parent component. It has a simple Array-based syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values. Example: // simple syntax Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) // object syntax with validation Vue.component('props-demo-advanced', { props: { // just type chec

pluralize

pluralize Arguments: {String} single, [double, triple, ...] Usage: Pluralizes the argument based on the filtered value. When there is exactly one argument, plural forms simply add an “s” at the end. When there are more than one argument, the arguments will be used as array of strings corresponding to the single, double, triple … forms of the word to be pluralized. When the number to be pluralized exceeds the length of the arguments, it will use the last entry in the array. Example: {{count

Plugins

Writing a Plugin Plugins usually add global-level functionality to Vue. There is no strictly defined scope for a plugin - there are typically several types of plugins you can write: Add some global methods or properties. e.g. vue-element Add one or more global assets: directives/filters/transitions etc. e.g. vue-touch Add some Vue instance methods by attaching them to Vue.prototype. A library that provides an API of its own, while at the same time injecting some combination of the above

partials

partials Type: Object Details: A hash of partial strings to be made available to the Vue instance. See also: Special Elements - partial