文末
逆水行舟不进则退，所以大家要有危机意识。
同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
数组语法
绑定内联样式style
条件渲染
v-if指令
v-show指令
列表渲染
v-for指令
案例
安装-CDN引入
========
或者：
实例化Vue对象
========
el和data参数
new Vue({
el:“#vue-app”,
data:{
name:“ccy”
}
})
其中，
-
el代表element，指的是要获得的某个根元素节点
-
data用于数据存储
我们可以通过声明式渲染来使用这个name数据：
{{ name }}
效果：可以看到，在vue-app下渲染出一个h1标签，里面的内容正是data里的name
methods方法
methds存储自定义方法，可以用this来获取data中的数据，如this.name：
{{ greeting() }}
{{ name }}
Job:{{job}}
new Vue({
el:“#vue-app”,
data:{
name:“ccy”,
job:“web开发”
},
methods:{
greeting:function(){
return "Good morning " + this.name + “!”
}
}
})
效果：
computed：计算属性
对于任何复杂逻辑（开销大），都应当使用计算属性
计算属性缓存 vs 方法：
计算属性是基于响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值
也就是，当计算属性涉及的变量发生改变时，计算属性的操作才会被执行，否则返回的只是之前计算的结果
例子：
当使用methods时
计算属性computed
<button @click=“a++”>A++
<button @click=“b++”>B++
A - {{a}}
B - {{b}}
Age + A = {{addToA()}}
Age + B = {{addToB()}}
new Vue({
el:“#vue-app”,
data:{
age:18,
a:0,
b:0
},
methods:{
addToA:function(){
console.log(“addToA”);
return this.age+this.a;
},
addToB:function(){
console.log(“addToB”);
return this.age+this.b;
}
}
})
效果：不论点击“A++”还是“B++’，都会触发addToA和addToB函数，打印出"addToA"和"addToB"
如果将addToA和addToB函数移到computed里
Age + A = {{addToA}}
Age + B = {{addToB}}
computed:{
addToA:function(){
console.log(“addToA”);
return this.age+this.a;
},
addToB:function(){
console.log(“addToB”);
return this.age+this.b;
}
}
效果：点击A++，只触发addToA函数；点击B++，只触发addToB函数
属性绑定
v-bind：单向绑定
有时我们需要在标签属性里使用data中定义的变量，但变量包裹在引号之间，会被直接当作字符串，不能发挥出我们想要的效果，如：
/* 实例化Vue对象中的data参数 */
data:{
name:“ccy”,
job:“web开发”,
personalBlog:“https://blog.csdn.net/qq_43523725”
}
效果：引号中的代码均被当作字符串，不能真的实现点击跳转到指定链接的功能
这个时候，我们需要使用v-bind指令，将变量从引号中提取出来，匹配它真正的含义
{{ greeting() }}
Name:{{name}}
Job:{{job}}
个人博客主页
v-html：渲染成html代码
如果我们想在字符串中嵌套一个html标签，需要使用v-html指令，将字符串里的代码解析成html代码
例子：
/* 实例化Vue对象中的data参数 */
data:{
name:“ccy”,
job:“web开发”,
personalBlobTag:“个人博客首页”
}
{{ greeting() }}
Name:{{name}}
Job:{{job}}
效果：变量personalBlobTag被解析成html代码并渲染
v-model：双向绑定
通常一方输入，另一方显示，两者内容始终一致
例子： 将input标签的value值与name变量进行双向绑定：
name的初始值为“ccy”，因此input框默认值为“ccy”；当input输入了其他内容，name也发生改变。label标签负责实时显示name变量
双向绑定
效果：
事件
==
监听事件
基本使用：
-
使用v-on指令；
-
后面跟上事件名和处理函数名，处理函数可以不加括号，但传参时必须加括号
-
v-on指令可以省略成@：
加一岁
减十岁
<button @click=“reduce(1)”>减一岁
例子：
点击事件
不传参：当点击按钮时，触发add / reduce函数，让年龄加1 / 减1
event初识
加一岁
<button @click=“reduce”>减一岁
My age is {{age}}.
new Vue({
el:“#vue-app”,
data:{
age : 18
},
methods:{
add:function(){
this.age ++;
},
reduce:function(){
this.age–;
}
}
})
效果：点击“加一岁”，age就增加一岁；点击“减一岁”，age就减一岁
传参：
event初识
<button @click=“add(1)”>加一岁
<button @click=“add(10)”>加十岁
减一岁
My age is {{age}}.
new Vue({
el:“#vue-app”,
data:{
age : 18
},
methods:{
add:function(value){
this.age +=value;
},
reduce:function(){
this.age–;
}
}
})
效果：
鼠标事件
event初识
{{x}},{{y}}
new Vue({
el:“#vue-app”,
data:{
x:0,
y:0
},
methods:{
showXY:function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
}
})
效果：鼠标在div#show区域移动，显示鼠标相对这个div的XY坐标，初始值为(0,0)
事件修饰符
常用的有：
- 阻止冒泡：.stop
- 取消默认事件：.prevent
- 只有一次生效：.once
- 事件修饰符可以串联使用，如.stop.prevent，功能叠加
例子：
取消a标签的默认事件，即点击a标签后页面没有跳转：
<a @click.prevent href=“https://blog.csdn.net/qq_43523725”> 我的csdn博客主页
按键修饰符
常用的有：
- 匹配回车触发：.enter
- alt+回车触发：.alt.enter
- 匹配空格触发：.space
例子：
event初识
<input type=“text” @keyup.enter=“logName”>
<input type=“text” @keyup.enter=“logAge”>
/* methods部分代码 */
logName:function(){
console.log(“姓名已输入完成！”)
},
logAge:function(){
console.log(“年龄已输入完成！”)
}
效果：
输入第一个input框，键盘敲击回车键后，触发logName函数，控制台输出“姓名已输入完成！”，
输入第二个input框，键盘敲击回车键后，触发logAge函数，控制台输出“年龄已输入完成！”
动态绑定class和style
===============
绑定class
对象语法
使用v-bind指令绑定class，class的值为对象{class名：true / false}，true时该class对应的功能生效，false时该class不生效
例子：
动态绑定CSS样式
new Vue({
el:“#vue-app”,
data:{
changeColor:true
}
})
.show {
width: 100px;
height: 100px;
background-color: red;
border: 2px solid #000;
}
.changeColor{
background-color: royalblue;
}
效果：
div.show原本的背景颜色是红色的（data中changeColor:false）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
绑定class
对象语法
使用v-bind指令绑定class，class的值为对象{class名：true / false}，true时该class对应的功能生效，false时该class不生效
例子：
动态绑定CSS样式
new Vue({
el:“#vue-app”,
data:{
changeColor:true
}
})
.show {
width: 100px;
height: 100px;
background-color: red;
border: 2px solid #000;
}
.changeColor{
background-color: royalblue;
}
效果：
div.show原本的背景颜色是红色的（data中changeColor:false）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-rEt9gvMk-1715721798405)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
