yox/README.md

A lightweight mvvm framework

# Yox

Just like Vue, but it is more lightweight and easy to use than Vue.

The key feature is that Yox supports IE6.

> QQ Group: 232021930

## Install

CDN

```html
<script src="https://unpkg.com/yox"></script>
```

NPM

```
npm install yox
```

YARN

```
yarn add yox
```

## Example

* [Hello World](http://jsrun.net/YxyKp/edit)

#### If/ElseIf/Else

* [Node](http://jsrun.net/ZxyKp/edit)
* [Attribute](http://jsrun.net/gxyKp/edit)

#### Each

* [Array With Object Type](http://jsrun.net/hxyKp/edit)
* [Array With Primitive Type](http://jsrun.net/eByKp/edit)
* [Object](http://jsrun.net/yxyKp/edit)
* [Range](http://jsrun.net/fxyKp/edit)

#### Filter

* [Global Filter](http://jsrun.net/xRyKp/edit)
* [Component Filter](http://jsrun.net/IxyKp/edit)
* [Global Function Is Disabled](http://jsrun.net/zByKp/edit)
* [Object Method Is Disabled](http://jsrun.net/FByKp/edit)

#### Comment

* [HTML](http://jsrun.net/2xyKp/edit)
* [Mustache](http://jsrun.net/yByKp/edit)

#### Ref

* [HTML Element](http://jsrun.net/sMyKp/edit)
* [Component Instance](http://jsrun.net/FMyKp/edit)

#### Computed

* [Collect Deps Automatic](http://jsrun.net/y4yKp/edit)
* [Set Deps Manually](http://jsrun.net/b4yKp/edit)

#### Keypath

* [Keypath](http://jsrun.net/W4yKp/edit)

#### Event Handle

##### DOM Event

* [Fire Event](http://jsrun.net/vxyKp/edit)
* [Invoke Method With No Params](http://jsrun.net/LxyKp/edit)
* [Invoke Method With Params](http://jsrun.net/ICyKp/edit)
* [Prevent Default Behavior](http://jsrun.net/CSyKp/edit)
* [Stop Propagation](http://jsrun.net/rSyKp/edit)
* [Event Namespace](http://jsrun.net/DRyKp/edit)

##### Custom DOM Event

* [Tap](http://jsrun.net/XCyKp/edit)
* [Hover](http://jsrun.net/cZbKp/edit)
* [CamelCase](http://jsrun.net/7ZbKp/edit)

##### Component Event

* [Bubble Up Event](http://jsrun.net/YByKp/edit)
* [Transform Event](http://jsrun.net/nRyKp/edit)
* [Invoke Method](http://jsrun.net/kByKp/edit)
* [Bubble Up Event With Namespace](http://jsrun.net/tRyKp/edit)
* [Transform Event With Namespace](http://jsrun.net/CRyKp/edit)
* [Invoke Method With Namespace](http://jsrun.net/mRyKp/edit)
* [Event Data](http://jsrun.net/jRyKp/edit)
* [Fire Event Downward](http://jsrun.net/kuyKp/edit)
* [Bind DOM Event On Component Root Element](http://jsrun.net/iByKp/edit)

#### Data Binding

##### Form Element

* [input](http://jsrun.net/qByKp/edit)
* [textarea](http://jsrun.net/ZByKp/edit)
* [radio](http://jsrun.net/gByKp/edit)
* [checkbox](http://jsrun.net/hByKp/edit)
* [select](http://jsrun.net/XByKp/edit)

##### Component

* [Input](http://jsrun.net/NxyKp/edit)
* [Checkbox](http://jsrun.net/LCyKp/edit)

#### Custom Directive

* [Log Report](http://jsrun.net/QByKp/edit)
* [Directive Modifier](http://jsrun.net/8jyKp/edit)

#### Component

* [Button](http://jsrun.net/axyKp/edit)
* [Spread Props](http://jsrun.net/QxyKp/edit)

## Document

[中文文档](https://yoxjs.github.io/yox)

## Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/yox#sponsor)]

<a href="https://opencollective.com/yox/sponsor/0/website" target="_blank"><img src="https://opencollective.com/yox/sponsor/0/avatar.svg"></a>

## Donation

If you think Yox is very helpful to you, please give me some encouragement.

Wechat Pay

<img src="https://user-images.githubusercontent.com/2732303/44254903-ce6d3f80-a236-11e8-86dd-f6b27a7f94df.png" width="200">

Ali Pay

<img src="https://user-images.githubusercontent.com/2732303/44254929-e5139680-a236-11e8-95e2-f5a864246f83.png" width="200">