web前端开发学习笔记

note:

1. ref=“form” (ref = ‘aa’)

refs = [‘form’, ‘aa’]
this.$refs.form (或document.getElementById(“”)) ----获取元素或子组件的属性
父组件通过 this.$refs.terminal.tab获取子组件的属性，做进一步操作（terminal为子组件）。

2. $attrs 表示父传子的属性，子没有接收，但已存在 孙可以继承使用

v-bind=“$attrs”

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs"传入内部组件——在创建更高层次的组件时非常有用

async getAsets() {
  try {
    const where = {
      id: this.$attrs.id,
      ip: this.ip
    }
    const res = await assets(where)
    this.assets = res
  } catch (err) {
    this.assets = []
    throw new Error(err)
  }
}

3. localStorage

参考：cookie、sessionStorage和localStorage的区别
JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了
操作的方式：
存：
var obj = {“name”:“xiaoming”,“age”:“16”}
localStorage.setItem(“userInfo”,JSON.stringify(obj));
取：
var user = JSON.parse(localStorage.getItem(“userInfo”))
删除：
localStorage.remove("userInfo);
清空：
localStorage.clear();
注：setItem (key, value) ——保存数据，以键值对的方式储存信息。
getItem (key) ——获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key

4.vue动态绑定class的最常用几种方式

（1）绑定单个class

<div :class="{'active':isActive}"></div>
------------------------------------------
data() {
  return {
    isActive: true
  };
}
-----------------
<div class="active"></div>   // 渲染结果

（2）若要绑定多个class，需要逗号隔开就行：（这里的activeTwo加不加引号都可以，也一样都能渲染，如下）:

<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
-----------------------------------------------------------------------------------------
data() {
  return {
    isActive: true,
    hasError: true
  };
}
-----------------------------------------------------------------------------------------
<div class="activeOne activeTwo activeThree"></div>   // 渲染结果

//按钮启用/禁用
<div
  :class="{ 'stops': actionsOptions.stop.disabled, 'stop': !actionsOptions.stop.disabled }"
></div>

5.用CSS画图标

（1）简单例子–停止按钮：

.stop {
  width: 20px;
  height: 20px;
  background-color: #1976d2;
  border-radius: 100%;
  outline: 4.6px solid white;  // div的轮廓
  outline-offset: -17px;  // 轮廓与边框的距离
  cursor: pointer;   // 光标的类型（形状）--pointer: 小手
}

注1：用CSS绘制图标----outline-offset----cursor
注2：图标库-material-design-icons-iconfont

6.addEventListener()与removeEventListener()

vue中给window添加和移除resize事件：

methods: {
	screenSize(){
	//窗口大小改变时的操作
	}
},
mounted() {
  window.addEventListener('resize', this.screenSize, false)   //注意this.screenSize不带括号
},
beforeDestroy() {
  window.removeEventListener('resize', this.screenSize, false)
}

注：
1.添加和移除resize事件
2.vue中在mounted中window.onresize不生效解决方法

7.vue动态绑定style–三元运算

<v-row
  :style="{'max-width': isActive ? 'calc(55% + 24px)' : 'calc(100% + 24px)'}"
  align="center"
  justify="center"
>
--------------------------------------------------------------------------------
data: () => ({
  isActive: false
})