汝州|前端人必备的Vue小技巧|建议收藏( 二 ) 律师

  // 获取被点击的元素
  const clickedEl = e.target;

  // `el` 是你正在检测外部点击的元素
  if (el.contains(clickedEl)) {
    // 单击“el”内部
   else {
    // 在`el`之外点击

);
七、在 Vue 中循环一个范围
v-for指令允许我们遍历一个数组，但它也让我们遍历一个范围：

<template>
  <ul>
    <li v-for=\"n in 5\">项目#{{ n </li>
  </ul>
</template>

显示效果：

项目#1
项目#2
项目#3
项目#4
项目#5

当我们使用v-for范围时，它将从 1 开始并以我们指定的数字结束。
八、覆盖子组件的样式
Scoped CSS 比较容易保持整洁，并且不会意外地将样式渗入应用程序的其他部分。但有时你需要覆盖子组件的样式，并突破该范围。 Vue 有一个deep专门用于此的选择器（如果你使用的是 SCSS 之类的 CSS 预处理器，则可能需要改用/deep/）。

<style scoped>
/* 覆盖子组件的 CSS ，同时保持样式范围*/
.my-component >>> .child-component {
font-size: 24px;

</style>

九、观察slot的变化
有时我们需要知道slot内的内容什么时候发生了变化，而 Vue 没有内置的方法来检测这一点，这种时候使用突变观察器是一种非常简洁的方法。

export default {
  mounted() {
    // 当事情发生变化时调用`update`
    const observer = new MutationObserver(this.update);

    // 观察这个组件的变化
    observer.observe(this.$el {
      childList: true
      subtree: true
    );

;

十、单作用域 slot 的简写
Scoped slot 比较有趣，但为了使用它们，你也必须使用很多template标签。为了避免使用很多template标签，我们可以使用单个作用域slot ，会更加地简单直接。

<DataTable #header=\"tableAttributes\">
<TableHeader v-bind=\"tableAttributes\" />
</DataTable>

掌握并且熟练运用上面这十个Vue使用中的小技巧，不仅能够帮助你更快更好地完成工作，还能让你的代码看起来更加专业简洁。

【汝州|前端人必备的Vue小技巧|建议收藏】最后，在我们的工作中脚踏实地是非常重要的，但是找对方法、掌握技巧也同样重要。我们在工作时不能只是一味地去想应该怎么完成工作，更应该去思考怎样既能完成工作，又能让我们的工作变得更加轻松。成功者和普通人的区别也往往体现在此。