仿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

 

转载于:https://www.cnblogs.com/pangys/p/8125968.html