最后
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
示例的功能也可以使用Vue实例的选项
methods方法实现，methods方法与计算属性区别是计算属性支持缓存，所以对遍历大数组或做大量计算时，计算属性更高效。
示例：使用计算属性实现对字符串数组根据关键字查找功能
字符串关键字：
{{ item }}
// JavaScript代码:
…
el: “#app”,
data: {
items:[…],
wordKey:“”
},
computed: {
findItems:function(){
var _this=this;
//根据条件过滤数组中的数据
return _this.items.filter(function(val){
return val.indexOf(_this.wordKey)!=-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时，就能侦听对象属性的变化。
=========================================================================
下面结合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;
});
}
}
实现删除商品信息功能// JavaScript代码:
var vm = new Vue({
el: “#app”,
data: {…省略代码…},
filters: {…省略代码…},
methods: {…省略代码…
//添加deleteProd()方法
deleteProd: function (index) {
if (confirm(“删除当前商品信息吗？”)) {
// 删除一个数组元素
this.products.splice(index, 1);
}
}
},
computed: {…省略代码…}
});
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给大家分享一些关于HTML的面试题。
能`
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data: {…省略代码…},
filters: {…省略代码…},
methods: {…省略代码…
//添加deleteProd()方法
deleteProd: function (index) {
if (confirm(“删除当前商品信息吗？”)) {
// 删除一个数组元素
this.products.splice(index, 1);
}
}
},
computed: {…省略代码…}
});
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给大家分享一些关于HTML的面试题。
[外链图片转存中…(img-hgdV7k5h-1715067045478)]
[外链图片转存中…(img-Mfw8myVQ-1715067045479)]-
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
