# minVue

**Repository Path**: amundsen-code/minVue

## Basic Information

- **Project Name**: minVue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2018-09-11
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 学习vue原理编写的基础功能

### 1.0.7 

- 新增checkbox支持
- 新增:class 语法的支持

```html

.color{
    color: red
}
.bc{
    background: blue
}

<span :class='{colorKey:"color", bcKey:"bc"}'>css</span>

colorKey:true,
bcKey:true

```

#### 1.0.4


- @click 支持参数传递 
- 取消默认接收event
- 目前只能传递一个字符串类型参数

``` html
<span @click="onClick($event,'11')">计算</span>
```

##### 1.0

- 需要绑定的数据请挂载到 data
- html 绑定到 v-value
- input 绑定使用 v-module
- 支持@click事件
- 支持v-if

### 安装
浏览器导入
```javascript
<script src='./minVue.min.js'></script>
```

```javascript
npm || yarn
```

```javascript
npm install minVue  
yarn minVue

```

使用

```javascript
import minVue from 'min-vue'

const minVue = require('min-vue')

```

```html
<ul id="app">
    <li class="product">
        单价
        <input type="number" class="number" v-module='num'>
        <span v-value='num'></span>
        数量
        <input type="number" class="number" v-module='num1'>
        <span v-value='num1'></span>
        单品总价
        <span class="total-price" v-value='num3'></span>
        <span @click="onClick">计算</span>
    </li>
    <li>
        <span v-if='li1'>1</span>
        <span @click='onChangeli1'>切换显示1</span>
    </li>
    <li>
        <span v-if='li2'>2</span>
        <span @click='onChangeli2'>切换显示2</span>
    </li>
</ul>
```

```javascript

new minVue({
    el:'#app',
    data:function(){
        return {
            num:'',
            num1:'',
            num3:'',
            li1:true,
            li2:true
        }
    },
    created:function(){
        // console.log('初始化完成')
    },

    methods:{
        onClick:function(){
            this.data.num3 = this.data.num * this.data.num1
        },
        onChangeli1:function(){
            this.data.li1 = !this.data.li1
        },
        onChangeli2:function(){
            this.data.li2 = !this.data.li2
        }
    }
})  
```