Vue知识点集锦

一、使用了vue的页面，肯定会经历一个完整的生命周期，与一般的普通页面是不一样的，所以直接获取dom结构是获取不到的，只有在mounted之后才能获取到

serviceManagementAddCrud.vueInit(function () {
   // 任务名称
   serviceManagementAddCrud.input_create('planNameDiv','taskName','','输入内容',true);              
   serviceManagementAddCrud.btnBind();// 创建 保存按钮事件                
});

一些dom操作，在vue的mounted回调函数里面再进行绑定

var vueInit(function(callback){
   app = new Vue({
       el:"#serviceManagementForm",
       data(){},
       mounted:function(){
          if (typeof callback === 'function') callback();
       } 
   }) 
})

 二、在mounted()里面，直接动态生成dom结构，然后在上面绑定点击事件，如：

/*初始化省份*/
function intProvince() {
    areaCont = "";
    for (var i=0; i<province.length; i++) {
        areaCont += '<li onClick="selectP(' + i + ');">' + province[i] + '</li>';
    }
    areaList.html(areaCont);
    $("#areaBox").scrollTop(0);
    $("#backUp").removeAttr("onClick").hide();
}

会发现页面报错：

 

解决办法：参考的是

 

 最终改为：window.selectP = funciton(){}  即可

/*初始化省份*/
                window.intProvince = function() {
                    areaCont = "";
                    for (var i = 0; i < province.length; i++) {
                        areaCont += '<li onClick="selectP(' + i + ');">' + province[i] + '</li>';
                    }
                    areaList.html(areaCont);
                    $("#areaBox").scrollTop(0);
                    $("#backUp").removeAttr("onClick").hide();
                }
                intProvince();

                /*选择省份*/
                window.selectP = function(p) {
                    areaCont = "";
                    areaList.html("");
                    for (var j = 0; j < city[p].length; j++) {
                        areaCont += '<li onClick="selectC(' + p + ',' + j + ');">' + city[p][j] + '</li>';
                    }
                    areaList.html(areaCont);
                    $("#areaBox").scrollTop(0);
                    expressArea = province[p] + " > ";
                    $("#backUp").attr("onClick", "intProvince();").show();
                }