partial Attributes: name Usage: <partial> elements serve as outlets for registered template partials. Partial contents are also compiled by Vue when inserted. The <partial> element itself will be replaced. It requires a name attribute which will be used to resolve the partial’s content. Example: // registering a partial Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>') <!-- a static partial --> <partial name="my-partial"></partial> &l

parent Type: Vue instance Details: Specify the parent instance for the instance to be created. Establishes a parent-child relationship between the two. The parent will be accessible as this.$parent for the child, and the child will be pushed into the parent’s $children array. See also: Parent-Child Communication

Vue.js (pronounced /vjuː/, like view) is a library for building interactive web interfaces. The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible. Vue.js itself is not a full-blown framework - it is focused on the view layer only. It is therefore very easy to pick up and to integrate with other libraries or existing projects. On the other hand, when used in combination with proper tooling and supporting li

orderBy Limited to: directives that expect Array values, e.g. v-for Arguments: {String | Array<String> | Function} ...sortKeys {String} [order] - default: 1 Usage: Return a sorted version of the source Array. You can pass any number of Strings to sort on keys. You can also pass an array containing the sorting keys or a Function if you want to use your own sorting strategy instead. The optional order argument specifies whether the result should be in ascending (order >= 0) or desce

name Type: String Restriction: only respected when used in Vue.extend(). Details: Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with Vue.component(), the global ID is automatically set as its name. Another benefit of specifying a name option is console inspection. When inspecting an extended Vue component in the console, the default constructor name is VueComponent, which isn’t very informative. By passing in an optional

Basics Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options. Example: // define a mixin object var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var Component = Vue.

mixins Type: Array Details: The mixins option accepts an array of mixin objects. These mixin objects can contain instance options just like normal instance objects, and they will be merged against the eventual options using the same option merging logic in Vue.extend(). e.g. If your mixin contains a created hook and the component itself also has one, both functions will be called. Mixin hooks are called in the order they are provided, and called before the component’s own hooks. Example: v

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

methods Type: Object Details: Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their this context automatically bound to the Vue instance. Example: var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2 See also: Methods and Event Handling

lowercase Example: {{ msg | lowercase }} ‘ABC’ => ‘abc’