vue 笔记

最新推荐文章于 2021-11-03 17:01:19 发布

在路上_w

最新推荐文章于 2021-11-03 17:01:19 发布

阅读量214

点赞数 1

本文链接：https://blog.csdn.net/wanghuan93/article/details/86580334

版权

1.日期在双向绑定之后格式为：2017-07-03T16:00:00.000Z
想要的格式为2017-07-04

on-change=”addForm.Birthday=$event”

如果用v-if切换就会出问题，慎用，最好自己封装函数去改变值

<Date-picker  placeholder="选择日期"  type="datetime" v-model="addForm.Birthday"  :key="addForm.Birthday"  format="yyyy-MM-dd"  @on-change="addForm.Birthday=$event" >
                </Date-picker>

 function isNull(data) {
    if(data == "" || data == null || data == "null") return true;
}
// 转换日期格式
 function changeDate(date){
  if(!isNull(date)){
    var now = new Date(date),
    y = now.getFullYear(),
    m = ("0" + (now.getMonth() + 1)).slice(-2),
    d = ("0" + now.getDate()).slice(-2);
    return y + "-" + m + "-" + d
  }else{
    return ''
  }
}

2.百度 iview 找不到解决办法，就搜索element 的

比如：iview 改变Input 的背景颜色，搜不到，就是搜element 改变Input背景：在vue中，把style的scoped去掉就可以了。跟作用域有关

3. 本地打包查看index.html 看不了，

 new Router({
  routes,
  // mode: 'history'
})

mode这个地方要注释掉

4.打包后动画失效

找到build文件夹中得vue-loader.conf.js,把extract的值改为false---如图

vue-cli脚手架package.json配置文件里面对浏览器的版本做了css的前缀处理
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
意思是只兼容主流浏览器的最新两个版本。如果我们要兼容所有的就必须把这改成下面，就可以了。

"browserslist": [
"> 1%",
"last 5 versions",
"Android >= 4.0",
"not ie <= 8"
]

5.vue 的配置的作用

https://blog.csdn.net/qq_34645412/article/details/78818245

6.点击某个地方让input获取焦点，

this.$refs.gain.focus()

在动画完成之后不管用

是更新dom先后顺序的问题，在vue中，并不是每次数据改变都会触发更新dom，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。

通常情况下，我们不需要关心这个问题，而如果想在DOM状态更新后做点什么，则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中，因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。

this.$nextTick( () =>{

this.$refs.gain.focus()

} )

7.iview 向组件传递参数类型为number 布尔值和函数时，必须加上:,如 :tatol="100" :current="1"

8.iview table 设置选中

给 data 项设置特殊 key _checked: true 可以默认选中当前项。
给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。

for (var i = 0; i < JSON.parse(resdata.pageData).length; i++) {
if (JSON.parse(resdata.pageData)[i].IsSend == “1”) {
property.listVm.$data.data1[i]._disabled = true;

9.iview 组件加原生事件 @click.native="add"
}
}

10.（1）forEach 之后push 是浅拷贝，改变旧数组a会影响新数组b

let newArray=[];
a.forEach((item)=>{
  newArray.push(item)
})
b=newArray;

（2）stringify 实现深拷贝

b=JSON.parse(JSON.stringify(a));

11.axios get 方法传参

params: {id: 12345，name: user} //params参数必写 , 如果没有参数传{}也可以

12.render 里加入原生事件

13.iview 添加api里没有的事件 @keyup.native @click.native

14.iview v-for循环里的表单校验注意：Form 绑定model 一定要用:model=‘’

<Form  ref="editGmodelForm" :model="initData.editGmodelForm" >
    <div v-for="(item,index) in initData.editGmodelForm.baseElementDto" :key="index">
        <FormItem :label="item.name"
                  :prop="'baseElementDto.'+index+'.value'"
                  :rules="[{required:true}]" v-if="item.isPull==0">
            <Input v-model="item.value" @input="editGmodelChange($event,index)" @on-keyup.enter="nextEditGmodelForm(index)"   :ref="'editGmodelFormInput'+index"></Input>
        </FormItem>
        <FormItem :label="item.name"
                  :prop="'baseElementDto.'+index+'.optionName'" 
                  :rules="[{required:true}]" v-else>
            <template v-if="index==0">
                <v-select :listData="listData.ppTypeList"
                          v-model="item.optionName"
                          @select-change="((i)=>{editGmodelSelect(i,index)})"
                          :disabled="initData.isDisabled"
                          @enter="nextEditGmodelForm(index)"
                          :ref="'editGmodelFormInput'+index"
                >
                </v-select>
            </template>
            <template v-if="index==1">
                <v-select :listData="listData.ckxhList"
                          v-model="item.optionName"
                          @select-change="((i)=>{editGmodelSelect(i,index)})"
                          :disabled="initData.isDisabled"
                          @enter="nextEditGmodelForm(index)"
                          :ref="'editGmodelFormInput'+index"
                >
                </v-select>
            </template>
        </FormItem>
    </div>
</Form>

15.iview upload里before-upload里处理数据没反应用Promise处理

containerListUploadBefore(){
    let that=this;
    return new Promise(function(resolve,reject){
        let arr=[];
        that.orderForm.containerList.forEach(item=>{
            arr.push(item.containerId)
        })
        that.initData.containIds=arr;
        resolve()
    })
},

如果想要在上传之前添加一个是否确认的操作

16.v-bing: (简写成:) 是单向绑定，vue的data流向html，html改变不会影响data

v-model 双向绑定，vue的data流向html，html流向data，html改变会影响data

17.methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用

watch和computed各自处理的数据关系场景不同

1）watch擅长处理的场景：一个数据影响多个数据

2）computed擅长处理的场景：一个数据受多个数据影响

18.控制input 输入框不能输小数

//页面
 <Input placeholder="选填" type="number" v-model.number="item.containercount" @keyup.native="containercountChange($event,index)"></Input>

//js
     containercountChange(value,index){
        let str = '' + this.importBoxData[index].containercount;
        if (str.indexOf('.') != -1) {
          let arr = str.split('');
          arr.splice(arr.length - 1);
          let str2 = arr.join('');
          this.importBoxData[index].containercount = +str2;
        }
      },

19.一个下拉刷新的组件婚恋项目里

20.父子组件传值本来是单向的,子组件改变不影响父组件,子组件改变父组件的值 ,model 是父组件 prop传进来的,code是改变之后的值