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

1.0.7

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

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

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

colorKey:true,
bcKey:true

1.0.4

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

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

1.0

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

安装

浏览器导入

<script src='./minVue.min.js'></script>

npm || yarn

npm install minVue  
yarn minVue

使用

import minVue from 'min-vue'

const minVue = require('min-vue')

<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>

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
        }
    }
})