alpacajs

0.0.1 • Public • Published

alpaca.js

一个类(copy)vue的mvvm框架

注意:这个项目只是我学习vue源码的过程中,为了加深自己的理解和增强动手能力,会仿造vue的源码,撸(chao)出来的框架,改动目前也仅仅是换个变量名(例如Vue换成Alpaca,v-on换成alpaca-on等等),只是用于娱乐,请不要用作生产。

目前已经实现的只有双向绑定事件绑定

双向绑定

和vue的一样,就是换了个名字而已,示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alpaca.js</title>
</head>

<body>
    <div id="app">
        <input alpaca-model="msg">
        <span>{{msg}}</span>
    </div>
</body>

<script src="js/alpaca.js"></script>
<script type="text/javascript">
     new Alpaca({
        el: '#app',
        data: {
            msg: 'Alpaca'
        }
    });
</script>
</html>
事件绑定

和vue的一样,就是换了个名字而已,示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alpaca.js</title>
</head>

<body>
    <div id="app">
        <button alpaca-on:click="del">-</button>
        <span>{{num}}</span>
        <button alpaca-on:click="add">+</button>
    </div>
</body>

<script src="js/alpaca.js"></script>
<script type="text/javascript">
     new Alpaca({
        el: '#app',
        data: {
            num: 0,
        },
        methods: {
            add: function () {
                this.num = this.num +1;
            },
            del: function () {
                this.num = this.num -1;
            }
        }
    });
</script>
</html>

Readme

Keywords

Package Sidebar

Install

npm i alpacajs

Weekly Downloads

1

Version

0.0.1

License

ISC

Unpacked Size

9.66 kB

Total Files

5

Last publish

Collaborators

  • biguokang