仿vue實現簡易版mvvm雙向綁定

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

一、 指令

• 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屬性

二、示例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>一、vm-bind 單項綁定</h3>
    <p>在標籤中添加vm-bind="數據"屬性，標籤中內容顯示綁定數據：如</p>
    <p vm-bind="title"></p>
    <br>

    <h3>二、vm-model雙向綁定</h3>
    <p>在input中添加vm-model="數據"屬性，實現視圖與數據同步,以下：</p>
    <input type="text" vm-model="text">
    <span vm-bind="text"></span>
    <br>

    <h3>三、vm-click添加點擊事件，如：</h3>
    <p>在標籤中添加vm-click="方法"，點擊元素調用方法</p>
    <button vm-click="increment(1)">點我加一</button>
    <span vm-bind="count"></span>
    <br>

    <h3>四、雙花括號綁定，如：</h3>
    <p>使用{{數據}}綁定數據到界面</p>
    <p>{{word}}</p>
    <br>

    <h3>五、vm-show實現元素的顯示和隱藏</h3>
    <p>在元素中添加vm-show屬性，根據數據的真假實現元素的顯示隱藏，如：</p>
    <button vm-bind="sh" vm-click="toChange"></button>
    <div vm-show="isshow">xxxxxxxxxx</div>

    <h3>六、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>六、vm-src綁定元素src</h3>
    <p>在元素中添加vm-src="數據"屬性，該標籤會根據數據循環顯示，如：</p>
    <img vm-src="imgSrc" alt="">
    <br>

    <h3>七、vm-attr綁定元素屬性</h3>
    <p>在元素中添加vm-attr="屬性名：數據"屬性，該標籤會根據數據循環顯示，如：</p>
    <p vm-attr="id:idName">xxxxxxx</p>
    <br>

    <h3>八、vm-bind綁定css樣式</h3>
    <p>在元素中添加vm-bind="style屬性：數據"屬性，該標籤會根據數據循環顯示，如：</p>
    <p vm-bind="color:col">我是紅色的</p>
    <br>

    <!-- -->
    <hr>
    <p>上述指令和結合在一塊兒使用</p>
</div>

三、 目錄結構

---

mvvm

• src
   vm.js--------建立VM對象，初始化數據
   compile.js---dom編譯模塊
   directive.js--指令模塊
   convert.js---數據劫持模塊
   index.html--示例dome
• dist vm.js--------打包壓縮後的js index.html--示例dome