JS30 01鼓 自己记录一些知识点

JS30 01 🥁

这里会拿JavaScript原生语法和Vue框架中的语法做一个对比，以此对JavaScript和Vue的用法加深记忆。

鼓示例主要是练习了对键盘事件的响应以及动态注入样式类，同时对null元素加以判断还有对audio标签加以使用的方法，现在将其中的用法书写如下。

键盘事件响应

• 在原生JavaScript中，通过对window元素添加事件监听器，监听键盘按下和抬起的事件。

  window.addEventListener('option', callback)
  

  键盘按下和抬起事件的option分别为keydown 和 keyup。

  在回调中，会传入event事件，在其中有按键的代码之类的，以之判断相关的按键信息。相关的信息可以访问keycode.info了解更多。

• 在Vue中，可以利用@keyup.'keyname'的方法对相关按键按下抬起的事件进行监听，如果需要组合式按键，可以利用链式对相关按键事件进行指定。

动态注入样式类

• 利用dom选择器获取到元素

  const element = document.querySelector(`options`)
  

  之后，对元素中的classList属性进行添加和删除。

  // 添加类
  element.classList.add('class-name')
  // 删除类
  element.classList.remove('class-name')
  

• 在Vue中，给元素的class属性绑定一个变量，然后对变量进行修改

  <element :class="className"/>
  

  之后在函数中对相关的className进行操作，或者直接将className写成一个表达式即可。

判断空值

JavaScript中有两种空值，一种是null一种是undifined。在之前的业务逻辑中，如果不对这两个类型进行判断而贸然使用的话，会造成意想不到的错误。

对于空值判断的方法很简单，只需要这样：

// someVariable's type is null or undifined
if (someVariable) {
	// do something
}

对audio标签进行控制

虽然在此之前没有用过audio标签，但是在此处了解下还是好。

标签HTML5音乐播放器 直接看这篇文章就够了，摸鱼就摸鱼，我最爱摸鱼了（逃