v-el

v-el Does not expect expression Argument: id (required) Usage: Register a reference to a DOM element on its owner Vue instance’s $els object for easier access. Note: Because HTML is case-insensitive, camelCase usage like v-el:someEl will be converted to all lowercase. You can use v-el:some-el which properly sets this.$els.someEl. Example: <span v-el:msg>hello</span> <span v-el:other-msg>world</span> this.$els.msg.textContent // -> "hello" this.$els.otherMsg.t

v-cloak

v-cloak Does not expect expression Usage: This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready. Example: [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> The <div> will not be visible until the compilation is done.

v-html

v-html Expects: String Details: Updates the element’s innerHTML. The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use partials. Internally, {{{ Mustache }}} interpolations are also compiled as a v-html directive using anchor nodes. The directive form requires a wrapper element, but offers slightly better performance and avoids FOUC (Flash of Uncompiled Content). Dynamically rendering arbitrary HTML on your website can be ve

transitions

transitions Type: Object Details: A hash of transitions to be made available to the Vue instance. See also: Transitions

v-bind

v-bind Shorthand: : Expects: * (with argument) | Object (without argument) Argument: attrOrProp (optional) Modifiers: .sync - make the binding two-way. Only respected for prop bindings. .once - make the binding one-time. Only respected for prop bindings. .camel - convert the attribute name to camelCase when setting it. Only respected for normal attributes. Used for binding camelCase SVG attributes. Usage: Dynamically bind one or more attributes, or a component prop to an expression.

Transitions

With Vue.js’ transition system you can apply automatic transition effects when elements are inserted into or removed from the DOM. Vue.js will automatically add/remove CSS classes at appropriate times to trigger CSS transitions or animations for you, and you can also provide JavaScript hook functions to perform custom DOM manipulations during the transition. To apply transition effects, you need to use the special transition attribute on the target element: <div v-if="show" transition="my-tr

The Vue Instance

Constructor Every Vue.js app is bootstrapped by creating a root Vue instance with the Vue constructor function: var vm = new Vue({ // options }) A Vue instance is essentially a ViewModel as defined in the MVVM pattern, hence the variable name vm you will see throughout the docs. When you instantiate a Vue instance, you need to pass in an options object which can contain options for data, template, element to mount on, methods, lifecycle callbacks and more. The full list of options can be fou

uppercase

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

unsafeDelimiters

unsafeDelimiters Type: Array<String> Default: ["{{{", "}}}"] Usage: // make it look more dangerous Vue.config.unsafeDelimiters = ['{!!', '!!}'] Change the raw HTML interpolation delimiters.

silent

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