Vue(2)，前端工程师面试题，前端开发全套学习

// JavaScript代码:

…

el: “#app”,

data: {

items:[…],

wordKey:“”

},

computed: {

findItems:function(){

var _this=this;

//根据条件过滤数组中的数据

return _this.items.filter(function(val){

return val.indexOf(_this.wordKey)!=-1;

})

}

2、实践练习（待更新）

---

三、侦听属性

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

1、侦听属性创建和使用

---

• Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。当有一些数据需要随着其他数据变动而变动时，就可以使用侦听属性watch。

• watch是一个对象，其中watch对象的属性是需要侦听的目标，一般是data中的某个数据项，而watch对象的属性值是一个函数，是被侦听的数据项发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是更新后的值。

示例：使用watch侦听添加商品信息输入框，根据值的变化显示不同提示效果

商品信息

商品标题：

商品标题输入不能为空！

商品单价：

…

商品数量：

…

{{ title }}》商品购买了{{ amount }}本,总计¥{{ total }}元

// JavaScript代码:

var vm = new Vue({

el: “#app”,

data: {

title:“JavaScript权威指南”,

price:“40”,

amount:“10”,

total:“0”,

titleValid:true,

priceValid:true,

amountValid:true

},

watch: {

title: function(newVal, oldVal){ … },

price: function(newVal, oldVal){ … },

amount: function(newVal, oldVal){ … },

},

})

watch选项参数中包含侦听了商品标题（title）、商品价格（price）和商品数量（amount）的值的变化的函数

watch的一个特点是，最初绑定的时候是不会执行的，要等到商品单价和商品数量改变时才执行监听计算

如果想要一开始让最初绑定的时候就执行，就需要watch中使用handler方法和immediate属性：

handler()方法：其值是一个回调函数。即监听到变化时应该执行的函数。

immediate属性：其值是true或false；确认是否以当前的初始值执行handler的函数。

示例：修改上一个示例的watch中的price()如下代码

// JavaScript代码:

price:{

// 之前写的watch的函数，其实默认写的就是handler

handler:function(newVal, oldVal){

…

},

// 代表如果在wacth里声明了price之后，就会立即先去执行里面的handler方法

immediate:true

}

• 如果模型数据是一个对象时，Vue默认并不能侦听对象属性的变化，watch里面还有一个deep属性，默认值是false，代表是否深度侦听需要使用。

• 当deep属性为ture时，就能侦听对象属性的变化。

2、实践练习（待更新）

---

四、综合案例

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

1、商品信息管理

---

下面结合Vue的基础知识来实现商品信息的管理功能，其中包含包含以下功能：

• 添加商品信息。

• 显示全部商品信息列表。

• 根据商品标题查询商品信息列表。

• 删除商品信息。

本节只使用JavaScript、CSS和HTML实现前端部分，不涉及服务器端功能和数据库部分。

实现添加商品信息功能

• 创建视图

• 定义模型

• 定义添加方法

// JavaScript代码:

var vm = new Vue({

el: “#app”,

data: {

…省略代码…

},

methods: {

createProd: function () {

this.products.push(this.newProduct);

// 添加完newProduct对象后，重置newProduct对象

this.newProduct = {

name: “”,

price: 0,

category: “手机/数码”,

}

}

}

});

实现显示全部商品信息列表

名称 价格 类别 删除 {{ prod.name }} {{ prod.price | priceFormat }} {{ prod.category }}

// JavaScript代码:

var vm = new Vue({

el: “#app”,

data: {

…省略代码…

},

// 为了正确显示价格采用过滤器进行格式处理

methods: {

…省略代码…

},

filters: {

priceFormat: function (val) { // 创建价格格式过滤器

return “￥” + parseInt(val).toFixed(2) + “元”;

}

}

});

实现根据商品标题查询商品信息列表

…省略代码…

查询关键字:

…省略代码…

// JavaScript代码:

computed: {

findProdList:function(){

var _this=this;

return _this.products.filter(function(prod){

return prod.name.indexOf(_this.key)!=-1;

});

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

总结*:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；