2024年前端最全Vue入门（Vue，2024年最新Web前端社招面试题

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

MVVM ===> M / V / VM

M：model数据模型

V：view视图

VM：ViewModel 视图模型    虚拟dom

V（修改数据） -> M

M（修改数据） -> V

数据是核心

四. 什么是BootCDN？

==============

BootCDN是Bootstrap中文网支持并维护的前端开源项目免费CDN服务，致力于为Bootstrap、jQuery、Angular、Vuejs一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。

官网：https://www.bootcdn.cn/

使用cdn的好处

1.不用担心自己网站访客，在任何时间，任何地点，任何网络运营商，都能快速打开网站，说白了就是把你的资源交给第三方托管，它快你的网站访问就快，并且不需要消耗你的网站流量，提升访问速度。

2.各种服务器虚拟主机带宽等采购成本，包括后期运维成本都会大大减少。

3.给网站直接带来的好处就是：流量，咨询量，客户量，成单量，都会得到大幅度提升。

想想看，一个打开速度很快的网站和一个打开速度很慢的网站，用户的体验是完全不一样的，那么哪些群体使用更广泛呢？

使用cdn的坏处

说完好处也要说说坏处了，对于不使用cdn的网站来说，它崩任他崩，我自坐如松。对于少数资源依赖cdn的网站来说，

可能仅影响体验，比如页面显示、js事件等，但对于严重依赖cdn的网站来说，只能说同归于尽了

注1：类似的网站还有国外公共静态资源库：unpkg

我们非常常用的一些前端框架的镜像，依赖几乎都有

五，Vue入门

=======

1，导入依赖

---

进入cdn官网：https://www.bootcdn.cn/   搜索vue

选择这里我选择使用的是2.6.10版本，单击（一般选择最新版本的前一个版本，稳定性高些）

找到vue.min.js

复制script标签放入HTML文件中，依赖就导入成功了

如果敲代码时没有提示，可以在右下角语法提示库勾选vue.2.x

2,编码

---

①，定义边界

在body标签里

{{msg}}

②，绑定边界

绑定边界的三种写法，推荐使用第一种写法

三种写法输出均如下：

{{msg}}需要放在绑定的边界里

如下放置能运行输出Hello Vue

但放在div外面运行只能输出 {{msg}}

{{msg}}

{{msg}}

六，数据的双向绑定

=========

双向绑定 v-model

虚拟dom一旦监测到某一个节点发生改变，与这个节点相对应的数据也会发生改变

{{msg}}

{{msg}}

{{msg}}

当输入框中的内容改变时，h标签中的内容也随之改变

数据的双向绑定会用在购物车功能中

七，vue的事件

============

事件 v-on:click

写一个按钮定义点击事件，点击后调用getMsg方法，getMsg方法中打印了msg的内容

所有的方法写在methods里面，methods里面也是json对象

{{msg}}

{{msg}}

{{msg}}

运行结果如下，点击按钮会拿到msg的内容，同时当输入框中的内容改变后，再次点击按钮，也能拿到改变后的内容

八，生命周期

=======

钩子函数

beforeCreate: 刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳

create：这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数

beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated

mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了

beforeUpdated:做虚拟dom与真实dom的数据同步

update：数据已经更改完成，dom也重新render完成

beforeDestroy:销毁前

destroyed：销毁

生命周期的代码

number:{{number}}

{{detail()}}