Vue3(2)，我想谈谈关于前端面试那些事，前端外包是如何转正华为的

}).mount(‘#app’);

有时候服务器给客户端返回的数据是带标签的数据，我们客户端拿到之后解析肯定不能如上图那样直接使用 mustache 语法，我们要对其进行处理

{{site}}

1.3.4、v-pre

该指令的作用是用于跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法

一般我们的mustache语法会去data里面找对应的变量然后解析，可是如果我们就想让其显示为 {{message}} ，这个时候需要加 v-pre 属性，如下：

{{message}}

我们给标签增加 v-pre 属性

{{message}}

1.3.5、v-cloak

在实际开发中，我们data里面的数据可能是从服务器端获取来的，如果网络不好获取的比较慢，浏览器可能会直接显示出未编译的Mustache标签。那么页面在渲染时可能会先显示 {{message}} 之后变为 你好Vue3！。这种效果不是我们想要的，我们可以给标签添加 v-cloak 来避免这种效果。

解决办法：

1. 加上v-clock 属性,并加上css。

2. vue解析之前有 v-clock 属性时，让其不显示

3. Vue解析之后没有v-clock 属性，再让其显示

{{message}}

3.3、属性绑定指令

---

3.3.1、v-bind

前面的指令主要作用是将值插入到我们的模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

• 比如动态绑定a元素的 href 属性

• 比如动态绑定img元素的 src 属性

1. 绑定 href、src 用法

在实际开发中，照片img的url值可能也是由服务器端获取，a标签的href值可能也是由服务器端获取的，那么我们如何动态绑定呢？例如我们看下面的例子：

{{message}}

百度

如上图，我们给a标签的href是不能直接写url的，因为它不会解析。这个时候就需要给href前添加v-bind指令了。

{{message}}

百度

语法糖写法如下： :href="url"

{{message}}

百度

1、v-bind绑定class

2. 绑定 class 用法

• 绑定class

我们让 message 的字体颜色为红色，由于是单文件演示，所以将 style 样式写入上方，实际开发中我们的样式可能是由服务器端获取的。例如服务端传给我们的样式是使得文字样式变为红色

{{message}}

例如我们的样式是从服务器端获取的arg1,那么如果我们直接写 class="arg1" 是不会解析为 class=red 的，如下图：

{{message}}

如果我们使用v-bind绑定写为 :class="arg1",那么就会解析为 class="red"

{{message}}

• V-bind 对象语法

• 当服务器端传给我们很多样式的时候，我们可以采用对象语法(class 后面跟的是一个对象)

{{message}}

• v-bind 数组语法(class 后面跟的是一个数组)

{{message}}

如果类过于繁杂，我们可以将其放在一个methods或者computed中

{{message}}

2、v-bind绑定style

我们可以利用 v-bind: style 来绑定一些CSS内联样式

在写CSS属性名的时候，比如 font-size

• 我们可以使用驼峰式：fontSize

• 或短横线分隔(记得用单引号括起来) 'font-size'

---

3. 绑定 style 语法

我们普通的用法如下，这是css的行内式写法：

{{message}}

若我们使用v-bind来绑定 style 样式,使用方式如下：

{{message}}

注意点：

1. 需要外面有大括号

2. 原始的 font-size，中间有-连接符的需要删除连接符并改为驼峰命名法

3. {属性名:属性值}，其中的属性值需要加单引号 ''

如果我们的属性值是由外部服务器传来的，那么我们的属性值可以不用加单引号，示例如下：

{{message}}

如果外部传入的样式较多，那么我们的写法如下：

{{message}}

当然如果样式过于繁杂，我们可以将其放在一个methods或者computed中，写法如下：

{{message}}

注意点：

1. 抽离为methods中时，属性值前需要加 this 关键字，this我们可以理解为实例对象app，我们可以是用 app.message,app.arg1 来打印相关数据

2. 在 v-bind 绑定style样式时，抽离为methods的方法名后面需要加括号，也就是上面代码的 getStyle() 除了事件方法不用加括号,其他都需要加括号

3.3.2、计算属性computed

计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或methods 方法使用。

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示.

例如下代码，我们可以在页面中拼接出： 秦🔥晓

{{firstName + '🔥' + lastName}}

若要拼接的内容过多，我们使用Mustache语法就会比较复杂，我们可以使用函数来拼接：

{{getFullName()}}

当然这些拼接比较简单，如果有更复杂的我们建议放在计算属性computed中，代码如下：

{{fullName}}

注意：

1. 计算属性写法为函数,命名为属性

2. 计算属性在Mustache语法中不需要加括号，因为计算属性本质为属性

3. 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

1、深入使用

假设我们从服务器端返回的是一个数组对象，代码如下：

总积分:{{members[0].score+members[1].score+members[2].score+members[3].score}}

我们会发现常规使用Mustache语法会非常复杂，这个时候我们就需要使用计算属性了：

总积分:{{totalScore}}

2、内部实现

每一个计算属性都包含一个getter和一个setter，只是我们一般基本不用 setter方法

{{fullName}}

3、计算属性和methods的区别

我们可能会考虑这样的一个问题：

• methods 和 computed 看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？

• 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

3.4、事件监听指令

---

在前端开发中，我们经常需要监听点击、拖拽、键盘事件等等，这个时候需要使用 v-on

• 作用：绑定事件监听器

• 缩写：@

| DOM对象 | vue事件绑定 |

| — | — |

| onclick | v-on:click |

| oninput | v-on:input |

| onkeyup | v-on:keyup |

注意：通过 v-on 绑定的事件处理函数，需要 在 methods 节点 中进行声明

3.4.1、v-on

我们来看下v-on的最基本的用法，这里借用官方demo演示：

{{count}}

-

+

注意：

1. v-on绑定的方法名后面可以加括号，也可以不加括号

2. v-on的语法糖为@，v-on:click 我们可以写为 @click

如果我们的事件要传递参数，代码如下：

<button @click=“btn1Click()”>按钮一

<button @click=“btn2Click”>按钮二

在使用 v-on 绑定事件时：

1. 如果事件函数后有括号，如：@click="btn1Click()",则默认什么都不传递

2. 如果事件函数后无括号，如:@click="btn1Click" ,则默认传递事件对象

当然我们也可以传递多个参数,我们可以使用多个参数来接收，也可以使用arguments来接收：

<button @click=“btn1Click(123,‘abc’,true)”>按钮一

当然我们也可以传递动态参数，例如传递data实例中的count：

<button @click=“btn1Click(123,‘abc’,true,count)”>按钮一

当我们带参数又要带有事件参数时,我们要使用 $event：

<button @click=“btn1Click(123,‘abc’,true,count,$event)”>按钮一

3.4.2、v-on修饰符

1、阻止冒泡

对于如下代码，我们点击按钮，会冒泡至父盒子，效果如下图：

<button @click=“btnClick”>点我

在我们之前的做法中，我们是拿到事件对象，使用 event.stopPropagation()来阻止冒泡的，代码如下：

btnClick(event){

event.stopPropagation();

console.log(‘点击了按钮’)

}

在Vue中我们使用的是给 v-on后面加修饰符，@click.stop来阻止冒泡，代码如下：

<button @click.stop=“btnClick”>点我

2、阻止默认事件

如下代码，我们点击提交，会先在控制台打印表单提交,然后默认跳转http://www.jd.com

<input type=“submit” value=“提交” @click=“doSubmit”>

可是如果我们想将表单的数据处理之后再提交，而不是直接提交，这个时候就要阻止表单提交默认事件了,我们之前的做法是先拿到事件对象event，然后event.preventDefault()

doSubmit(event){

// 阻止默认事件

event.preventDefault();

console.log(‘表单提交’)

}

在Vue中我们可以在v-on之后加修饰符，@click.prevent来阻止默认事件

<input type=“submit” value=“提交” @click.prevent=“doSubmit”>

默认事件我们一般处理的还有a标签，我们不希望 a标签进行跳转，而是处理我们其他数据等

<a href=“www.baidu.com” @click.prevent=“aClick”>百度一下

3、响应一次事件

有时候我们希望有些事件只被触发一次，这种情况遇到的很少。要怎么做呢？

<button @click=“btnClick”>按钮

如果我们只想让其响应一次，需要@click.once

<button @click.once=“btnClick”>按钮

4、键盘事件修饰符

我们监听键盘的按键

<input type=“text” @keydown=“getMsg”>

我们通常会监听 enter回车键,写法为@keydown.enter ,意思是只有按下enter回车键才会触发 getMsg 函数

<input type=“text” @keydown.enter=“getMsg”>

3.4.3、小结

• .stop - 调用 event.stopPropagation()

• .prevent - 调用 event.preventDefault()

• .{keyCode|keyAlias} - 只当事件是从特定键触发时才触发回调

• .once - 只触发一次回调

3.5、条件渲染指令

---

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏 。

v - if、v-else-if、v-else

• 这三个指令与JavaScript的条件语句 if、else、else if 类似

• Vue 的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

3.5.1、v-if

今天要下雨

今天不要下雨

v-if的原理：

• v-if 后面的条件为 false时，对应的元素以及子元素不会渲染

• 也就是根本没有对应的标签出现在DOM中

3.5.2、v-if、v-else-if、v-else

我们一般不会使用 v-else-if，因为这样的代码不美观，我们一般想要切换的话使用如下代码：

今天要下雨

今天不要下雨

<button @click=“toggle()”>切换

3.5.3、v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：

• v-if 指令会 动态地创建或移除 DOM 元素 ，从而控制元素在页面上的显示与隐藏

• v-show 指令会动态为元素 添加或移除 style=“display: none;” 样式 ，从而控制元素的显示与隐藏

今天要下雨

今天不要下雨

<button @click=“toggle()”>切换

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

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

分享一些前端面试题以及学习路线给大家

v-if 后面的条件为 false时，对应的元素以及子元素不会渲染

• 也就是根本没有对应的标签出现在DOM中

3.5.2、v-if、v-else-if、v-else

我们一般不会使用 v-else-if，因为这样的代码不美观，我们一般想要切换的话使用如下代码：

今天要下雨

今天不要下雨

<button @click=“toggle()”>切换

3.5.3、v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：

• v-if 指令会 动态地创建或移除 DOM 元素 ，从而控制元素在页面上的显示与隐藏

• v-show 指令会动态为元素 添加或移除 style=“display: none;” 样式 ，从而控制元素的显示与隐藏

今天要下雨

今天不要下雨

<button @click=“toggle()”>切换

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-AefcN5gE-1710845272972)]
[外链图片转存中…(img-eqhIeiaY-1710845272972)]
[外链图片转存中…(img-kItB4tQl-1710845272973)]
[外链图片转存中…(img-oU1Yb1mi-1710845272973)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-tAkJ9842-1710845272973)]

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

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

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-KoXPVX3E-1710845272973)]