2024年前端最新vue(50)，CSS盒子模型居中方法

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

原理哈！ view 的值被更改了之后，DOM Listeners 监听到输入框的值发生改变之后，会将 Model 中的数据进行更新。更新了之后，在通过 Data Bindings 数据绑定，将更新的Model中的数据渲染到 View 页面。

上面的过程不需要我们开发者手动去进行操作，Vue已经帮我们完成了。我们只需要在页面上遵守Vue 的语法规则就可以自动帮我们实现以上功能。

Vue Devtools 插件

---

Vue Devtools 插件可以让我们在一个更友好的界面中审查和调试Vue项目。

推荐在浏览器上安装 Vue Devtools。

模板数据绑定渲染

---

可生成动态的 HTML 页面，页面中使用嵌入 Vue.js 语法动态生成。

• {{ xxxx }} 双大括号文本绑定

• v-xxx 以 v- 开头的用于标签属性绑定，成为指令

1. {{}}双大括号输出文本内容

{{ msg }}

{{ sorce + 1 }}

v-once一次性插值

---

通过 v-once 指令，只执行一次性的插值，当数据改变的时候，插值处的数据不会被更新。

一次性插值 v-once

{{msg}}

使用 v-once 修饰之后，当 msg 数据发生变化时，Dom元素上的数据也不会在更新。如果以后有相应的需求可以使用这个标签，但是使用的比较少，基本上不会使用，但是以防万一，遇到类似的需求知道有这个东西。

输出HTML指令 v-html

---

允许直接渲染标签，而不是以文本的方式渲染。

1. 如果想要输出HTML数据，双大括号将数据以普通文本的方式输出，为了输出真正的HTML效果，需要使用 v-html 指定。

v-html的形式：

3. 为了防止 XSS 攻击。在此指令上做了安全处理，如果发现输出内容上有script标签的时候，则不渲染。XSS攻击主要是利用了JS脚本注入到网页，读取cookie，读取到了之后发送到黑客的服务器，从而让黑客可以使用你的账号信息做非法操作，还可以进入你的支付，跳转到钓鱼网站。

1. {{}}双大括号输出文本内容

{{ msg }}

{{ sorce + 1 }}

一次性插值 v-once

{{msg}}

指令输出真正的HTML内容 v-html

双大括号的形式：{{contentHtml}}

v-html的形式：

元素绑定指令 v-bind

---

完整格式：

v-bind:元素的属性名=‘xxxx’

缩写格式：

:元素属性名 = ‘xxx’

作用：将数据动态绑定到指定元素属性上面。

事件绑定指令 v-on

---

完整格式：

v-on:事件名称=“事件处理函数名”

缩写格式：

@事件名称 = “事件处理函数名” 注意：@后面没有冒号

作用：用于监听DOM事件。

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容