JS&VUE

1.VUE对象拷贝对象

vue中，如果多个组件引用了同一个对象作为数据，那么当其中一个组件改动对象数据时，其他对象的数据也会同步改动。有这种双向绑定的需要的话，那么自然是最好的，但如果不需要这种绑定而希望各组件的对象数据之间相互独立，即是互不关联的对象副本的话，可以用下面的方法解决

obj=JSON.parse(JSON.stringify(this.templateData));

2. element UI 表单校验例子 （小数点后只能输入四位 不能0+数字开头 等等诸多限制）

  <el-form-item label="值" prop="forecastload">
    <el-input v-model="form.load" oninput="
    value=value.replace(/[^\d.]/g,'')
    .replace(/^0\d+|^\./g, '')
    .replace(/\.{2,}/g, '.')
    .replace('.', '$#$')
    .replace(/\./g,'')
    .replace('$#$', '.')
    .replace(/^(\d+)\.(\d\d\d\d).*$/, '$1.$2')" maxlength="10"
              show-word-limit
              placeholder="请输入">
      <template slot="append">MW</template>
    </el-input>
  </el-form-item>

3. 页面刷新获取浏览器高度

    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function() {
        this.changeFixed(this.clientHeight)
      }
    },
    mounted() {
      // 获取浏览器可视区域高度
      this.clientHeight = `${document.documentElement.clientHeight}`          //document.body.clientWidth;
    },
    methods: {
       //动态设置画布地图高度
      changeFixed(clientHeight) {
        this.$refs.mapPage.style.height = clientHeight - 400 + 'px'
      },
      }

4. 自己放的值没有getter setter？这样放试试

this.$set(this.drawPolyArea, 'polygonPaths', [])

5. 去除数组元素

arr.pop() //最后一个
arr.shift() //第一个
arr.slice(2,4) //从第几个到第几个截取
arr.join(".") //转成字符串 用.连接
arr.toString() //转成字符串

6. Vue 页面加载完成钩子

this.$nextTick(()=>{
  
});

7. Element ui Table 加序号

      <el-table-column fixed label="序号" width="50" align="center">
        <template slot-scope="scope">
          <span>{{ (scope.$index + 1) + (queryParams.pageSize * (queryParams.pageNum - 1)) }} </span>
        </template>
      </el-table-column>

8.vue Dom 与数据更新

Vue.js中this.$nextTick()的使用this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中；

9.删除json数组 id为1的元素

arr.splice(arr.findIndex(e => e.id === 1), 1)

10.把 Number 四舍五入为指定小数位数的数字

NumberObject.toFixed(num)

12.ES6 检查数组是否包含

arr.includes('a')