https://github.com/ffiirree/minx

mvvm
https://github.com/ffiirree/minx

mvvm mvvm-framework mvvm-light

Last synced: 5 days ago
JSON representation

mvvm

• Host: GitHub
• URL: https://github.com/ffiirree/minx
• Owner: ffiirree
• Created: 2017-11-07T16:33:41.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-17T12:32:39.000Z (almost 7 years ago)
• Last Synced: 2023-10-20T19:49:34.337Z (about 1 year ago)
• Topics: mvvm, mvvm-framework, mvvm-light
• Language: JavaScript
• Size: 37.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Minx

## Minx是一个简单的MVVM框架.

## 功能

 - [x] {{ xxx }}

 - [ ] x-html

 - [x] x-model

 - [x] x-if

 - [x] x-for

 - [x] :/x-attr:[attr]

 - [x] x-on:[event]

 

 ### 插值

 #### 文本 

 ```html

 
 {{ title }} 

```

#### 表达式

```javascript

{{ age + 1 }}

{{ age ? 'YES' : 'NO' }}

{{ fns['method']('hello') }}

```


### 指令

#### x-model:双向绑定

```html

```

#### x-for: 列表

```html



    
{{ todo.creator }}



```

或者使用索引

```html



    
{{ todo.creator }}



```


#### x-attr:[attr]: 为节点添加属性

可以使用字符串进行拼接

```html



{{ user }}的BLOG





```


#### x-on:[event]:绑定事件

可以使用参数，实际参数使用数组传入，按照索引使用参数

```html

CLICK TO SAY: Hello

``` 

#### x-if: 是否渲染该节点

```html

是否显示

```


### Router.hash

```javascript

// 获取hash值

let _hash = Router.hash.value;

// 设置hash值

Router.hash.value = { scope: 0, page: 2 }; // url#!/scope=0&page=2

// 获取hash参数值

Router.hash.get('scope'); // 0

Router.hash.get('page');  // 2

// 设置参数值

Router.hash.set('scope', 2); // url#!/scope=2&page=2

Router.hash.set('page', 5);  // url#!/scope=2&page=5

// 绑定事件

Router.hash.change(()=>{alter('change!')});

```