2024年最新vue从入门到精通之基础篇（一）语法概要(3)，吃透这份阿里P8纯手打前端面经

总结

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

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

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

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

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

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

(7).v-on的使用

• 处理自定义原生事件的,给按钮添加click并让使用变量的样式改变

• 普通使用 v-on:事件名="表达式||函数名"

• 简写方式 @事件名="表达式"

(8).v-model

• 双向数据流（绑定）

• 页面改变影响内存(js)

• 内存(js)改变影响页面

(9).v-bind 和 v-model 的区别?

• input v-model="name"

• 双向数据绑定 页面对于input的value改变，能影响内存中name变量

• 内存js改变name的值，会影响页面重新渲染最新值

• input :value="name"

• 单向数据绑定 内存改变影响页面改变

• v-model: 其的改变影响其他 v-bind: 其的改变不影响其他

• v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

(10).v-for的使用

• 基本语法 v-for="item in arr"

• 对象的操作 v-for="item in obj"

• 如果是数组没有id

• v-for="(item,index) in arr" :class="index"

• 各中v-for的属性顺序(了解)

• 数组 item,index

• 对象 value,key,index

(11).过滤器filter

• filters

• 将数据进行添油加醋的操作

• 过滤器分为两种

• 1:组件内的过滤器(组件内有效)

• 2:全局过滤器(所有组件共享)

局部过滤器的使用

• 先注册,后使用

• 组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据

• 使用方式是 {{ 原有数据 | 过滤器名 }}

• 过滤器fn:

• 声明function(data,argv1,argv2...){}

• 使用{{ 数据 | 过滤器名(参数1,参数2) }}

全局过滤器的使用

• 语法：Vue.component('过滤器的名字',fn)

• 调用：跟局部组件调用方式一样

(12).侦听器watch

• watch 监视单个属性和对象

watch:{

//监视复杂类型,无法监视的原因是因为监视的是对象的地址

// obj:function(newV,oldV) {

// console.log(newV,oldV);

// },

// key是属于data属性的属性名，value是监视后的行为 fn中的参数（新值，旧值）

msg:function (newV,oldV) {

console.log(newV,oldV);

if (newV===‘alex’) {

console.log(‘sb’);

}

},

// 深度监视 ：object ||array

stus:{

deep:true,//深度监视

handler:function (newV,oldV) {

console.log(newV[0].name)

}

}

小结： 基本数据类型 简单监视，复杂数据类型深度监视

(13).计算属性computed

• computed 同时监视多个属性

​ 默认computed只有getter方法

(14).获取DOM元素

• 救命稻草, document.querySelector

• 1: 在template中标识元素 ref=“xxxx”

• 2: 在要获取的时候, this.$refs.xxxx 获取元素

• 创建组件,装载DOM,用户点击按钮

• ref在DOM上获取的是原生DOM对象

• ref在组件上获取的是组件对象

• $el 是拿其DOM

• 这个对象就相当于我们平时玩的this,也可以直接调用函数\

-特殊情况

// 需求：input输入框 获取焦点

var App = {

data: function() {

return {

isShow : false

}

},

template: `

`,

mounted: function() {

this.isShow = true;

console.log(this.$refs.input);

// $nextTick是在DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick 可以在回调中获取到更新后的DOM

this.$nextTick(function() {

// 更新之后的DOM

this.$refs.input.focus();

})

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。