2024年Web前端最新Vue（四）绑定样式、自定义指令(1)，web页面渲染过程

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包

data:{

变量名:“css属性名1: 属性值1; css属性名2:属性值2;…”

}

//运行时vue把变量的字符串值，直接放到元素的style属性后，作为元素的内联样式

//该方法极其不便于只修改其中某一个css属性值，几乎不用

（2） 使用对象语法灵活绑定每个css属性值

<元素 :style=“{ css属性名1:变量1, css属性名2:变量2 , … }”

data:{

变量1: 属性值1,

变量2: 属性值2

}

//此方法极其便于修改其中某一个css属性值

//缺点是如果多个元素刚好都需要绑定同一个css属性，则属性值的变量名易冲突

举例：绑定一架飞机的位置；

效果如下：

（3）将对象写在data中的绑定方式

<元素1 :style=“变量1”>

<元素2 :style=“变量2”>

data:{

变量1:{

css属性1:值1,

css属性2:值2

},

变量2:{

css属性1:值1,

css属性2:值2

},

}

//既便于修改任意一个元素的css属性，又避免多个元素的css属性发生冲突

如果有固定不变的css属性，就写在不带:的style里；而变化的css属性写在带:的style里。运行时，两个style是合并发挥作用的。不会发生覆盖。

<元素 style=“固定不变的css属性” :style=“可能变化的css属性”>

举例： 绑定两架飞机的位置；

2.绑定class

（1）将class属性看做一个普通的字符串变量绑定

<元素 :class=“变量名”

data:{

变量名:" class名1 class名2 class名3 …"

}

//该方法极不便于只修改其中某一个class

（2） 将class属性看做一个对象来绑定

<元素 :class=“{ class名1: 变量1, class名2:变量2,… }”

data:{

变量1: true或false, //开关，true表示启用这个class

变量2: true或false

}

//该方法便于修改某一个class

//缺点是如果多个元素都绑定同一种class，但是启用或不启用的状态不同，class的变量名易冲突

举例：实现手机号带样式的验证；

手机号:

{{msg}}

效果如下：

（3）将对象放进data中定义

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包