Vue.js入门（13）

序言

$nextTick是什么？

解决什么问题一、数据更新、视图没有更新

怎么用

this.$nextTick(()=>{
   //把要执行的方法用this.$nextTick包起来
})

$nextTick就是用来知道什么时候DOM更新完成的

vue如何获取dom

先给标签设置一个ref值，再通过this.$refs.domName获取，例如：

<div ref="test"></div>

const dom = this.$refs.test

addEventListener、removeEventListener

mounted() {
    // 注册滚动事件，在滚动的时候如果cascader打开，就关闭它
    const ele = document.getElementsByClassName('main')[0];
    if (ele) {
      ele.addEventListener('scroll', this.listenScroll, {
        passive: true,
      });
    }
  },
  beforeDestroy() {
    // 移除滚动事件监听
    const ele = document.getElementsByClassName('main')[0];
    if (ele) {
      ele.removeEventListener('scroll', this.listenScroll, {
        passive: true,
      });
    }
  },

vue中的ref和$refs

ref有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

https://www.cnblogs.com/xumqfaith/p/7743387.html

 <div class="search-form clearfix" @keydown="bindEnter($event)">

// 绑定enter事件

    bindEnter(e) {

      this.$enterSearch(e, this.search);

    }

cookie

 if (this.$cookies.get("groupId")) {

        this.$cookies.remove("groupId");

      }

 _this.$cookies.set("groupId", groupId, 31 * 24 * 60 * 60);

              _this.$cookies.set("hotelId", hotelId, 31 * 24 * 60 * 60)

 

// 保存酒店名称

            const localSrorage = window.localStorage;

            localSrorage.hotelName = hotelName;

filters

 <td>{{ item.star | format_star }}</td>

filters: {
    format_star(str) {
      switch (str) {
        case "FiveStar":
          return "五星";
          break;
        case "QuasiFiveStar":
          return "准五星";
          break;
        case "FourStar":
          return "四星";
          break;
        case "QuasiFourStar":
          return "准四星";
          break;
        case "ThreeStar":
          return "三星";
          break;
        case "QuasiThreeStar":
          return "准三星";
          break;
        case "Economical":
          return "经济型";
          break;
        default:
          return "请选择";
      }
    }

async

async function searchPermissions() {

scope

const { row } = scope;

Vue.nextTick()用于延迟执行一段代码。

vue 中的const {XXX } =this 的作用效果

样例1：
const { xxx } = this.state;
上面的写法是es6的写法，其实就相当于：

const xxx = this.state.xxx
样例2：

const {comment,index,deleteComment} = this
上面的这句话是一个简写，最终的含义相当于
const comment = this.comment
const index = this.index
const deleteComment = this.deleteComment

资料