intro

Evan You 2013-12-28 16:38:57 -05:00
parent 7cc91e113d
commit e44c4d5838
9 changed files with 120 additions and 17 deletions

@ -1 +1,36 @@
To be completed...
## Concept Overview
Concept | As in VueJS
:--- | :---
ViewModel | An object that syncs the Model and the View.
Model | A slightly modified plain JavaScript object.
View | The actual HTML that the user sees.
Directive | A prefixed HTML attribute that tells VueJS to do something about an element.
Filter | A function to process the value with before updating the View.
Expression | Simple JavaScript expressions that can be used inside directives.
Computed Property | A model property that gets auto-updated when its dependencies change.
## A Quick Example
**HTML**
``` html
<div id="demo" v-on="click:changeText">
<p v-text="hello"></p>
</div>
```
**JavaScript**
``` js
var demo = new Vue({
el: '#demo',
data: {
hello: 'Hello World!',
},
methods: {
changeText: function () {
this.hello = 'Hello VueJS!'
} }
})
```

35
Home.md

@ -1,21 +1,20 @@
## Topics
- [What is VueJS?](wiki/What-is-VueJS)
- [Installation](wiki/Installation)
- [Getting Started](wiki/Getting-Started)
- [Inline Expressions](wiki/Inline-Expressions)
- [Computed Properties](wiki/Computed-Properties)
- [Custom Directives](wiki/Custom-Directives)
- [Custom Filters](wiki/Custom-Filters)
- [Components and Elements](wiki/Components-and-Elements)
- [Writing a Custom Directive](wiki/Writing-a-Custom-irective)
- [Writing a Custom Filter](wiki/Writing-a-Custom-Filter)
- [Child Components](wiki/Child-Components)
- [Transitions](wiki/Transitions)
- [Form Validation](wiki/Form-Validation)
- [Routing](wiki/Routing)
## Examples
- **[TodoMVC Implementation](https://github.com/yyx990803/vue/tree/master/examples/todomvc)** : a fully specification-compliant TodoMVC implementation in ~110 SLOC.
- **[Firebase Example](https://github.com/yyx990803/vue/tree/master/examples/firebase)** : a no-backend, multi-user realtime list with form validation.
- **[Component Example](https://github.com/vuejs/vue-component-example)** : an example of a highly-modular app architecture using Component as the build system.
- **[TodoMVC Implementation][todomvc]** : a fully specification-compliant TodoMVC implementation in ~110 SLOC.
- **[Firebase Example][firebase]** : a no-backend, multi-user realtime list with form validation.
- **[Component Example][component-example]** : an example of a highly-modular app architecture using Component as the build system.
## API Reference
@ -61,13 +60,13 @@
### [Instance Properties](wiki/Instance-Properties)
- vm.$
- vm.$el
- vm.$data
- vm.$compiler
- vm.$index
- vm.$parent
- vm.$root
- [vm.$](wiki/Instance-Properties#vm)
- [vm.$el](wiki/Instance-Properties#vmel)
- [vm.$data](wiki/Instance-Properties#vmdata)
- [vm.$compiler](wiki/Instance-Properties#vmcompiler)
- [vm.$index](wiki/Instance-Properties#vmindex)
- [vm.$parent](wiki/Instance-Properties#vmparent)
- [vm.$root](wiki/Instance-Properties#vmroot)
### [Instance Methods](wiki/Instance-Methods)
@ -109,4 +108,8 @@
- [lowercase](wiki/Filters#lowercase)
- [currency](wiki/Filters#currency)
- [pluralize](wiki/Filters#pluralize)
- [key](wiki/Filters#key)
- [key](wiki/Filters#key)
[todomvc]: https://github.com/yyx990803/vue/tree/master/examples/todomvc
[firebase]: https://github.com/yyx990803/vue/tree/master/examples/firebase
[component-example]: https://github.com/vuejs/vue-component-example

35
Installation.md Normal file

@ -0,0 +1,35 @@
## Component
``` bash
$ component install yyx990803/vue
```
```js
var Vue = require('vue')
```
## Browserify
``` bash
$ npm install vue
```
```js
var Vue = require('vue')
```
## Bower
``` bash
$ bower install vue
```
``` html
<script src="bower_components/vue/dist/vue.js">
```
`Vue` will be registered as a global variable.
## Module Loaders
e.g. RequireJS, SeaJS: Built versions in `/dist` or installed via Bower is wrapped with UMD so it can be used directly as a CommonJS or AMD module.
## Standalone
Simply include a built version in `/dist` with a `<script>` tag.

@ -0,0 +1,30 @@
VueJS is a library for building interactive interfaces. It provides the **ViewModel** layer of the MVVM pattern, which connects the **View** (the actual HTML that the user sees) and the **Model** (JSON-compliant plain JavaScript objects) via two way data-bindings.
VueJS is:
- **Lightweight**
The standalone version of VueJS weighs around 10.5kb when minified and gzipped. It has no external dependencies at all. It is not designed to be an all-encompassing framework. You can mix and match it with anything you like, although it's also fairly trivial to implement ad-hoc validation and routing logic with only VueJS.
- **Simple**
VueJS focues on the interface only and has a minimal, declarative API. Creating a ViewModel is as simple as instantiating a new object with some passed-in options. It uses plain JS objects as the Model so no `get()` or `set()` verbosity. It provides automatic dependency tracking for computed properties and expressions. All of these features make it highly expressive: the included TodoMVC example is implemented with ~110 lines of code.
- **Fast**
VueJS uses DOM-based templating and caches string templates as DOM fragments. Data bindings are bound to specific nodes for precise and efficient DOM manipulation with granularity down to a TextNode. VueJS also batches View updates to be executed asynchronously to avoid unnecesary updates. In the TodoMVC benchmark VueJS is [40% ~ 75% faster][benchmark] than the second fastest implementation (Backbone.js) across browsers.
- **Composable**
VueJS ViewModels can be extended and nested, and each can contain its private directives, filters and child components. A re-usable component can be defined simply as a ViewModel option object, allowing them to be modularized, distributed and composed easily.
- **Module Friendly**
VueJS is built with [Component], but it can also be used with [Browserify], with module loaders such as [RequireJS], or just as a standalone library.
Sounds good? [Let's get started](wiki/Getting-Started).
[benchmark]: wiki/Performance
[Component]: https://github.com/component/component
[Browserify]: http://browserify.org
[RequireJS]: http://requirejs.org