website·Indexed 19 days ago
https://v1.vuejs.org/api/Documentation for Vue.js versions 2.0, 1.0, 0.12, and 0.11. Includes the official guide on data binding syntax, components, reactivity, and installation, as well as API references, community resources, and practical examples such as TodoMVC, HackerNews clone, and Firebase integration.
data option during initialization rather than adding them dynamically. This serves as a schema for the component state, making the code easier to reason about, and avoids performance penalties where adding a top-level reactive property forces all watchers in that scope to re-evaluate.// Recommended approach
var vm = new Vue({
data: {
msg: '' // declare upfront
},
template: '<div id="example">{{msg}}</div>'
})
vm.msg = 'Hello!'inline-template attribute allows a child component to use its inner content as its template instead of treating it as distributed content. While this provides flexibility, it makes template scope harder to reason about and prevents template compilation from being cached. The best practice is to define templates inside the component using the template option.<my-component inline-template>
<p>These are compiled as the component's own template</p>
<p>Not parent's transclusion content.</p>
</my-component>Vue.js v1 is a progressive framework for building modern web interfaces. Key technical characteristics include:
data object during instance initialization and converting them into getters and setters using Object.defineProperty. This allows Vue to perform dependency-tracking and change-notification. For every directive or data binding in a template, a 'watcher' object is created to record touched properties as dependencies. When a dependency's setter is called, the watcher triggers a re-evaluation and updates the DOM.Vue.js provides several official channels for developers to seek help, ask questions, and network with other developers:
v-bind:class with an array to apply a list of classes. You can use ternary expressions for conditional classes, or embed the Object syntax inside the Array for more complex conditional logic (supported in version 1.0.19+).<!-- Basic array syntax -->
<div v-bind:class="[classA, classB]"></div>
<!-- Conditional class using ternary -->
<div v-bind:class="[classA, isB ? classB : '']"></div>
<!-- Mixed Array and Object syntax (v1.0.19+) -->
<div v-bind:class="[classA, { classB: isB, classC: isC }]"></div>data: {
classA: 'class-a',
classB: 'class-b',
isB: true,
isC: false
}var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// a computed getter
b: function () {
// `this` points to the vm instance
return this.a + 1
}
}
})
// Usage:
console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3To output real HTML instead of plain text, use triple curly braces {{{ }}}. This inserts content as plain HTML and ignores data bindings.
Security Warning: Dynamically rendering arbitrary HTML can lead to XSS attacks. Only use this on trusted content and never on user-provided content.
<div>{{{ raw_html }}}</div>Vue.directive(id, definition) or a local directive by adding it to a component's directives option. When using the directive in a template, prefix the ID with v-.// Global registration
Vue.directive('my-directive', {
bind: function () {
// preparation work
},
update: function (newValue, oldValue) {
// handle value changes
},
unbind: function () {
// cleanup work
}
});<!-- Usage in template --> <div v-my-directive="someValue"></div>
Single File Components allow the encapsulation of a component's CSS styles, HTML template, and JavaScript definition in a single file. To build these components, use the following tool combinations:
For a pre-configured build setup, the official vue-cli is recommended.