はてなブックマーク

Reactivity in Depth ​One of Vue’s most distinctive features is the unobtrusive reactivity system. Component state consists of reactive JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of

Vue 2 has reached EOL and is no longer actively maintained. Upgrade to Vue 3 or learn more about | Vue 2 EOL. The Cookbook vs the GuideHow is the cookbook different from the guide? Why is this necessary? Greater Focus: In the guide, we’re essentially telling a story. Each section builds on and assumes knowledge from each previous section. In the cookbook, each recipe can and should stand on its ow

This is the official style guide for Vue-specific code. If you use Vue in a project, it’s a great reference to avoid errors, bikeshedding, and anti-patterns. However, we don’t believe that any style guide is ideal for all teams or projects, so mindful deviations are encouraged based on past experience, the surrounding tech stack, and personal values. For the most part, we also avoid suggestions ab

Server-Side Rendering (SSR) ​Overview ​What is SSR? ​Vue.js is a framework for building client-side applications. By default, Vue components produce and manipulate DOM in the browser as output. However, it is also possible to render the same components into HTML strings on the server, send them directly to the browser, and finally "hydrate" the static markup into a fully interactive app on the cli

Creating a Vue Application ​The application instance ​Every Vue application starts by creating a new application instance with the createApp function: jsimport { createApp } from 'vue' const app = createApp({ /* root component options */ }) The Root Component ​The object we are passing into createApp is in fact a component. Every app requires a "root component" that can contain other components as

Guide Essentials Installation Introduction The Vue Instance Template Syntax Computed Properties and Watchers Class and Style Bindings Conditional Rendering List Rendering Event Handling Form Input Bindings Components Basics Components In-Depth Component Registration Props Custom Events Slots Dynamic & Async Components Handling Edge Cases Transitions & Animation Enter/Leave & List Transitions State

Components Basics ​Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation. It's common for an app to be organized into a tree of nested components: This is very similar to how we nest native HTML elements, but Vue implements its own component model that allows us to encapsulate custom content and logic in each component. Vue also plays nic

You’re browsing the documentation for v2.x and earlier. Click here for v3.x documentation. Dec 28, 2015 Recently there has been a lot of discussion around the tooling hurdle when you start a React project. Luckily for Vue.js, all you need to do to start with a quick prototype is including it from a CDN via a <script> tag, so we’ve got that part covered. However, that’s not how you’d build a real w

You’re browsing the documentation for v2.x and earlier. Click here for v3.x documentation. Oct 26, 2015 Hi HN! If you are not familiar with Vue.js, you might want to read this blog post for a higher level overview. After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of Vue.js 1.0.0 Evangelion! Many thanks to all those who participated in th

You’re browsing the documentation for v2.x and earlier. Click here for v3.x documentation. Jun 11, 2015 I’m really excited to announce that Vue.js 0.12: Dragon Ball is finally here! Thanks to everyone who tried out the beta/rc versions and provided feedback / bug reports along the way. There’s a lot to cover in this release, and we will talk about a few highlights below. However, it is still recom

v-for ​We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on:

Nov 9, 2014 After the long wait, Vue.js 0.11 Cowboy Bebop is finally here! Thanks to everyone who tried out the release candidate versions and provided feedback / bug reports along the way. The 0.11 release introduced many new features and also a fair number of breaking changes, so please carefully read through the 0.11 Change List before upgrading. Aside from the API changes, 0.11 also ships with

Jul 29, 2014 0.10.6Vue.js 0.10.6 has been released! This is another small bug-fix release and will be the last maintenance version before the next major release. fix v-style error when value is falsy or a number. ( thanks to @dmfilipenko ) fix the built-in currency filter error when value is a string ( thanks to @dmfilipenko ) fix Vue.require for building with Component v1.0+ ( thanks to @kewah )

Data Binding Directives These directives can bind themselves to a property on the ViewModel, or to an expression which is evaluated in the context of the ViewModel. When the value of the underlying property or expression changes, the update() function of these directives will be called asynchronously on next tick. v-text Updates the element’s textContent. Internally, {{ Mustache }} interpolations

Transition ​Vue offers two built-in components that can help work with transitions and animations in response to changing state: <Transition> for applying animations when an element or component is entering and leaving the DOM. This is covered on this page. <TransitionGroup> for applying animations when an element or component is inserted into, removed from, or moved within a v-for list. This is c

Listening to Events ​We can use the v-on directive, which we typically shorten to the @ symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be v-on:click="handler" or with the shortcut, @click="handler". The handler value can be one of the following: Inline handlers: Inline JavaScript to be executed when the event is triggered (similar to the native oncl

Vue.js - The Progressive JavaScript Framework

TodoMVC Benchmark Last Updated: 2014-10-12 Looking for the TodoMVC Benchmark? It’s been removed because after discussion with some other framework authors we have agreed that: The original intention of these benchmarks were for comparing Browser performance rather than that of frameworks. The “synchronously trigger an action xxx times” test routine doesn’t reflect meaningful real world user action

Vue.js - The Progressive JavaScript Framework

You are reading the documentation for Vue 3! Vue 2 support has ended on Dec 31, 2023. Learn more about Vue 2 EOL.Upgrading from Vue 2? Check out the Migration Guide. What is Vue? ​Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps y

The Progressive JavaScript Framework An approachable, performant and versatile framework for building web user interfaces. Why Vue Get Started Install Get Security Updates for Vue 2 Special Sponsor slot is now vacant - Inquire now Approachable Builds on top of standard HTML, CSS and JavaScript with intuitive API and world-class documentation. Performant Truly reactive, compiler-optimized rendering