vm.$before( elementOrSelector, [callback] ) Arguments: {Element | String} elementOrSelector {Function} [callback] Returns: vm - the instance itself Usage: Insert the Vue instance’s DOM element or fragment before target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).

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

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

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 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

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

A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue.js provides special enhancements when v-bind is used for class and style. In addition to Strings, the expressions can also evaluate to Objects or Arrays. Binding HTML Classes Althou

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.

Vue.filter( id, [definition] ) Arguments: {String} id {Function | Object} [definition] Usage: Register or retrieve a global filter. // register Vue.filter('my-filter', function (value) { // return processed value }) // two way filter Vue.filter('my-filter', { read: function () {}, write: function () {} }) // getter, return the filter if registered var myFilter = Vue.filter('my-filter') See also: Custom Filter