2024年Web前端最全Vue（一）vue概述与用法、绑定语法、vue指令(2)，字节面试官不想录取的暗示

总结

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

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

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

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

资料截图 ：

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

data: {

n: 0

},

//3.2 创建一个methods:{}来保存界面中所需的所有事件处理函数

methods: {

add() {

this.n++;

},

minus() {

if (this.n > 0) {

this.n–;

}

}

}

})

二、MVVM

以往 的前端代码分为三个部分：HTML(专门定义网页的内容和结构)、CSS(专门为网页添加样式)、js(专门操作网页中的内容，为页面添加交互行为)。

但是HTML和CSS功能太弱，即使很小的修改，都要通过JS来操作，导致js中存在大量重复和冗余的工作。所以为了解决此问题，就需要用到MVVM设计模式。

1.MVVM设计模式

MVVM设计模式是对前端三大代码的重新划分，包括三部分；

（1）界面(View)：包含以前的HTML+CSS，让HTML也支持变量、判断、循环；

（2）模型对象(Model)：专门保存页面中所需的变量和函数的特殊对象，

data:{ }  专门保存界面中所需的所有变量

methods:{ } 专门保存界面中所需的所有函数

（3）视图模型(ViewModel)：专门负责将模型对象中的变量和函数，自动运送到界面中指定位置的特殊对象，自动将程序中的变量和函数运送到界面中所需的位置。并且还能自动保持界面显示与程序中的数据同步。

2.vue的绑定原理（vue框架如何实现MVVM设计模式）

（1）访问器属性

a.new Vue()将data:{ }引入到new Vue()中时，先将data对象及其内部的内容全部隐藏；

b.new Vue()自动为data中每个变量创建访问器属性，监视对每个变量的修改操作，访问器属性不再隶属于data对象，而是直接隶属于new Vue()；

c.只要在程序中修改变量，都会自动调用访问器属性的set()函数；

d.set()函数中提前安插了一个通知函数()，可通知外部哪个变量值发生了变化；

e.methods中所有的函数，进入new Vue()后，methods对象就被打散，原methods中所有函数直接隶属于new Vue()对象；

f.methods中的函数和data中的变量，最终会平级保存，都直接隶属于new Vue()，methods中的函数，想操作data中的变量，必须加this.。

（2）虚拟DOM树

是专门保存界面中所有可能发生变化的元素的简化版DOM树；在创建完data和methods之后，根据el属性值的选择器所指的元素，去扫描界面中指定区域的元素，一边扫描真实DOM树，一边创建虚拟DOM树，只保存可能发生变化的元素。

a.只要在程序中修改了变量值，就会自动触发访问器属性的set()，自动执行set()中的通知函数，通知函数()通知虚拟DOM树哪个变量发生了变化；

b.虚拟DOM树扫描自己内部保存的所有可能发生变化的元素，只找出受本次变量修改影响的元素；

c.可以用提前封装好的DOM操作，将变量的新值，自动修改回页面中显示。

小结（高频笔试面试）：

· vue绑定原理：访问器属性、虚拟DOM树；

· 虚拟DOM树四大优点：

（1）内容少体积小：只保存可能变化的个别元素；

（2）遍历查找快：保存的元素少，所以每次遍历查找受影响的元素时比遍历原始DOM树快；

（3）修改效率高：每次只修改受影响的个别元素，不受影响的元素是不改变；

（4）避免重复编码：提前封装了DOM的增删改查+事件绑定操作。

三、绑定语法

绑定语法是 在界面中标记可能发生变化的元素内容的特殊语法，只要发现一个元素的内容可能随程序自动改变时，都要用绑定语法来标记。

<元素>xxxx{{自定义变量名}}xxx</元素>

{{ }}的原理和模板字符串中的${ }完全一样，可以放一切有返回值的合法的js变量或表达式如变量、三目、算术计算、访问数组元素、创建对象、调用函数；不能放分支、循环以及没有返回值的js表达式。

举例：使用{{}}显示隐藏不同数据；

Welcome:{{uname}}

性别:{{sex == 1?"男":"女"}}

小计:¥{{price*count.toFixed(2)}}

下单时间:{{new Date(orderTime).toLocaleString()}}

星期{{arr[day]}}

效果如下：

    

四、指令

专门给HTML元素添加新功能的特殊HTML属性就是指令，含13种。

1.v-bind

如果元素的属性值可能随程序自动变化，则不能用{{ }}绑定，要用v-bind指令代替{{ }}绑定属性值。格式如下：

<元素 v-bind:属性名=“js变量或表达式”>

//简写

<元素 :属性名=“js变量或表达式”>

//注意：

//加了: 之后就不需要{{}}了

//=右边的""就起到了{{}}的作用

原理：new Vue()在扫描页面时，只要发现 : 开头的属性，都会先自动计算=右边的js变量或表达式的值，然后将变量或表达式的值作为当前属性的属性值；

举例：根据pm2.5数值，显示不同表情；

<img :src="

pm25<100 ? ‘img/1.png’:

pm25<200 ? ‘img/2.png’:

pm25<300 ? ‘img/3.png’:

‘img/4.png’

">

效果如下：

2.v-show

专门控制一个元素显示隐藏的特殊指令，用程序控制一个元素的显示或隐藏时，都用v-show。

<元素 v-show=“true/false”>

原理：只要new Vue()扫描到v-show，就会先计算=右边的判断条件的值，如果=右边的判断条件值为true，则当前元素默认正常显示，如果=右边的判断条件值为false，则v-show自动被翻译为style=“display:none”，表示当前元素隐藏。

举例：打开和关闭对话框；

<button @click=“show”>click me

<a @click=“hide” href=“javascript:;”>×

效果如下：对话框点击按钮显示，点击×隐藏。

3.v-if, v-else

专门控制两个元素二选一显示，当要在两个元素之间选择一个时，就用v-if和v-else。

<元素1 v-if=“条件1”>

<元素2 v-else>

//注意：

//else后无序再写等于

//元素1和2之间不能再有其他元素

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

前端视频资料：

v-else**

专门控制两个元素二选一显示，当要在两个元素之间选择一个时，就用v-if和v-else。

<元素1 v-if=“条件1”>

<元素2 v-else>

//注意：

//else后无序再写等于

//元素1和2之间不能再有其他元素

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

[外链图片转存中…(img-rFkhzIDG-1715386733968)]

前端视频资料：
[外链图片转存中…(img-lTml2rW4-1715386733969)]