HTML_CSSJS引入方式变量常量数据类型函数自定义对象DOMDOM操作事件监听!--定义两个input标签类型是buttonvalue属性分别为“点一下1”和“点一下2”--input typebuttonvalue点一下1idbtn1input typebuttonvalue点一下2idbtn2script// 使用document.querySelector获取两个按钮的DOM元素varbtn1document.querySelector(#btn1);varbtn2document.querySelector(#btn2);// 给两个DOM元素添加点击事件监听点击一下控制台输出“点击了按钮1”和“点击了按钮2”btn1.addEventListener(click,(){console.log(点击了按钮1);});btn1.addEventListener(mouseenter,(){console.log(鼠标进入按钮1);});btn2.addEventListener(click,(){console.log(点击了按钮2);});btn2.addEventListener(mouseenter,(){console.log(鼠标进入按钮2);});/script常见事件案例//通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)lettrsdocument.querySelectorAll(tr);trs.forEach(tr{tr.addEventListener(mouseenter,(){tr.style.backgroundColor#f2e2e2;});tr.addEventListener(mouseleave,(){tr.style.backgroundColor#fff;});});JS优化注意使用模块化js需要在引入时将属性定义成moduleVue常用指令v-for案例v-bind根据以上图可以看出头像和职位没有正确显示出来因为在标签内无法使用插值表达式解决办法使用v-bind为标签绑定属性值v-if v-show这里的职位有多个值可以使用v-if或者v-show控制对应的值显示v-modelv-onAjaxAxios