debounce Limited to: directives that expect Function values, e.g. v-on Arguments: {Number} [wait] - default: 300 Usage: Wrap the handler to debounce it for x milliseconds, where x is the argument. Default wait time is 300ms. A debounced handler will be delayed until at least x ms has passed after the call moment; if the handler is called again before the delay period, the delay period is reset to x ms. Example: <input @keyup="onKeyup | debounce 500">

Vue.js uses a DOM-based templating implementation. This means that all Vue.js templates are essentially valid, parsable HTML enhanced with some special attributes. Keep that in mind, since this makes Vue templates fundamentally different from string-based templates. Interpolations Text The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces): <span>Message: {{ msg }}</span> The mustache tag will be replaced with the value of the m

data Type: Object | Function Restriction: Only accepts Function when used in a component definition. Details: The data object for the Vue instance. Vue.js will recursively convert its properties into getter/setters to make it “reactive”. The object must be plain: native objects, existing getter/setters and prototype properties are ignored. It is not recommended to observe complex objects. Once the instance is created, the original data object can be accessed as vm.$data. The Vue instance a

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

Basics In addition to the default set of directives shipped in core, Vue.js also allows you to register custom directives. Custom directives provide a mechanism for mapping data changes to arbitrary DOM behavior. You can register a global custom directive with the Vue.directive(id, definition) method, passing in a directive id followed by a definition object. You can also register a local custom directive by including it in a component’s directives option. Hook Functions A definition object c

currency Arguments: {String} [symbol] - default: '$' 1.0.22+ {Number} [decimal places] - default: 2 Example: {{ amount | currency }} 12345 => $12,345.00 Use a different symbol: {{ amount | currency '£' }} 12345 => £12,345.00 Some currencies have 3 or 4 decimal places, while some others have none, for example Japanese Yen (¥) or Vietnamese Dong (₫): {{ amount | currency '₫' 0 }} 12345 => ₫12,345

created Type: Function Details: Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, DOM compilation has not been started, and the $el property will not be available yet. See also: Lifecycle Diagram

v-if In string templates, for example Handlebars, we would write a conditional block like this: <!-- Handlebars template --> {{#if ok}} <h1>Yes</h1> {{/if}} In Vue.js, we use the v-if directive to achieve the same: <h1 v-if="ok">Yes</h1> It is also possible to add an “else” block with v-else: <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> Template v-if Because v-if is a directive, it has to be attached to a single element. But what if we want

In-template expressions are very convenient, but they are really meant for simple operations only. Templates are meant to describe the structure of your view. Putting too much logic into your templates can make them bloated and hard to maintain. This is why Vue.js limits binding expressions to one expression only. For any logic that requires more than one expression, you should use a computed property. Basic Example <div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue(

computed Type: Object Details: Computed properties to be mixed into the Vue instance. All getters and setters have their this context automatically bound to the Vue instance. Example: var vm = new Vue({ data: { a: 1 }, computed: { // get only, just need a function aDouble: function () { return this.a * 2 }, // both get and set aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } }