自定义指令
- 通过vue来封装指令（directive），从而去扩展标签原本的功能。
语法：
- 全局指令
- 语法：
Vue.directive(指令名称,指令的配置对象) - 指令名称：定义的时候不需要
v-，但是使用的时候加上v- - 指令的配置对象：{inserted(el){}} 等使用该指令的元素渲染完毕后（dom生成后）执行
- 在dom生成后才可为该dom扩展功能
- el 就是使用指令的dom对象
- 语法：
- 局部指令
- 语法：
new Vue({directives:{指令名称:指令的配置对象,...}}) - 指令名称：定义的时候不需要
v-，但是使用的时候加上v- - 指令的配置对象：{inserted(el){}} 等使用该指令的元素渲染完毕后（dom生成后）执行
- 在dom生成后才可为该dom扩展功能
- el 就是使用指令的dom对象
- 语法：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
<!-- 需求：v-focus指令来为该input标签实现自动获取焦点功能 -->
<input type="text" v-focus="{h:100,w:100}">
</div>
<script src="./vue.js"></script>
<script>
// 全局指令
// Vue.directive('focus',{
// // inserted 函数使用该指令的元素渲染完毕后执行
// inserted (el) {
// // el 使用该指令的DOM
// // 获取焦点
// // 对dom扩展任意功能
// el.style.height = '200px'
// el.focus()
// }
// })
const vm = new Vue({
el: '#app',
data: {},
methods: {},
// 局部 定义自定义指令
directives: {
// 属性名：指令的名称
// 属性值：指令配置对象
focus: {
inserted (el, binding) {
// binding 指令的信息对象
// 其中有一个 value 就是指令的值
el.style.width = binding.value.w + 'px'
el.style.height = binding.value.h + 'px'
el.focus()
}
}
}
})
</script>
</body>
</html>
补充：
- 指令的参数怎么接收
inserted(el,binding){}binding就是指令信息
计算属性
作用：
- 根据data当中的数据，经过一定的逻辑处理，得到一项新数据（计算属性）。
- 当data中的数据发生变化的时候，计算属性也会更新。
- 计算属性也是响应式数据，改变的时候也会驱动视图的更新。
- 当多次获取计算属性的时候，处理逻辑不会重新执行，因为有缓存。
定义：
- 语法：
new Vue({computed:{ 书写计算属性 }}) - 书写计算属性：
myMsg () { // 处理逻辑 return ‘处理后的数据’ }
- 使用：和data中的数据一致
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!-- 逻辑复杂，可读性差，违背初心（使用简单的js表达式） -->
<h1>{{ message.split('').reverse().join('') }}</h1>
<!-- 通过计算属性来优化 -->
<hr>
<h1>{{reverseMsg}}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
// 数据
data: {
message: 'hi vue'
},
methods: {},
// vue的配置选项：computed
// 计算属性
computed: {
// 属性名 计算属性的名称
// 属性值 计算属性的处理函数
// reverseMsg : function () {
reverseMsg () {
// 依赖data中的数据，进行一定的逻辑处理，得到一个新数据
const newMsg = this.message.split('').reverse().join('')
// 必须将新数据返回出去
return newMsg
}
// reverseMsg 就是数据名称，在模板中使用data中数据一致
}
})
</script>
</body>
</html>
总结：
- 使用场景：当你依赖data里面的数据，经过较为复杂的逻辑处理，得到一个新的数据，此时可以使用计算属性来实现。
computed和methods区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
<h1>{{reverseFn()}}</h1>
<h1>{{reverseFn()}}</h1>
<h1>{{reverseFn()}}</h1>
<h1>{{reverseMsg}}</h1>
<h1>{{reverseMsg}}</h1>
<h1>{{reverseMsg}}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hi vue'
},
methods: {
// 反转字符的函数 模板中使用{{reverseFn()}}
reverseFn () {
console.log('reverseFn')
return this.message.split('').reverse().join('')
}
// 每使用一次，会调用一次函数，重新执行内部逻辑，得到数据
},
computed: {
// 反转字符计算属性 模板中使用{{reverseMsg}}
reverseMsg () {
console.log('reverseMsg')
return this.message.split('').reverse().join('')
}
// 当多次调用的时候，之后执行一次逻辑，或走缓存
}
})
</script>
</body>
</html>
总结：
- 函数也可以实现数据逻辑处理得到新数据，但是多没使用一次执行一次逻辑，性能不优。
- 计算属性，在多次使用的时候，会走缓存，性能更好。
- 将来对数据进行（较为复杂）逻辑处理，建议使用计算属性。
接口规则-Resetful
目标：了解一种接口定义规范resetful
接口规范：如何定义接口地址，请求方式，传参方式，对应不同的请求操作行为。
具体规则：
| 接口地址 | 请求方式 | 操作行为 |
|---|---|---|
| /brands | GET | 查询所有列表 |
| /brands/:id | GET | 查询单个详情 /brands/1
|
| /brands | POST | 添加，提交的参数在请求体 |
| /brands/:id | DELETE | 删除 /brands/1
|
| /brands/:id | PUT | 修改 /brands/1 + 请求体{name,cTime} 全部修改 |
| /brands/:id | PATCH | 修改 /brands/1 + 请求体{name} 个别修改 |
这个表格可以作为接口调用的参考。
09-插件-axios
axios是什么：
- 是一个js插件，专注于网络通信（前端的xhr）。
- 它可以在前端浏览器使用，也可以在后台nodejs环境中使用。
- 如果在前端使用它是基于：xhr + promise 实现的
axios的下载：
axios的使用：
查询所有
查询单个
添加操作
删除操作
修改操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./axios.min.js"></script>
<script>
// - 查询所有
// axios.get('http://localhost:3000/brands').then(res=>{
// // res 响应报文对象（响应状态行+响应头+响应主体）
// // res.data 就是响应主体（返回的数据）
// console.log(res.data)
// }).catch(err=>{
// // 错误对象
// console.log(err)
// })
// - 查询单个
// axios.get('http://localhost:3000/brands/2').then(res=>{
// console.log(res.data)
// }).catch(err=>{
// console.log(err)
// })
// - 添加操作
// 第二个参数：请求体传参对象
// axios.post('http://localhost:3000/brands',{
// name: '奥拓',
// cTime: new Date()
// }).then(res=>{
// console.log('添加成功')
// })
// - 删除操作
// axios.delete('http://localhost:3000/brands/4').then(res=>{
// console.log('删除成功')
// })
// - 修改操作
// 第二个参数：请求体传参对象
// axios.patch('http://localhost:3000/brands/3',{
// name: '奥拓'
// }).then(res=>{
// console.log('修改成功')
// })
// axios.put('http://localhost:3000/brands/3',{
// name: '奥迪',
// cTime: new Date()
// }).then(res=>{
// console.log('修改成功')
// })
// - 带查询参数
// 1. 自己手动在地址栏拼接?后的键值对 ?id=2&name=宝马
// 2. 可以传对象提交多个筛选条件
// 3. get()中第二个参数可以用来提交参数对象 {params:{更多筛选条件}}
// json-server提供模糊查询 字段_like
axios.get('http://localhost:3000/brands',{
params:{
name_like: '奥'
}
}).then(res=>{
console.log(res.data)
}).catch(err=>{
console.log(err)
})
</script>
</body>
</html>
