What are Components? Components are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js’ compiler would attach specified behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute. Using Components Registration We’ve learned in the previous sections that we can create a component constructor using Vue.extend(): var M

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' } })

v-on Shorthand: @ Expects: Function | Inline Statement Argument: event (required) Modifiers: .stop - call event.stopPropagation(). .prevent - call event.preventDefault(). .capture - add event listener in capture mode. .self - only trigger handler if event was dispatched from this element. .{keyCode | keyAlias} - only trigger handler on certain keys. Usage: Attaches an event listener to the element. The event type is denoted by the argument. The expression can either be a method na

Basics Similar to custom directives, you can register a custom filter with the global Vue.filter() method, passing in a filterID and a filter function. The filter function takes a value as the argument and returns the transformed value: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse"></span> The filter function also receives any inline arguments: Vue.filter('wrap', function (va

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

Method Handler We can use the v-on directive to listen to DOM events: <div id="example"> <button v-on:click="greet">Greet</button> </div> We are binding a click event listener to a method named greet. Here’s how to define that method in our Vue instance: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // define methods under the `methods` object methods: { greet: function (event) { // `this` inside methods point to the Vue instance

vm.$on( event, callback ) Arguments: {String} event {Function} callback Usage: Listen for a custom event on the current vm. Events can be triggered by vm.$emit, vm.$dispatch or vm.$broadcast. The callback will receive all the additional arguments passed into these event-triggering methods. Example: vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') // -> "hi"

vm.$destroy( [remove] ) Arguments: {Boolean} [remove] - default: false Usage: Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners and, if the remove argument is true, remove its associated DOM element or fragment from the DOM. Triggers the beforeDestroy and destroyed hooks. See also: Lifecycle Diagram

attached Type: Function Details: Called when vm.$el is attached to DOM by a directive or a VM instance method such as $appendTo(). Direct manipulation of vm.$el will not trigger this hook.

vm.$root Type: Vue instance Read only Details: The root Vue instance of the current component tree. If the current instance has no parents this value will be itself.