记一次mui开发所遇到的困难

        整个开发遇到的第一个问题是点击事件onclick的触发，按照以往java开发的经验在页面中直接加οnclick="xx()"并不能达到理想中的效果，也就是在手机端点击之后没有任何反应。在经过一顿百度之后发现mui在使用点击事件之前必须要先进行绑定，绑定的方法有两种，一种是addEvenListener，另一种是on。

    addEvenListener是针对单个元素处理的，写法为：

    var tap = document.getElementById('xxx');

    tap.addEventListener('tap',function(){
       console.log(12);

   });

    MUI 中ON的用法是用于多个元素的，当然也可以用于单个元素，本次开发使用的就是on,具体代码如下：

    mui("#gjj").on('tap', 'a', function (event) {
            this.click();
        });

其中tap表示单次点击屏幕，a表示选择的标签。

    当点击事件可以触发之后，我又遇到了下一个问题，就是从后台取出的json怎么解析在页面上，用常规的java的方式试了一下，发现并不能行的通，只能另寻它法。

    后来经过一顿百度，发现在h5里如果页面需要解析json，必须要在页面里重新定义一下那个json，然后把从后台取出的值赋给新定义的json，具体代码如下：

var vm = new Vue({
              el: '#app',
              data: {
                  auditRec_show:false,
                  grjcxxJson:[{spname:'',spidno:'',spcode:'',snname:'',sncode:'',spmfact:'',spjym:'',spmend:'',spjcbl:'',mc:'',id:''}]
              }
            }); 
var url = 'appHttpService/getGrjcxxApp.do?userId='+getUserId();
             utils.ajax(url, function(data) {
                data = JSON.parse(data);
                var code = data.code;
                var result = data.result;
                var grjcxxJson = data.grjcxxJson;
                if(code==1||code=='1'){
                    mui.toast(data.result);
                    return;
                }else{
                    if( data.grjcxxJson ){
                        var grjcxxJson = JSON.parse(data.grjcxxJson);
                        if(grjcxxJson !=null){
                            var size = grjcxxJson.length;
                            if(size>0){
                                vm.auditRec_show = true;
                                vm.grjcxxJson = grjcxxJson;
                                console.log("111");
                            }
                        }
                    }else{
                        vm.auditRec_show = false;
                    }
                    
                }

          });

然后这样取值：

<ul>
                            <template v-if='auditRec_show'  v-for="grjcxxVo in grjcxxJson">
                                <li>
                                    <span class="process_tit">
                                        <i class="process_icon"></i>
                                        {{grjcxxVo.spname}}
                                    </span>
                                    <span class="process"><i></i><span>身份证号：{{grjcxxVo.spidno}}</span><b class="cir"></b></span>
                                    <span class="process"><i></i><span>个人账号：{{grjcxxVo.spcode}}</span></span>
                                    <span class="process"><i></i><span>单位名称：{{grjcxxVo.snname}}</span></span>
                                    <span class="process"><i></i><span>单位账号：{{grjcxxVo.sncode}}</span></span>
                                    <span class="process"><i></i><span>月汇缴额：{{grjcxxVo.spmfact}}</span></span>
                                    <span class="process"><i></i><span>末次汇缴月：{{grjcxxVo.spjym}}</span></span>
                                    <span class="process"><i></i><span>个人账户余额：{{grjcxxVo.spmend}}</span></span>
                                    <span class="process"><i></i><span>个人缴存比例：{{grjcxxVo.spjcbl}}%</span></span>
                                    <!--<span class="process"><i></i><span>个人账户状态：{{auditRecVo.auditOpinion}}</span></span>-->
                                    <span class="process_result"><i class="result_iocn"></i></span>
                                    <p class="line"></p>
                                </li>
                            </template>
                            <template v-else>
                                暂无办理过程信息......
                            </template>
                        </ul>