mirror of
https://github.com/vuejs/vue.git
synced 2024-11-22 04:39:46 +00:00
concepts
parent
34def86f1a
commit
8bb4194058
39
Concepts-Overview.md
Normal file
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
|
## A Quick Example
|
||||||
|
|
||||||
**HTML**
|
**HTML**
|
||||||
@ -31,6 +19,7 @@ var demo = new Vue({
|
|||||||
methods: {
|
methods: {
|
||||||
changeText: function () {
|
changeText: function () {
|
||||||
this.hello = 'Hello VueJS!'
|
this.hello = 'Hello VueJS!'
|
||||||
}
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
```
|
```
|
1
Home.md
1
Home.md
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
- [What is VueJS?](wiki/What-is-VueJS)
|
- [What is VueJS?](wiki/What-is-VueJS)
|
||||||
- [Installation](wiki/Installation)
|
- [Installation](wiki/Installation)
|
||||||
|
- [Concepts Overview](wiki/Concepts-Overview)
|
||||||
- [Getting Started](wiki/Getting-Started)
|
- [Getting Started](wiki/Getting-Started)
|
||||||
- [Writing a Custom Directive](wiki/Writing-a-Custom-irective)
|
- [Writing a Custom Directive](wiki/Writing-a-Custom-irective)
|
||||||
- [Writing a Custom Filter](wiki/Writing-a-Custom-Filter)
|
- [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:
|
VueJS is:
|
||||||
|
|
||||||
@ -28,3 +32,8 @@ Sounds good? [Let's get started](Getting-Started).
|
|||||||
[Component]: https://github.com/component/component
|
[Component]: https://github.com/component/component
|
||||||
[Browserify]: http://browserify.org
|
[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
|
Loading…
Reference in New Issue
Block a user