Vue-基础-03-重点
Vue-基础-day03-重点
01-基础-实例选项-计算属性-基本使用
-
场景:b依赖a b就是computed a依然是data
-
计算属性是选项computed:{计算属性:值}
-
值: 带retrun的函数
-
b的用法和data中的数据 用法一样
-
特点: 如果b依赖了a , a变化->b变化
computed: { // 计算属性的名字b:值(带return的函数) // b: function() { // return this.a + 1; // } // 特点: // 如果b依赖a,此时,当a变化时 b会变化 b() { return this.a + 1; } },
02-基础-实例选项-计算属性和 methods 区别
- 使用 methods fn() computed:{{fn2}}
- 如果计算属性fn2没有依赖data,此时 会把第一次使用的return的结果 缓存
03-基础-表格案例-商品搜索功能分析
效果分析-> 表格展示数据的多少依赖了搜索框中的数据关键字->v-for绑定的数据list依赖了搜索框的v-model绑定的数据searchVal->数据list依赖了searchVal->把list改写计算属性啊
- 新增选项computed:{newlist(){return this.list}}
- 视图 使用list的位置改成newlist
04-基础-回顾-filter 方法和 startsWith 方法
- filter 筛选数组
- startsWith() 返回bool
注意: ("") 返回true
05-基础-表格案例-用计算属性实现商品搜索功能
computed: {
newlist() {
// 筛选this.list
// 遍历this.list数组 取每个元素v.name
// 判断v.name是否以this.searchVal开头 如果条件成立 -> 把符合条件的元素放在新数组保存
// 1. 遍历 foreach map filter 等
// 2. 条件 (筛选)
// 3. 有返回值 返回一个新数组
// ES6 箭头函数 -> 推荐的使用场景:当看到匿名函数->改成箭头函数
return this.list.filter((v) => {
// v.name是否以this.searchVal开头
return v.name.startsWith(this.searchVal)
});
}
},
ES6 箭头函数的推荐使用场景: 形参是匿名函数时 -> 改成()=>{}
- 传统函数 this -> window/实例对象/定时器window.setTimeout()->方法的调用者
- 箭头函数 this(没有自己的this) -> 向上一级找->该函数定义/声明生效的位置->定义位置的作用域中的this就是箭头函数里面的this
06-基础-在 vue 中发送网络请求
- 服务器->json-server工具
- 接口规则/规范
关于axios
- 不是vue插件
- 浏览器端/node 都可以使用
- 不支持jsonp (使用jsonp)
07-基础-json-server 工具的使用
目的:可以使用json-server工具 快速生成一个服务器
json-server工具 全局命令行工具
作用: 把json文件变成接口文件
- npm i -g json-server
在任何终端工具/ 在任意目录 都可以执行指令
cmd/IDE VSCode (ctrl+`)/win10 powerShell/conemu(软件)/Xshell等 - 02-其他资源/db.json
- 来到db.json文件所在的目录 -> 执行指令 json-server --watch db.json->启动了服务器->发送请求了!
08-基础-RESTFul 接口规则
发送请求->服务器->知道该服务器的接口规则->RESTful接口规则
好处: 只需要关注 请求方式 不需要关心标识问题
扩展
请求方式 8种 GET/POST
- 查询数据 GET /brands 获取db.json下brands对应的所有数据
- GET /brands/1 查询id=1数据
- 删除数据 DELETE /brands/1 删除id=1数据
- 修改数据 PUT /brands/1 请求体对象
- 上传/添加 POST /brands 请求体
PUT和POST用法一样 请求体
- 查询 GET /brands?title_like=关键字 -> 模糊搜索
09-基础-postman 测试接口
post成功 status201
10-基础-axios-介绍-引入
- 引入
- 使用API
11-基础-axios-使用
post 成功 status===201 其他是200
put和post用法一样 请求体
axios.get(url).then((res) => {
// 请求成功 会来到这 res响应体
}).catch((err) => {
// 请求失败 会来到这 处理err对象
})
对象解构赋值
let const (建议使用const)
12-基础-表格案例-axios 版-列表
- 把newlist使用改成list
- data中list:list->list:[]
- methods中 getData(){axios请求}
- 请求成功-> this.list = res.data
- mounted(){this.getData()}
13-基础-表格案例-axios 版-删除商品
删除->发送delete->根据id去删->传递v.id->删除成功->更新视图this.getData()
14-基础-表格案例-axios 版-添加商品
添加->发送post(请求体)->添加成功->更新视图
注意: 201 清空
15-基础-表格案例-axios 版-搜索功能-分析
计算属性中->异步操作axios(ajax)->在异步操作外面获取axios里面的结果->cb->.then源码->走不通
-> vue新知识
扩展
cb场景: 异步操作外面获取里面的结果
常见异步操作: ajax / 定时器 / 操作数据库 / 事件
16-基础-实例选项-watch-文档分析
场景: 当data数据变化同时 异步操作->当搜索关键字变化时 发送axios , 此时不适用计算属性,而应该侦听器watch
17-基础-实例选项-watch-基本使用
作用: 监测数据变化
特点:data变化时 自动触发函数
watch: {
// 被监测的数据:function(新值,old值){}
// msg:function(newVal,oldVal){
// }
msg(newV, oldV) {
console.log(newV, oldV);
// 异步操作 比如ajax 定时器等
}
},
18-基础-表格案例-axios 版-搜索功能-实现
watch: {
// 被监测的数据:函数
// 在关键字searchVal变化时 执行异步
searchVal(newV, oldV) {
// 异步
axios.get("http://localhost:3000/brands?name_like=" + newV)
.then((res) => {
// console.log(111111);
// res.data
// console.log(res.data);
this.list = res.data;
});
}
},
19-基础-组件-组件体验
场景: 开发页面多个位置有相似的(标签结构+css+js交互)->封装组件
vue项目中 整个网站是由组件组成的!
20-基础-组件-组件特点
- 组件是特殊的Vue实例
- 可以使用之前的选项 data/methods/watch/computed等(除了el)
- data的值不同 /template(必须有一个根元素)
- 使用组件时, 新的实例->data和methods不影响
建议: 实例开始, 都是使用第三方组件
21-基础-组件-全局组件
// 全局
// 1. 定义 (组件名,组件选项所在对象)
// 注意: 组件名命名, abc childA child-a
// 2. 写选项
// 注意: template 一个根元素 + data的值必须return{}的函数
template : ` 必须包含一个根标签`
template: `<div><span>{{count}}</span> <button @click="changeCount">按钮</button> <br></div>`
// 3. 使用
// 自定义标签名
// 在后面的任意的标签模板中都可以使用
html : 视图中
<div id='app'>
<!-- h3+p -->
<hhpp></hhpp>
<hhpp></hhpp>
<hhpp></hhpp>
<hhpp></hhpp>
<hhpp></hhpp>
</div>
// 自定义标签名
script :
Vue.component('hhpp', {
template: `<div><p>{{msg}}</p> <a href="#">sss斯蒂芬</a></div> `,
data() {
return { msg: 'aabbccdd' }
}
});
在script 中定义component 设置全局组件，自定义标签名，模板把重复的地方用模板字符串写入，还要设置一个div标签把标签包裹起来 ，
数据要return返回对象形式
在视图中 把script中自定义标签名 当成标签 写在视图里 要重复几次就写几次标签
