一些Vue小技巧

关于 vue.filters

可以写在单个组件内，也可以单独写全局的然后加到 main.js 中，像是日期格式，数字格式就可以写在全局

~~和！！

~是按位取反运算，~~是取反两次。 ~~的作用是去掉小数部分，因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数。 ！一个！是取反，！！两个再取反，就是强制转换成 Boolen 类型

关于 markdown 语法

如果要使用 Markdown 保留字，可以使用 Unicode 字符。如上面的~~,两边加~~会导致形成文字之间产生删除线，把~~换成~~就可以了。Unicode 在线转义

js 和 css 两用样式

template 中需要动态定义样式，通常做法：

<template>
  <div :style="{ color: textColor }">Text</div>
</template>

<script>
  export default {
    data() {
      return {
        textColor: "#ff5000",
      }
    },
  }
</script>

高端做法：

• 定义 scss 文件

$menuActiveText: #409eff;

:export {
  menuActiveText: $menuActiveText;
}

• 在 js 中引用：
  • 使用 import 引用 scss 文件
  • 定义 computed 将 styles 对象变成响应式对象
  • 在 template 中使用 styles 对象

<template>
  <div :style="{ color: styles.menuActiveText }">Text</div>
</template>

<script>
  import styles from "@/styles/variables.scss"

  export default {
    computed: {
      styles() {
        return styles
      },
    },
  }
</script>

连续解构

从数组第一个对象元素中提取某个属性，比如：err 对象中包含一个 errors 数组，errors 数组每一个对象都包含一个 msg 属性

err = {
  errors: [
    {
      msg: "this is a message",
    },
  ],
}

快速的提取方法为：

const [{ msg }] = err.errors

如果不用解构写法为：

const msg = err.errors[0].msg

真不错！

vm.$nextTick

vue 更新 DOM 是异步的，如果你想基于更新后的 DOM 状态来做点什么，为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。详情参见:异步更新队列

columns 分页

利用 columns 实现小说分页效果，每一列的高度与父元素相同

绝对定位居中

.demo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

使页面的左右边距相同

可以父元素加 padding：15px, 子元素加 margin：15px， 这样所有间隙都是 30px。

math.floor 和 | 0

;(Math.floor(10 / 3) === 10 / 3) | 0