仿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;">双向绑定使用domeh1>
    <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">xxxxxxxxxxdiv>

    <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绑定元素srch3>
    <p>在元素中添加vm-src="数据"属性，该标签会根据数据循环显示，如：p>
    <img vm-src="imgSrc" alt="">
    <br>

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