Aug 15, 2019 Eric Guo    1319

摘要：记录一下在使用Vue中遇到的问题点

在页面加载完后在启用vue

window.onload=function(){
        //Vue具体业务逻辑
}

页面加载出现Vue的符号{{site.id}}等

使用v-clock，vue给出了解决方案
<tr v-for="site in dataLists" v-cloak>
        [v-cloak]{
            display: none;
        }

SelectPicker 与VUE 失败了

可以正常用但是要把window.onload给去掉否则会报错，执行不成功
selectpicker链接 https://developer.snapappointments.com/bootstrap-select/

Vue中使用Echarts

            mounted:function(){
                this.drawLine();
            },
            methods:{
                drawLine:function(){
                        this.chart = echarts.init(document.getElementById('dashboard1'));
                        this.chart.setOption(option);
                    },

在Vue中使用ajax更新数据

调用方法需要使用vue的，同时对应的方法也要放到vue中，如果使用onclick等js方法，就不能在vue中使用函数方法，需要在vue外面写js方法
<button typt="button" class="btn btn-sm btn-primary" @click="myFT()">操作</button>
            methods:{
                drawLine:function(){
                        this.chart = echarts.init(document.getElementById('dashboard1'));
                        this.chart.setOption(option);
                    },
                myFT:function(){
                    var test = [
                        { id: 'Runoob' },
                        { id: 'Google' },
                        { id: 'Taobao' }
                    ];
                    this.dataLists = test;
                },

在Vue方法中使用ajax

会出现问题，所以不推荐使用
            assinRole:function(){
                //触发条件   第一执行
                //ajax code  第三执行，同时这里面的设置过this.data后并不会让vue进行更改 (这里使用的ajax是$.get)
                //其他方法  第二执行
                window.location.href="/roles?user=eric.guo";
            }

Selectpicker与v-model 同时存在会出现冲突

会让添加了selected的不起作用 移除v-model就可以了

全部的selectpicker
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="__PUBLIC__/Erp/Admin/css/bootstrap-select.css">

<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__PUBLIC__/Erp/Admin/js/bootstrap-select.js"></script>
</body>

VUE中多个if判断的时候可以使用数组

:class='[SkuDetail.IsEmergency == true ? "oceania_red":"",(SkuDetail.Status=="0" && SkuDetail.IsEmergency == false) ? "" : "",(SkuDetail.Status=="1" && SkuDetail.IsEmergency == false) ? "info" : "",(SkuDetail.Status=="3" && SkuDetail.IsEmergency == false) ? "oceania_orange" : ""]'
注意单双引号

Vue兼容IE处理

链接: https://pan.baidu.com/s/1Vipa2za_NqREEvYDFpt78g 提取码: vk5c

onkeyup后模型没有绑定，会留有最后一次的记录

替换为vue的写法即可
@keyup.native="(workinfo.witnessphone)=(workinfo.witnessphone).replace(/[^0-9]/g,'')"

elelement-ui 种dialog种的before-close函数

:before-close="clearReasonChart"
不需要写() 否则会被多次调用

Element 的表单rule 在for里面第一条会失效可以采用放一条空的解决

                            <template v-for="educationparam in educationdata">
                                <el-form-item>

                                </el-form-item>
                                <el-form-item label="学历" prop="educationbackground">
                                    <el-input v-model="educationparam.educationbackground" maxlength="50"></el-input>
                                </el-form-item>