mirror of
https://github.com/vuejs/vue.git
synced 2024-11-21 20:28:54 +00:00
remove wiki
Evan You
parent
27fe8bd5ff
commit
6d8898158e
@ -1,37 +0,0 @@
|
||||
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,29 +0,0 @@
|
||||
If you are unfamiliar with MVVM or finding yourself confused by some of the terms, check out the [Concepts Overview] first.
|
||||
|
||||
### 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!'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
[Concepts Overview]: Concepts-Overview
|
||||
@ -1,8 +0,0 @@
|
||||
#### Vue.extend(options)
|
||||
#### Vue.directive(name, [directive])
|
||||
#### Vue.filter(name, [filter])
|
||||
#### Vue.component(name, [component])
|
||||
#### Vue.element(name, [element])
|
||||
#### Vue.partial(name, [partial])
|
||||
#### Vue.transition(name, [transition])
|
||||
#### Vue.config(options)
|
||||
116
Home.md
116
Home.md
@ -1,116 +0,0 @@
|
||||
## Topics
|
||||
|
||||
- [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)
|
||||
- [Child Components](wiki/Child-Components)
|
||||
- [Transitions](wiki/Transitions)
|
||||
- [Form Validation](wiki/Form-Validation)
|
||||
- [Routing](wiki/Routing)
|
||||
|
||||
## Examples
|
||||
|
||||
- **[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
|
||||
|
||||
### [Global Methods](wiki/Global-Methods)
|
||||
|
||||
- [Vue.extend(options)](wiki/Global-Methods#vueextendoptions)
|
||||
- [Vue.directive(name, [directive])](wiki/Global-Methods#vuedirectivename-directive)
|
||||
- [Vue.filter(name, [filter])](wiki/Global-Methods#vuefiltername-filter)
|
||||
- [Vue.component(name, [component])](wiki/Global-Methods#vuecomponentname-component)
|
||||
- [Vue.element(name, [element])](wiki/Global-Methods#vueelementname-element)
|
||||
- [Vue.partial(name, [partial])](wiki/Global-Methods#vuepartialname-partial)
|
||||
- [Vue.transition(name, [transition])](wiki/Global-Methods#vuetransitionname-transition)
|
||||
- [Vue.config(options)](wiki/Global-Methods#vueconfigoptions)
|
||||
|
||||
### [Instantiation Options](wiki/Instantiation-Options)
|
||||
|
||||
- [Data & Logic](wiki/Instantiation-Options#data--logic)
|
||||
- [data](wiki/Instantiation-Options#data)
|
||||
- [methods](wiki/Instantiation-Options#methods)
|
||||
- [DOM Element](wiki/Instantiation-Options#dom-element)
|
||||
- [el](wiki/Instantiation-Options#el)
|
||||
- [template](wiki/Instantiation-Options#template)
|
||||
- [replace](wiki/Instantiation-Options#replace)
|
||||
- [tagName](wiki/Instantiation-Options#tagname)
|
||||
- [id](wiki/Instantiation-Options#id)
|
||||
- [className](wiki/Instantiation-Options#classname)
|
||||
- [attributes](wiki/Instantiation-Options#attributes)
|
||||
- [Hooks](wiki/Instantiation-Options#hooks)
|
||||
- [beforeCompile / created](wiki/Instantiation-Options#beforecompile)
|
||||
- [afterCompile / ready](wiki/Instantiation-Options#aftercompile)
|
||||
- [enteredView](wiki/Instantiation-Options#enteredview)
|
||||
- [leftView](wiki/Instantiation-Options#leftview)
|
||||
- [beforeDestroy](wiki/Instantiation-Options#beforedestroy)
|
||||
- [afterDestroy](wiki/Instantiation-Options#afterdestroy)
|
||||
- [Private Assets](wiki/Instantiation-Options#private-assets)
|
||||
- [directives](wiki/Instantiation-Options#directives)
|
||||
- [filters](wiki/Instantiation-Options#filters)
|
||||
- [components](wiki/Instantiation-Options#components)
|
||||
- [elements](wiki/Instantiation-Options#elements)
|
||||
- [partials](wiki/Instantiation-Options#partials)
|
||||
- [Misc](wiki/Instantiation-Options#misc)
|
||||
- [lazy](wiki/Instantiation-Options#lazy)
|
||||
|
||||
### [Instance Properties](wiki/Instance-Properties)
|
||||
|
||||
- [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)
|
||||
|
||||
- [vm.$watch(keypath, callback)](wiki/Instance-Methods#vmwatchkeypath-callback)
|
||||
- [vm.$unwatch(keypath, [callback])](wiki/Instance-Methods#vmunwatchkeypath-callback)
|
||||
- [vm.$on(event, callback)](wiki/Instance-Methods#vmonevent-callback)
|
||||
- [vm.$off([event, callback])](wiki/Instance-Methods#vmoffevent-callback)
|
||||
- [vm.$emit(event, [args...])](wiki/Instance-Methods#vmemitevent-args)
|
||||
- [vm.$broadcast(event, [args...])](wiki/Instance-Methods#vmbroadcastevent-args)
|
||||
- [vm.$appendTo(element | selector)](wiki/Instance-Methods#vmappendtoelement--selector)
|
||||
- [vm.$before(element | selector)](wiki/Instance-Methods#vmbeforeelement--selector)
|
||||
- [vm.$after(element | selector)](wiki/Instance-Methods#vmafterelement--selector)
|
||||
- [vm.$remove()](wiki/Instance-Methods#vmremove)
|
||||
- [vm.$destroy()](wiki/Instance-Methods#vmdestroy)
|
||||
|
||||
### [Directives](wiki/Directives)
|
||||
|
||||
- [v-text](wiki/Directives#v-text)
|
||||
- [v-html](wiki/Directives#v-html)
|
||||
- [v-visible](wiki/Directives#v-visible)
|
||||
- [v-show](wiki/Directives#v-show)
|
||||
- [v-class](wiki/Directives#v-class)
|
||||
- [v-attr](wiki/Directives#v-attr)
|
||||
- [v-style](wiki/Directives#v-style)
|
||||
- [v-on](wiki/Directives#v-on)
|
||||
- [v-if](wiki/Directives#v-if)
|
||||
- [v-repeat](wiki/Directives#v-repeat)
|
||||
- [v-model](wiki/Directives#v-model)
|
||||
- [v-component](wiki/Directives#v-component)
|
||||
- [v-component-id](wiki/Directives#v-component-id)
|
||||
- [v-transition](wiki/Directives#v-transition)
|
||||
- [v-partial](wiki/Directives#v-partial)
|
||||
- [v-pre](wiki/Directives#v-pre)
|
||||
|
||||
### [Filters](wiki/Filters)
|
||||
|
||||
- [capitalize](wiki/Filters#capitalize)
|
||||
- [uppercase](wiki/Filters#uppercase)
|
||||
- [lowercase](wiki/Filters#lowercase)
|
||||
- [currency](wiki/Filters#currency)
|
||||
- [pluralize](wiki/Filters#pluralize)
|
||||
- [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
|
||||
@ -1,35 +0,0 @@
|
||||
### 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.
|
||||
@ -1,158 +0,0 @@
|
||||
### Data & Logic
|
||||
|
||||
- #### data
|
||||
|
||||
Type: `Object`
|
||||
|
||||
The data object for the ViewModel. The ViewModel will proxy access to all its properties. The object it self can be accessed as `vm.$data`.
|
||||
|
||||
```js
|
||||
var data = { a: 1 }
var vm = new Vue({
|
||||
data: data
|
||||
})
|
||||
vm.a // 1
|
||||
vm.a = 2
|
||||
data.a // 2
|
||||
data.a = 3
|
||||
vm.a // 3
|
||||
vm.$data === data // true
|
||||
```
|
||||
|
||||
- #### methods
|
||||
|
||||
Type: `Object`
|
||||
|
||||
Methods to be copied to the ViewModel. All methods will have their `this` context automatically bound to the ViewModel.
|
||||
|
||||
```js
|
||||
var vm = new Vue({
|
||||
data: { a: 1 },
|
||||
methods: {
|
||||
plus: function () {
|
||||
this.a++
}
}
})
|
||||
vm.plus()
vm.a // 2
|
||||
```
|
||||
|
||||
### DOM Element
|
||||
|
||||
- #### el
|
||||
|
||||
Type: `String` or `HTMLElement`
|
||||
|
||||
Provide the ViewModel with an existing DOM node. It can be either a `querySelector()` selector or an actual node. The element will be accessible as `vm.$el`.
|
||||
|
||||
If this option is omitted, a detached node will be automatically created.
|
||||
|
||||
Restriction: only respected as an instantiation option, i.e. not in `Vue.extend()`
|
||||
|
||||
- #### template
|
||||
|
||||
Type: `String`
|
||||
|
||||
A raw template string which will be converted into a DOM fragment and cloned into `vm.$el`. It will overwrite `vm.$el`'s existing inner content.
|
||||
|
||||
- #### replace
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `false`
|
||||
|
||||
Whether to replace `vm.$el` with the template's top level element.
|
||||
|
||||
Restriction: only respected if the **template** option is present and the template contains exactly 1 top level element.
|
||||
|
||||
- #### tagName
|
||||
|
||||
Type: `String`
|
||||
Default: `'div'`
|
||||
|
||||
The tag name to be used when creating `vm.$el`.
|
||||
|
||||
Restriction: only respected when the **el** option is omitted and the **replace** option is `false`.
|
||||
|
||||
- #### id
|
||||
|
||||
Type: `String`
|
||||
|
||||
Set as `vm.$el.id`.
|
||||
|
||||
- #### className
|
||||
|
||||
Type: `String`
|
||||
|
||||
Set as `vm.$el.className`.
|
||||
|
||||
- #### attributes
|
||||
|
||||
Type: `Object`
|
||||
|
||||
A hash of HTML attributes to be set on `vm.$el`.
|
||||
|
||||
### Lifecycle Hooks
|
||||
|
||||
All lifecycle hooks have their `this` context bound to the ViewModel they belong to.
|
||||
|
||||
- #### beforeCompile
|
||||
|
||||
Alias: `created`
|
||||
Type: `Function`
|
||||
|
||||
Called before the compilation starts. Can be used to attach additional data to be observed on the ViewModel.
|
||||
|
||||
- #### afterCompile
|
||||
|
||||
Alias: `ready`
|
||||
Type: `Function`
|
||||
|
||||
Called after the compilation has ended and the ViewModel is ready.
|
||||
|
||||
- #### enteredView
|
||||
|
||||
Type: `Function`
|
||||
|
||||
Called when `vm.$el` is attached to DOM by a VueJS directive. Direct manipulation of `vm.$el` will **not** trigger this hook.
|
||||
|
||||
- #### leftView
|
||||
|
||||
Type: `Function`
|
||||
|
||||
Called when `vm.$el` is removed from the DOM by a VueJS directive. Direct manipulation of `vm.$el` will **not** trigger this hook.
|
||||
|
||||
- #### beforeDestroy
|
||||
|
||||
Type: `Function`
|
||||
|
||||
Called before a ViewModel is destroyed.
|
||||
|
||||
- #### afterDestroy
|
||||
|
||||
Type: `Function`
|
||||
|
||||
Called after a ViewModel has been destroyed.
|
||||
|
||||
### Private Assets
|
||||
|
||||
These are private assets that will be available only to this ViewModel and its children during compilation.
|
||||
|
||||
- #### directives
|
||||
|
||||
Type: `Object`
|
||||
|
||||
- #### filters
|
||||
|
||||
Type: `Object`
|
||||
|
||||
- #### components
|
||||
|
||||
Type: `Object`
|
||||
|
||||
- #### partials
|
||||
|
||||
Type: `Object`
|
||||
|
||||
### Misc
|
||||
|
||||
- #### lazy
|
||||
|
||||
Type: `Boolean`
|
||||
|
||||
Whether to trigger `v-model` updates only on `change` event (hit enter or lose focus) or on every `input` event (on every keystroke).
|
||||
0
Model.md
0
Model.md
@ -1,39 +0,0 @@
|
||||
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:
|
||||
|
||||
- **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 focuses 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](Getting-Started).
|
||||
|
||||
[benchmark]: Performance
|
||||
[Component]: https://github.com/component/component
|
||||
[Browserify]: http://browserify.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