仿vue实现简易版mvvm双向绑定

项目地址：https://github.com/pangyongsheng/mvvm

1、 指令

• vm-bind 单选数据绑定- 将数据显示到标签视图
• vm-model : 双向数据绑定
• vm-show : 是否显示
• vm-show : 是否显示
• vm-if/v-else : 条件判断
• vm-click:绑定事件
• vm-src:标签资源绑定
• vm-attr="key:value":html标签属性绑定
• {{x}}双花括号数据绑定
• vm-bind="css属性:值" bind绑定css属性

2、示例dome(详细见dist/index.html)

（1）js

new viewModel({
        el:'#wrap',                 //@绑定节点
        data:{                          //@数据
            title:"双向绑定使用dome",
            count:0,
            ...
        },
        methods:{                   //@方法-事件调用(this指向data)
            increment:function(a){
                this.count+=parseInt(a);
            },
            ...
        },
        create:function(init){  //@业务逻辑（this指向data）
            var _this=this;
            setTimeout(function(){
                _this.count=5;
                init();
            },2000)

        }
    })

（2）html

<div id="wrap"  vm-hidden>
    <h1 style="text-align: center;">双向绑定使用dome</h1>
    <br>
    <h3>1、vm-bind 单项绑定</h3>
    <p>在标签中添加vm-bind="数据"属性，标签中内容显示绑定数据：如</p>
    <p vm-bind="title"></p>
    <br>

    <h3>2、vm-model双向绑定</h3>
    <p>在input中添加vm-model="数据"属性，实现视图与数据同步,如下：</p>
    <input type="text" vm-model="text">
    <span vm-bind="text"></span>
    <br>

    <h3>3、vm-click添加点击事件，如：</h3>
    <p>在标签中添加vm-click="方法"，点击元素调用方法</p>
    <button vm-click="increment(1)">点我加一</button>
    <span vm-bind="count"></span>
    <br>

    <h3>4、双花括号绑定，如：</h3>
    <p>使用{{数据}}绑定数据到界面</p>
    <p>{{word}}</p>
    <br>

    <h3>5、vm-show实现元素的显示和隐藏</h3>
    <p>在元素中添加vm-show属性，根据数据的真假实现元素的显示隐藏，如：</p>
    <button vm-bind="sh" vm-click="toChange"></button>
    <div vm-show="isshow">xxxxxxxxxx</div>

    <h3>6、vm-for实现列表循环显示</h3>
    <p>在元素中添加vm-show="数据"属性，该标签会根据数据循环显示，如：</p>
    <ul>
        <li vm-for="li in list">
            <span>{{li.name}}</span>
            <span>{{li.sex}}</span>
        </li>
    </ul>
    <br>

    <h3>6、vm-src绑定元素src</h3>
    <p>在元素中添加vm-src="数据"属性，该标签会根据数据循环显示，如：</p>
    <img vm-src="imgSrc" alt="">
    <br>

    <h3>7、vm-attr绑定元素属性</h3>
    <p>在元素中添加vm-attr="属性名：数据"属性，该标签会根据数据循环显示，如：</p>
    <p vm-attr="id:idName">xxxxxxx</p>
    <br>

    <h3>8、vm-bind绑定css样式</h3>
    <p>在元素中添加vm-bind="style属性：数据"属性，该标签会根据数据循环显示，如：</p>
    <p vm-bind="color:col">我是红色的</p>
    <br>

    <!--  -->
    <hr>
    <p>上述指令和结合在一起使用</p>
</div>

3、 目录结构

---

mvvm

• src
   vm.js--------创建VM对象，初始化数据
   compile.js---dom编译模块
   directive.js--指令模块
   convert.js---数据劫持模块
   index.html--示例dome
• dist
   vm.js--------打包压缩后的js
   index.html--示例dome