concepts

Evan You 2013-12-30 01:26:13 -05:00
parent 34def86f1a
commit 8bb4194058
4 changed files with 53 additions and 15 deletions

39
Concepts-Overview.md Normal file

@ -0,0 +1,39 @@
## Concepts Overview
VueJS shares a number of concepts with AngularJS. If you have used Angular before, you will find VueJS very easy to pick up.
Concept | As in VueJS
:--- | :---
[View] | The actual HTML that the user sees.
[Template] | The HTML with additional markup.
[Model] | A slightly modified plain JavaScript object.
[ViewModel] | An object that syncs the Model and the View.
[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.
## View
## Template
## Model
## ViewModel
## Directive
## Filter
## Expression
## Computed Property
[ViewModel]: #viewmodel
[Model]: #model
[View]: #view
[Template]: #template
[Directive]: #directive
[Filter]: #filter
[Expression]: #expression
[Computed Property]: #computed-property

@ -1,15 +1,3 @@
## 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**
@ -31,6 +19,7 @@ var demo = new Vue({
methods: {
changeText: function () {
this.hello = 'Hello VueJS!'
} }
}
}
})
```

@ -2,6 +2,7 @@
- [What is VueJS?](wiki/What-is-VueJS)
- [Installation](wiki/Installation)
- [Concepts Overview](wiki/Concepts-Overview)
- [Getting Started](wiki/Getting-Started)
- [Writing a Custom Directive](wiki/Writing-a-Custom-irective)
- [Writing a Custom Filter](wiki/Writing-a-Custom-Filter)

@ -1,4 +1,8 @@
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 a library that aims to simplify the development of interactive interfaces.
Technically, 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.
Philosophically, the goal is to allow the developer to embrace an extremely minimal mental model when dealing with interfaces - there's only one type of object you need to worry about: the ViewModel. It is where all the view logic happens, and manipulating the ViewModel will automatically keep the View and the Model in sync. Actuall DOM manipulations and output formatting are abstracted away into **[Directives]** and **[Filters]**.
VueJS is:
@ -27,4 +31,9 @@ Sounds good? [Let's get started](Getting-Started).
[benchmark]: Performance
[Component]: https://github.com/component/component
[Browserify]: http://browserify.org
[RequireJS]: http://requirejs.org
[RequireJS]: http://requirejs.org
[ViewModel]: Concepts-Overview#viewmodel
[View]: Concepts-Overview#view
[Model]: Concepts-Overview#model
[Directives]: Concepts-Overview#directive
[Filters]: Concepts-Overview#filter