企业官网建设流程全解析

HTML_CSS

JS

引入方式

变量&&常量

数据类型

函数

自定义对象

DOM

DOM操作

事件监听

<!--定义两个input标签，类型是button，value属性分别为“点一下1”和“点一下2”--><input type="button"value="点一下1"id="btn1"><input type="button"value="点一下2"id="btn2"><script>// 使用document.querySelector获取两个按钮的DOM元素varbtn1=document.querySelector("#btn1");varbtn2=document.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新版本的语法)

lettrs=document.querySelectorAll("tr");trs.forEach(tr=>{tr.addEventListener("mouseenter",()=>{tr.style.backgroundColor="#f2e2e2";});tr.addEventListener("mouseleave",()=>{tr.style.backgroundColor="#fff";});});

JS优化

注意：使用模块化js需要在引入时将属性定义成"module"

Vue

常用指令

v-for

案例

v-bind

根据以上图可以看出头像和职位没有正确显示出来，因为在标签内无法使用插值表达式
解决办法：使用v-bind为标签绑定属性值

v-if && v-show

这里的职位有多个值，可以使用v-if或者v-show控制对应的值显示

v-model

v-on

Ajax

Axios