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
Vue.js入门(13)
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,
      });
    }
  },
View Code

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>
Vue.js入门(13)
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 "请选择";
      }
    }
View Code

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

资料

Vue.js入门(13)

上一篇:常用的CSS命名规则


下一篇:Ajax取消请求和重复发送请求