Web前端最全前端框架学习之Vue 1(2)，面试心得体会800字范文

后话

---

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

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

v-once只编译一次

只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
这可以用于优化更新性能。v-once不具有响应式功能。
绑定的数据被改变时，也不会动态更新数据（静态html）。

This will never change: {{msg}}

comment

{{msg}}

• {{i}}

##### 9.双向数据绑定


什么是双向数据绑定：

model<==>view

双向数据绑定指令 **v-model**

Hello,{{username}}

MVVM设计思想（Vue核心）

M:model
V:view
VM:view-model 扮演了中介的角色
view ----Dom Listeners---->model
model----Data Bindings---->view
Data Bindings(通过v-html v-text等指令实现)

##### 10.事件绑定


Vue如何处理事件

v-on的指令用法

v-on的简写形式
<button @click=“doThis”>

调用方式：
click后面可以跟函数名或者调用函数
如:
<button @click=“doThis()”>

时间参数传递：
<button @click="doThis(’Hi‘,$event)"></button>可以通过$event 获取标签属性
1.如果事件直接绑定函数名称，则默认携带$event对象作为事件函数的第一个参数2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行显式传递，并且对象名称为固定的$event

##### 11.事件修饰符


**.stop** 阻止冒泡

何为冒泡：即点击子元素时会触发父元素的点击事件
阻止冒泡：
event.stopPropagation(); 传统方式

**.prevent** 阻止默认行为

event.preventDefault(); 传统方式

**.self**  
 即事件不是从内部元素触发的，只有当前元素触发才起作用。

**.stop.prevent**

修饰符可以串联，即阻止冒泡，也阻止默认行为

其他组合：

注意：

使用修饰符时，顺序很重要；
相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.14新增：

2.3.0 新增  
 Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

注意：

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

**按键修饰符**  
 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
也可以直接通过keycode绑定按键

##### 12.属性绑定


vue如何动态处理属性：

v-bind指令用法：

缩写形式

v-model底层实现原理分析：

等价于

##### 13.样式绑定


**class样式处理：**  
 对象语法：

css
.active{
width:10px;
border 1px solid red;
height:10px;
}

只能控制显示或者不显示 data{ isActive:true }

数组语法：

data:{ activeClass:’active', errorClass:'error' } 可以修改属性值来切换类名。

注意：

1.对象绑定和数组绑定可以结合使用

2.class绑定的值可以简化操作

data={ arrClasses:[activeClass,errorClass，{test:isTest}] } 修改arrClasses的值可以动态修改样式

3.默认的class如何处理

默认的class会保留

**style样式处理**

data={
borderStyle:‘1px solid red’,
widthStyle:‘100px’
}
Style样式处理同时支持对象语法和数组语法

##### 14.分支循环结构和循环结构


分支结构：

v-if
v-else-if
v-else
v-if 隐藏时标签不会被渲染出来 只控制是否渲染（生成）
v-show
v-show :display:none 标签会被渲染出来 只控制是否显示
频繁隐藏或显示用v-show
不频繁时用v-if

循环结构：  
 **v-for遍历数组：**

{{item}}

{{item}}-----------{{index}}

key的作用：帮助vue区分不同的元素，从而提高性能。

{{item.username}}-----------{{index}}

该key绑定的值重复时，数据也是会被渲染的。例如当数组中有两条id一样的数据时，渲染到页面时并不会出现只显示一条数据的清理。 { id:1, username:'Lvan' }, { id:1, username:'Lvaner' },

**v-for 遍历对象**

val 值 key 键 index 索引

v-if 和v-for结合使用 筛选作用

##### 15.Vue常用特性


**表单操作**

input --v-model 绑定变量
radio --v-model 绑定变量 value区分
checkbox --v-model 绑定数组 value区分
select --v-model 单选绑定变量 多选绑定数组 多选是需要添加multiple属性
textarea --v-model 绑定变量

**表单域修饰符**

**计算属性**  
 表达式的计算逻辑复杂时，使用计算属性可以使得模板内容更加简洁

computed:{
computedMethod:function{
return this.username.split(‘’).reverse().join(‘’)
}
}

**计算属性和方法的区别**

计算属性时基于的他们的依赖进行缓存的 、、执行过后存在结果缓存，再次访问时会访问上次的结果。比较耗时的计算时可以节省性能、
方法不存在缓存、、调一次，运算一次。
计算属性依赖于计算的数据，数据发生变化，计算属性的结果也会发生变化。

##### 16.Vue自定义指令


为何需要自定义指令？内置指令不满足需求  
 自定义指令的语法规则（获取元素的焦点）

Vue.directives(‘focus’{
inserted:function(el){
el.focus(); //el指定所绑定的元素
}
})
自定义指令使用：

带参数：
Vue.directives(‘focus’{
inserted:function(el,binding){ //binding
console.log(binding.value)
}
})

局部指令：在单个组件内部声明
directives:{
focus:{ //指令名称
inserted:function(el){
el.focus()
}
}
}
directives和methods平级

##### 17.侦听器


数据的变化会触发对应存在依赖数据的方法发生变化。  
 使用场景：数据变化时执行异步或开销较大的操作

data{
firstName:‘’,
lastName:‘’,
fullName:‘’
}

watch:{
firstName:function(val){
this.fullName=val+’ ‘+this.lastName;
},
secondName:function(val){
this.fullName=this.firstName+’ '+val;
}
}
侦听器适合完成计算量比较大的场景，这时计算属性所不能代替的。
侦听器属性名称和方法名称必须一致。

侦听器适用场景：
在输入注册名称时，适用侦听器测试用户名是否可以用。

### JavaScript 和 ES6



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)


**[如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**