Vue（一）vue概述与用法、绑定语法、vue指令

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之间不能再有其他元素

原理：当new Vue()扫描到v-if时，先计算=右边条件变量或表达式的值，如果v-if等号右边的条件为true，则new Vue()会保留v-if所在元素，删除v-else所在元素；如果v-if等号右边的条件为false，则new Vue()会先删除v-if所在的元素，保留v-else所在的元素。

举例：切换用户登录状态；

Welcome dingding 注销

<a @click=“login” href=“javascript:;”>登录

注册

效果如下：

4.v-else-if

和v-if和v-else一起控制多个元素多选一显示隐藏，只要控制多个元素选择一个显示隐藏时，都用v-else-if。

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

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

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

… …

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。