01-基础-表格案例-商品搜索功能分析
表格最终展示的数据v-for遍历->list->依赖了搜索框中的数据
1.给input输入框绑定新数据searchval
2.提供v-for遍历的数组->计算属性中nevlist 数据B依赖了数据A->数据B改成计算属性
02-基础-回顾-filter方法和startsWith()方法的使用 var arr =
0.filter((item)=>{return条件} var bool = “abc”".startsWith("“a”")03-基础-表格案例-用计算属性实现商品搜索功能 数据list依赖了this.searchval ->把list改写成newlist
1.把v-for遍历的数组list->newlist
2.computed增加newlist(){return this.list}
3.return this.list.filter((item)=>{return item.name.startsWith(this.searchval)}}
04-基础-在vue中发送网络请求
1.接口服务器->
2.明确接口规则是什么
3.postman->测试接口
05-基础-json-server工具的使用 作用:把json文件变成接口服务器
1.npm i -g json-server
2.在代码目录下新建了server文件夹-> db.json
3. json-server --watch db.json 端口号冲突json-server --watch --port 3002 db.json 启动接口服务器
06-基础-RESTFul接口规则 json-server工具应用了RESTful接口规则
特点:只需要关心请求方式是什么,而不需要关注于标识url
1.Tpost增加/brands
2. delete删除/brands/1
3.put修改/brands/1
4.get查询/brands
模糊搜索/brands?name_like=关键字
07-基础-postman测试接口 GET /brands/1 200 POST /brands {name:?,date:?} 201
PUT /brands/id {name:?,date:?}
200 DELETE /brands/id 200
08-基础-axios介绍 vue-resource vue插件不推荐 axios 不是vue插件可以在客户端和服务端使用不支持jsonp
npm i jsonp
09-基础.-同顾-isonn 跨域->面试 8种解决
1.jsonp -> script src=""->callback()
1.接口要支持jsonp
2.get ⒉服务端处理
3. iframe src=“xxoo.html” + location.hash
4.设置代理转发
5. iframe + window.name原型->面试
10-基础-axios引入
npm i axios script src=“cdn加载”"
script src ="./axios.min.js"